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. スマトラ
  2. さくらドーナツ
  3. 紙のコーヒーフィルター
  4. PS5とFF7リメイクと鉄拳8
PAGE TOP