Words Rotatorは、テキストの一部をアニメーションさせながら切り替えることができるjQueryプラグインです。
以下に簡単なデモを用意しましたので、挙動についてはデモページをご参照ください。デモ2のテキストはマウスホバーでアニメーションが停止し、クリックすると手動でアニメーションを実行することができます。
Words Rotatorの使い方
ステップ1. Words RotatorとAnimate.cssのダウンロードとサーバーへの設置
まずは、GitHubからWords RotatorとAnimate.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が似たようなことをしています。
一部のテキストのみをスライダーのようにアニメーションさせながら切り替えたい時は、ぜひご活用ください。