今日の人気記事

  1. select要素の複数選択フォームを実装「Multiple Select」
  2. 横幅いっぱいの画像スライダー「full width image slider」
  3. レスポンシブのリッチな日付・時間入力「pickadate.js」
  4. Bootstrapを使ったページ送りを実装「bootstrap pagination」
  5. シンプルなトグルボタンを簡単実装「Toggle Switch」

アニメーションでテキストが切り替わる「Words Rotator」

スポンサーリンク

アニメ効果付きのテキスト切り替えを実装するプラグイン「Words Rotator」を紹介します。

jQueryプラグイン「Words Rotator」

このプラグインを使えば、指定したテキストをさまざまなアニメ効果で切り替えることができます。

スライド、フェードイン、フェードアウト、くるくる回る……なんでもありです!

スポンサーリンク

デモでアニメ効果で切り替わるテキストをお楽しみください。

「Words Rotator」のデモ

デモのソース(HTML + jQuery)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="description" content="Words Rotatorのデモでーす。">
<title>Words Rotator - jQuery Plugin Demo</title>
<link rel="stylesheet" href="jquery.wordrotator.css">
<link rel="stylesheet" href="animate.css">
</head>
<body>
<h1>Words Rotatorのデモでーす。</h1>

<h2><span id="demo1"></span> <span id="demo2"></span> <span id="demo3"></span></h2>

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="jquery.wordrotator.js"></script>
<script>
$(function () {
  $("#demo1").wordsrotator({
    words: ['あれっ', 'ほらっ', 'じゃーん']
  });
  $("#demo2").wordsrotator({
    stopOnHover: true,
    words: ['テキスト','文字列','TEXT', 'text'],
    animationIn: "rollIn",
    animationOut: "rollOut"
  });
  $("#demo3").wordsrotator({
    stopOnHover: true,
    changeOnClick: true,
    words: ['くるくる回るよ','切り替わる','スライド', 'フェードイン'],
    animationIn: "lightSpeedIn",
    animationOut: "lightSpeedOut"
  });
});
</script>   
</body>
</html>
スポンサーリンク

関連記事(一部広告含む)