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アナリティクスタグは流用しないで下さい。