jquery.simple-text-rotator.js:指定箇所の文字に色々な動き(ローテーション)で表示できるJs



文字列内より指定箇所のみ文字に色々な動き(ローテーション)を
つけて表示してみます。

1.読込むCSSファイルと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" />

2.読込むJsファイルとJavaScriptの記述例

<script type="text/javascript" src="http://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>

3.HTMLの記述例

    <h1 class="demo1">JavaScript,<span class="rotate">jQuery,Ajax,PHP,Android,java,WordPress,Facebook,HTML5,HTML,CSS,CSS3,MySQL,Linux,コマンド</span>,SEO,スマートフォン,見えないデザイン,アイデア</h1>
    <h1 class="demo2">JavaScript,<span class="rotate">jQuery,Ajax,PHP,Android,java,WordPress,Facebook,HTML5,HTML,CSS,CSS3,MySQL,Linux,コマンド</span>,SEO,スマートフォン,見えないデザイン,アイデア</h1>
    <h1 class="demo3">JavaScript,<span class="rotate">jQuery,Ajax,PHP,Android,java,WordPress,Facebook,HTML5,HTML,CSS,CSS3,MySQL,Linux,コマンド</span>,SEO,スマートフォン,見えないデザイン,アイデア</h1>
    <h1 class="demo4">JavaScript,<span class="rotate">jQuery,Ajax,PHP,Android,java,WordPress,Facebook,HTML5,HTML,CSS,CSS3,MySQL,Linux,コマンド</span>,SEO,スマートフォン,見えないデザイン,アイデア</h1>
    <h1 class="demo5">JavaScript,<span class="rotate">jQuery,Ajax,PHP,Android,java,WordPress,Facebook,HTML5,HTML,CSS,CSS3,MySQL,Linux,コマンド</span>,SEO,スマートフォン,見えないデザイン,アイデア</h1>

jquery.simple-text-rotator.js:指定箇所の文字に色々な動き(ローテーション)で表示するデモ

ソース元:jQuery Super Easy Text Rotator by Pete R. | The Pete Design

目立たせたい文字に指定すると良い様に思います。