テキストにマウスオーバーするとポップな感じのエフェクトを実現するjQuery「Sliding Letters with jQuery」

「Sliding Letters with jQuery」を利用すると、マウスオーバー（テキストにカーソルを合わせたとき）にお洒落にテキストがが変化します。

ちょっと大胆なメニューやリンクテキストを強調させるのに使えそうです。少しHTMLとCSSがいじれれば簡単にアレンジができます。

サンプルを作ってみました。

→　テキストにマウスオーバーするとポップな感じのエフェクトを実現するjQuery「Sliding Letters with jQuery」サンプル

ポートフォリオサイトだけでなく、美容室やサロンなどのおしゃれ系なサイトに活用できそうです。背景画像も設定できるので、イメージに合わせて背景画像も変えてみて下さい。

【使用方法】
まずはこちらのSliding Letters with jQueryのサイトからファイルを一式ダウンロードします。

HEAD部分にCSSを設定します。

<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Bevan' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Bigshot+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Aclonica' rel='stylesheet' type='text/css'>

＜／ｂｏｄｙ＞の直前にJavaScriptの記述をします。

$(window).load(function(){
    $('#example1').hoverwords({ delay:50 });           
});

$(window).load(function(){

$('#example1').hoverwords({ delay:50 });

});

※（参考）オプションで以下の効果を設定できます。
delay : false, // each letter will have different animation times
speed : 300, // animation speed
easing : ‘jswing’, // easing animation
dir : ‘leftright’, // leftright – current goes left, new one goes right || rightleft – current goes right, new one goes left,
overlay : false, // hover word is slided on top of the current word (just for the case when the hover word equals word)
opacity : true // animate the letters opacity

以上で準備は完了です。

続いてBODY部分にマウスオーバーさせるテキストを記述します。下の場合は「Illustrations」にマウスをあわせると「Creativity」に変わります。

<div class="sl_examples">
    <a href="#" id="example1" data-hover="Creativity">Illustrations</a>
</div>

<a href="#" id="example1" data-hover="Creativity">Illustrations</a>

</div>

ダウンロードしてきたHTMLやCSSファイルのソースを色々アレンジしてみると使い方がわかると思います。ＩＤ名などそのままの単語で使える部分を利用するととても簡単に活用できます。

最後にサンプルのソースを書いておきます。どうぞご参考まで。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>テキストにマウスオーバーするとポップな感じのエフェクトを実現するjQuery「Sliding Letters with jQuery」サンプル</title>
		<meta charset="UTF-8" />
        <meta name="description" content="Sliding Letters with jQuery" />
		<link rel="shortcut icon" href="http://pannyatto.firebird.jp/logo-favi.png">
        <link rel="stylesheet" type="text/css" href="css/style.css" />
		<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'>
		<link href='http://fonts.googleapis.com/css?family=Bevan' rel='stylesheet' type='text/css'>
		<link href='http://fonts.googleapis.com/css?family=Bigshot+One' rel='stylesheet' type='text/css'>
		<link href='http://fonts.googleapis.com/css?family=Aclonica' rel='stylesheet' type='text/css'>
    </head>
    <body>
		<div class="bg"><img src="images/bg.jpg" alt="background" /></div>
		<h1>Salon de Pannyatto/H&Y</h1>
		<ul id="sl_menu" class="sl_menu">
			<li>
				<a href="#">Home</a>/
			</li>
			<li>
				<a href="#">About</a>/
			</li>
			<li>
				<a href="#">Price</a>/
			</li>
			<li>
				<a href="#">Contact</a>
			</li>
		</ul>
		<div class="sl_examples">
			<a href="#" id="example1" data-hover="Beauty&Relaxation">Design</a>
			<a href="#" id="example2" data-hover="Collections">Gallery</a>

		</div>
	
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.lettering.js"></script>
		<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
		<script type="text/javascript" src="js/jquery.hoverwords.js"></script>
		
		<script type="text/javascript">
			$(window).load(function(){
				$('#sl_menu').find('li:not(:last) > a')
							 .hoverwords({ overlay:true })
							 .end()
							 .find('li:last > a')
							 .hoverwords({ overlay:true , dir:'rightleft' });
				
				$('#example1').hoverwords({ delay:50 });
				$('#example2').hoverwords();
				
			});
		</script>
    </body>
</html>

<!DOCTYPE html>

<head>

<title>テキストにマウスオーバーするとポップな感じのエフェクトを実現するjQuery「Sliding Letters with jQuery」サンプル</title>

</head>

<body>

<h1>Salon de Pannyatto/H&Y</h1>

<li>

<a href="#">Home</a>/

</li>

<li>

<a href="#">About</a>/

</li>

<li>

<a href="#">Price</a>/

</li>

<li>

<a href="#">Contact</a>

</li>

</ul>

<a href="#" id="example1" data-hover="Beauty&Relaxation">Design</a>

<a href="#" id="example2" data-hover="Collections">Gallery</a>

</div>

$(window).load(function(){

$('#sl_menu').find('li:not(:last) > a')

.hoverwords({ overlay:true })

.end()

.find('li:last > a')

.hoverwords({ overlay:true , dir:'rightleft' });

$('#example1').hoverwords({ delay:50 });

$('#example2').hoverwords();

});

</script>

</body>

</html>

あわせてお読みください

facebookやTwitterのプロフィールをマウスオーバーして表示させるjQueryプラグイン「Hovercard」

Hovercard テキストにマウスオーバーすると、facebookやTwitterのプロフィールを取得して表示してくれるのがこのjQueryプラグイン「Ho…

テキストをCSSアニメーションさせてクールに演出させる「Rotating Words with CSS Animations」

以前にテキストをアニメーションにするjQueryプラグイン『textualizer』をご紹介しましたが、今回はCSSアニメーションを使用して、文章の一部のテキス…

テキストをアニメーション風にお洒落に切り替えるjQueryプラグイン「textualizer」

テキストの文字をかっこよく動かして見せたい方にぴったりのjQueryです。テキストの切り替えのとき文字をいろいろなお洒落なエフェクト効果をかけて動きを出すこと…

ぱんにゃっとTutorial

jQueryやWordPress、Webデザインに役立つ情報など

ちょっと楽しいおすすめのサンプル

月額126円(税抜)から！WordPressも使えるクラウド型高速レンタルサーバー

カテゴリー

タグ

テキストにマウスオーバーするとポップな感じのエフェクトを実現するjQuery「Sliding Letters with jQuery」

→　テキストにマウスオーバーするとポップな感じのエフェクトを実現するjQuery「Sliding Letters with jQuery」サンプル

あわせてお読みください

コメントを残すコメントをキャンセル

ぱんにゃっとTutorial

jQueryやWordPress、Webデザインに役立つ情報など

ちょっと楽しいおすすめのサンプル

人気記事ランキング

月額126円(税抜)から！WordPressも使えるクラウド型高速レンタルサーバー

カテゴリー

タグ

テキストにマウスオーバーするとポップな感じのエフェクトを実現するjQuery「Sliding Letters with jQuery」

→ テキストにマウスオーバーするとポップな感じのエフェクトを実現するjQuery「Sliding Letters with jQuery」サンプル

あわせてお読みください

コメントを残す コメントをキャンセル

→　テキストにマウスオーバーするとポップな感じのエフェクトを実現するjQuery「Sliding Letters with jQuery」サンプル

コメントを残すコメントをキャンセル