no-image

JavaScript

華やかなレターアニメーションを実装できる「Decorative Letter Animations」

Decorative Letter Animationsは、華やかなレターアニメーションを実装できるのが特徴です。Dribble shotの「Us By Night by Animography」をベースにしたアイディアとのこと。インパクトあるカッコいいアニメーションを表示させたい人は要チェックです。

Decorative Letter Animations

デモ

デモでは画面中央に華やかなアニメーションとともに大きなテキストが表示されます。その下には左右の矢印ボタンが設置されていて、ここをから前後のテキストへ切り替えることが可能です。

アニメーションにはいろんな種類があり、各テキストに応じてさまざまなアニメーションを楽しむことができます。どのアニメーションもダイナミックで印象強く、とてもお洒落ですね。

オプションには、shapesOnTop、totalShapes、shapeTypes、shapeColors、shapeFill、shapeStrokeWidthがあるほか、lettersAnimationOptsにはduration、delay、easing、opacity、scaleが、shapesAnimationOptsにはduration、delay、easing、translateX、translateY、scale、rotate、opacityといった項目のセッティングが可能になっています。

丸や三角や四角のアイコンが四方に舞い散るような華やかなアニメーションを実装したいという人は、ぜひ「Decorative Letter Animations」をチェックしてみてはいかがでしょうか?

Decorative Letter Animations

no-imageスライダータイプの質問フォーム実装「jquery.formslider」前のページ

サラッとスライスで切り替わるスライダー実装「Slice Slider」次のページno-image

最近の記事

  1. ウィンターホワイトマグツリー
  2. 読書の進捗状況を非表示にする
  3. 牛すじ煮込みカレーと温野菜
  4. クリスマスブレンドとホリデースクープ
  5. バタースコッチドーナツ
PAGE TOP