jquery.simple-text-rotator.jsを使って、文字列の指定箇所に色々なローテーション演出を表示する方法をご紹介します。
Contents
文字に色々なローテーション演出を表示するCSSの記述
※simpletextrotator.cssファイルを読み込みます。その他は必要に応じて変更して下さい。
<style> body{ padding: 0; text-align: center; position: relative; margin: 0; height: 100%; } .clWrap{ width:800px; margin:0 auto; } h1{ margin-top: 50px; margin-bottom: 50px; font-size:18px; line-height:1.4em; } </style> <link rel="stylesheet" type="text/css" href="simpletextrotator.css" />
jquery.simple-text-rotator.jsを使って、文字列の指定箇所に色々なローテーション演出を表示するJavaScriptの記述
※jquery-1.9.1.js、jquery.simple-text-rotator.jsファイルを読み込みます。$(ローテーション演出の文字列).textrotator({演出,スピード})を設定します。必要に応じて変更して下さい。
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="jquery.simple-text-rotator.js"></script> <script> $(document).ready(function(){ $(".demo1 .rotate").textrotator({ animation: "fade", speed: 1000 }); $(".demo2 .rotate").textrotator({ animation: "flip", speed: 1250 }); $(".demo3 .rotate").textrotator({ animation: "flipCube", speed: 1500 }); $(".demo4 .rotate").textrotator({ animation: "flipUp", speed: 1750 }); $(".demo5 .rotate").textrotator({ animation: "spin", speed: 2000 }); }); </script>
文字に色々なローテーション演出を表示するHTMLの記述
※半角カンマ「,」区切りの文字列をローテーション演出で表示してます。カンマ「,」区切りが無い場合は指定文字列全てに動きがつきます。必要に応じて変更して下さい。
<div class="clWrap"> <h1>以下の文字列内より指定箇所のみ文字に動き(ローテーション)をつけて表示</h1> <h1 class="demo1">JavaScript,<span class="rotate">jQuery,Ajax,PHP,Android,java,WordPress,Facebook,HTML5,HTML,CSS,CSS3,MySQL,Linux,コマンド</span>,SEO,DAD UNION,アイデア</h1> <h1 class="demo2">JavaScript,<span class="rotate">jQuery,Ajax,PHP,Android,java,WordPress,Facebook,HTML5,HTML,CSS,CSS3,MySQL,Linux,コマンド</span>,SEO,DAD UNION,アイデア</h1> <h1 class="demo3">JavaScript,<span class="rotate">jQuery,Ajax,PHP,Android,java,WordPress,Facebook,HTML5,HTML,CSS,CSS3,MySQL,Linux,コマンド</span>,SEO,DAD UNION,アイデア</h1> <h1 class="demo4">JavaScript,<span class="rotate">jQuery,Ajax,PHP,Android,java,WordPress,Facebook,HTML5,HTML,CSS,CSS3,MySQL,Linux,コマンド</span>,SEO,DAD UNION,アイデア</h1> <h1 class="demo5">JavaScript,<span class="rotate">jQuery,Ajax,PHP,Android,java,WordPress,Facebook,HTML5,HTML,CSS,CSS3,MySQL,Linux,コマンド</span>,SEO,DAD UNION,アイデア</h1> </div>
jquery.simple-text-rotator.js:指定箇所の文字に色々な動き(ローテーション)で表示するデモページ
jquery.simple-text-rotator.js:指定箇所の文字に色々な動き(ローテーション)で表示するデモ
ソース元:jQuery Super Easy Text Rotator by Pete R. | The Pete Design
ソース元:jQuery Super Easy Text Rotator by Pete R. | The Pete Design
目立たせたい文字列に指定すると良いですね。
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。
ディスプレイ広告