文字に色々なローテーション演出を表示する方法【jquery.simple-text-rotator.js】

jquery.simple-text-rotator.jsを使って、文字列の指定箇所に色々なローテーション演出を表示する方法をご紹介します。

文字に色々なローテーション演出を表示する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アナリティクスタグは流用しないで下さい。