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

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

テキストの一部分だけをアニメーションさせながら切り替えることができるjQueryプラグイン「Words Rotator」
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加


  • 一式98,000円~の格安プランをご用意!Web制作お任せください!
  • このエントリーをはてなブックマークに追加

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 で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。