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

DropDownMenuレスポンシブ対応で多階層なドロップダウンメニューを実装できる「DropDownMenu」前のページ

パララックス効果によるレスポンシブ対応のスライダー「Responsive Parallax Drag-slider With Transparent Letters」次のページResponsive Parallax Drag-slider With Transparent Letters

関連記事

  1. simplePagination.js
  2. Pagination.js

    JavaScript

    シンプルでさまざまなカスタマイズが可能な「Pagination.js」

    Pagination.jsはシンプルでさまざまなカスタマイズが可能なペ…

  3. SuperEmbed.js

    JavaScript

    さまざまな埋め込み動画をレスポンシブで表示できる「SuperEmbed.js」

    SuperEmbed.jsは、さまざまな埋め込み型の動画をレスポンシブ…

  4. nanogallery2

    JavaScript

    美しくてハイクオリティなイメージギャラリーを実装できる「nanogallery2」

    nanogallery2はパーソナルニーズにピッタリなイメージギャラリ…

  5. no-image

    JavaScript

    2枚の画像の違いを比較できるjQueryプラグイン「baSlider」

    baSliderはビフォー・アフターのような2枚の画像の違いを比較でき…

  6. Foxholder

最近の記事

  1. タリーズ ハムチーズ&サラダサンド
  2. クリニカのY字タイプのフロス
  3. 日和山公園の桜
  4. 成城石井 フレンチロースト
  5. COMOLI カシミアシルクニットパーカ

アーカイブ

PAGE TOP