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

関連記事

  1. Simple Modal

    JavaScript

    レスポンシブ対応の軽量・シンプルなモーダル「Simple Modal」

    Simple Modalはレスポンシブに対応した軽量でシンプルなモーダ…

  2. flubber

    JavaScript

    滑らかなシェイプアニメーションを実装できる「flubber」

    flubberは、滑らかな2Dによるシェイプアニメーションを実装するこ…

  3. jQuery Quick Modal
  4. no-image

    JavaScript

    あらかじめ設定したリストなどから複数タグを選択できる「Tokenize2」

    Tokenize2は、あらかじめ設定したリストやAjaxから複数のタグ…

  5. No Vacancy

    JavaScript

    ネオンサインのようなエフェクトを実装できるjQueryプラグイン「No Vacancy」

    テキストにネオンサインのようなエフェクトを実装することができるjQue…

  6. Shave

    JavaScript

    設定した高さに基づいて複数行のテキストを切り取る「Shave」

    Shaveは設定した最大の高さに基づいてHTML要素内に収まるように複…

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP