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. Popper.js

    JavaScript

    軽量で見やすいツールチップを実装できる「Popper.js」

    Popper.jsはユーザーにとって見やすいツールチップを実装できるJ…

  2. Naver

    JavaScript

    シンプルですごくいい!レスポンシブに合うナビゲーションのjQueryプラグイン「Naver」

    NaverというjQueryプラグインがすごくシンプルでよかったのでご…

  3. Inspiration for Menu Hover Effects
  4. Scroll Indicator

    JavaScript

    シンプルなスクロールインジケーターを実装できる「Scroll Indicator」

    Scroll Indicatorは、スクロールによるアニメーションでコ…

  5. Inspiration for Letter Effects

    JavaScript

    印象的なテキストエフェクトを実装する「Inspiration for Letter Effects」…

    anime.jsを活用した、印象的でとってもかっこいいテキストエフェク…

最近の記事

  1. Apple WatchでのMacロック解除を無効
  2. オータムスイートポテトフラペチーノ
  3. 紅葉
  4. ナノケア EH-NA0E
  5. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP