JavaScript

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

  /

ウェブ開発やサイトのデザインでは、単なる静的なテキストよりも、動きのあるアニメーションやエフェクトを使うことで、訪問者の目を引きつける効果があります。今回の記事では、簡単に導入できるjQueryプラグイン「jquery.simple-text-rotator.js」を使って、指定した文字列にさまざまなローテーションアニメーションを表示する方法を解説します。

「jquery.simple-text-rotator.js」は、Webページ上の特定のテキストに動きをつけるためのシンプルなライブラリです。ローテーションエフェクトを適用することで、サイトのデザインに動きを加え、注目を集めることができます。この記事では、基本的な使い方から応用方法まで、詳しく説明していきますので、ぜひ参考にしてください。

Contents

jquery.simple-text-rotator.jsとは？

「jquery.simple-text-rotator.js」は、Pete R.が開発したシンプルかつ効果的なjQueryプラグインで、指定したテキストにローテーション効果を簡単に実装することができます。このプラグインを使うことで、ウェブページの一部をアクティブに見せたり、強調したい情報を視覚的に目立たせることが可能です。

使い方は非常に簡単で、HTMLとCSS、JavaScriptを少し追加するだけで、すぐに動作させることができます。また、このプラグインには複数のアニメーション効果が用意されており、サイトのデザインや目的に応じて選択できるため、幅広いシーンで活用できます。

文字に色々なローテーション演出を表示する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" />

上記のコードでは、ページ全体のレイアウトとテキストのスタイルを整えています。特に重要なのは、simpletextrotator.cssファイルの読み込みです。このファイルは、文字列のローテーションエフェクトに必要なCSSスタイルが定義されています。

jquery.simple-text-rotator.jsを使って、文字列の指定箇所にローテーション演出を表示するJavaScriptの記述

次に、JavaScriptを使用して、実際にローテーションアニメーションを動かす設定を行います。このステップでは、jQueryライブラリ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>

上記のコードでは、複数のアニメーションパターンを指定しています。たとえば、fadeやflip、flipCube、flipUp、spinなど、異なる動きでテキストを回転させることができます。また、speedパラメータでアニメーションの速度を調整できます。これにより、サイトの目的や雰囲気に合わせた最適な演出を実現できます。

文字に色々なローテーション演出を表示するHTMLの記述

次に、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>

このコードでは、指定された文字列に対してアニメーションが適用されます。class=”rotate”タグ内にある文字列が、カンマで区切られた単語ごとにローテーションしながら表示されます。

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

まとめ

「jquery.simple-text-rotator.js」を使用することで、特定のテキストに簡単にアニメーションを加えることができ、サイトの視覚的な魅力を高めることが可能です。これにより、訪問者の注意を引き、情報をより効果的に伝える手段として活用できます。
導入が容易で、カスタマイズも柔軟に行えるため、ぜひお試しください。

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。

jquery.simple-text-rotator.js 文字演出
関連記事