テキストの一部分だけをアニメーションさせながら切り替えることができるjQueryプラグイン「Words Rotator」

テキストの一部分だけをアニメーションさせながら切り替えることができるjQueryプラグイン「Words Rotator」

テキストの一部分だけをアニメーションさせながら切り替えることができるjQueryプラグイン「Words Rotator」

Words Rotatorは、テキストの一部をアニメーションさせながら切り替えることができるjQueryプラグインです。

以下に簡単なデモを用意しましたので、挙動についてはデモページをご参照ください。デモ2のテキストはマウスホバーでアニメーションが停止し、クリックすると手動でアニメーションを実行することができます。

デモページを見る

Words Rotatorの使い方

ステップ1. Words RotatorとAnimate.cssのダウンロードとサーバーへの設置

まずは、GitHubからWords RotatorAnimate.cssをダウンロードします。

以下のファイルをサーバーに設置します。

  • jquery.wordrotator.min.js (Words Rotator)
  • jquery.wordrotator.min.css (Words Rotator)
  • animate.min.css (Animate.css)

ステップ2. jQuery本体とスクリプト・CSSの読み込み

ファイルをサーバーに設置したら、jQuery本体とスクリプトおよびCSSファイルを読み込みます。

<link rel="stylesheet" href="jquery.wordrotator.min.css">
<link rel="stylesheet" href="animate.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="jquery.wordrotator.min.js"></script>

jQuery本体とjquery.wordrotator.min.jsは、</body>の直前で読み込んでもOKです。

ステップ3. HTMLのマークアップ

HTMLは非常にシンプルです。

<h2>デモ1:<span id="demo1"></span></h2>
<h2>デモ2:<span id="demo2"></span></h2>

テキストをアニメーションで切り替えながら表示したい箇所にIDを加えておきます。

ステップ4. Words Rotatorの実行

最後にWords Rotatorを実行すれば実装完了です。以下のようなコードを</body>の直前に記述します。

<script>
$(function () {
  $("#demo1").wordsrotator({
    words: ['テキストを', 'スライダーのように', '切り替えることができます'],
    autoLoop: true, //オートプレイ
    randomize: false, //ランダム
    stopOnHover: false, //マウスホバー時にストップ
    changeOnClick: false, //クリックで切り替え
    animationIn: "fadeIn", //開始時のアニメーション
    animationOut: "fadeOutLeft", //終了時のアニメーション
    speed: 2000 //切り替えスピード
  });
  $("#demo2").wordsrotator({
    words: ['こちらは','マウスホバーで停止','クリックで切り替え実行'],
    stopOnHover: true,
    changeOnClick: true,
    animationIn: "rollIn",
    animationOut: "rollOut"
  });
});
</script>

「words」に表示したいテキストを入れます。

各種オプションは好みに合わせて変更してください。animationInとanimationOutで指定できるアニメーションは、Animate.cssで使えるクラスを指定します。

あとがき

たまにキャッチコピーの部分を切り替えているサイトを見かけますね。現時点(2018/04/18)だとEvernoteが似たようなことをしています。

一部のテキストのみをスライダーのようにアニメーションさせながら切り替えたい時は、ぜひご活用ください。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です