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. jQuery Bar Rating

    JavaScript

    選択範囲を評価ウィジェットに変換できる「jQuery Bar Rating」

    jQuery Bar Ratingは、ユーザーが選択する範囲を評価ウィ…

  2. no-image

    JavaScript

    シンプルで軽量なスクロールアニメーション実装「animateMePlz」

    animateMePlzはシンプルで軽量なスクロールアニメーションを実…

  3. Ace Responsive Menu
  4. hsimp

    JavaScript

    パスワードの安全性を教えてくれる「hsimp」

    hsimpは、パスワードがどれだけ安全かを判定してくれるスクリプトです…

  5. jQueryプラグインのスライダー集

    JavaScript

    【jQueryプラグイン】素晴らしい機能が満載のスライダー集

    jQueryプラグインには様々な役立つ機能がありますが、中でも人気が高…

  6. MoveTo

    JavaScript

    軽量なスムーススクロールを実装できるJSライブラリ「MoveTo」

    MoveToは軽量(圧縮版で1KBほど)なスムーススクロールを実装する…

最近の記事

  1. Olli
  2. 単語帳メーカー(Flashcard Maker App)
  3. 1Password 7
  4. 風に揺れる草

Facebookページ

PAGE TOP