jQuery Text Fade Delay

JavaScript

フェードとディレイ(遅延)アニメーションでテキストを表示する「jQuery Text Fade Delay」

jQuery Text Fade Delayは、テキストをフェードとディレイ(遅延)アニメーションで美しく表示させることができるjQueryプラグインです。blockquote要素が表示されたあとに、cite要素が遅れて表示します。

jQuery Text Fade Delay

デモ

デモではテキストがフェードアニメーションで優雅に表示されていきます。最初にblockquote要素に記述した内容が表示され、そのあと遅れてcite要素に記述した内容が表示される仕組みです。

これを1セットとし、その後、次のセットの内容を表示していきます。マークアップはulでリスト形式に記述するので、シンプルでとてもわかりやすいのがいいですね。

オプションには、fadeSpeed、duration、citeDelay、citeFadeSpeedといった項目が用意されています。各項目の数値を調節することで、自分好みのアニメーションにカスタマイズすることが可能です。

デフォルトの値は、fadeSpeedが500、durationが2000、citeDelayが1200、citeFadeSpeedが750です。

また、対応ブラウザは、Chrome 42+、Firefox 39+、Safari 9+、Internet Explorer 10+、Edge 14+をサポートしているとのこと。ライセンスはMIT。

フェードとディレイによるアニメーションで、テキストをかっこよく表示させたいという人は、ぜひ「jQuery Text Fade Delay」を活用してみてはいかがでしょうか?

jQuery Text Fade Delay

関連記事

  1. Menu Droplet Animation
  2. SMINT

    JavaScript

    1ページだけのWebサイトに最適なスクロール移動できるナビゲーションを実装できるjQueryプラグイ…

    1ページだけのWebサイトを作る際にとても役立ちそうですね。ナビゲーシ…

  3. no-image
  4. JavaScript

    2KB程の軽量&シンプルなjQueryスライダー「Craftyslide」を使ってみた

    とてもシンプルで軽量ないい感じのjQueryプラグイン「Craftys…

  5. NO IMAGE

    JavaScript

    フェード、スライド、水平、垂直などカスタマイズ性の高いスライダー「Prrple Slider」

    Prrple Sliderはフェードアニメーションやスライド、ループ、…

  6. Simple HTML Menu

    JavaScript

    モバイルにもピッタリなレスポンシブ対応のメニュー実装「Simple HTML Menu」

    Simple HTML Menuは、モバイルにもピッタリなレスポンシブ…

最近の記事

  1. Anker PowerCore Lite 20000
  2. ネクスタイム
  3. フォールドオーバーポーチ
  4. 田沢湖
  5. ハクバ シリコンクロス

Instagram始めました

Facebookページ

アーカイブ

PAGE TOP