このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<link href="http://fonts.googleapis.com/css?family=Bevan" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Luckiest+Guy' rel='stylesheet' type='text/css'>
<style>
	#SlidingLettersDemo {
		font-family: 'Bevan', arial, serif;
		font-size: 50px;
		line-height: 50px;
		margin-right: 5px;
		text-transform: uppercase;
	}
	#SlidingLettersDemo a{
		display: block;
		position: relative;
		float:left;
		clear:both;
		color: #999999;
	}
	#SlidingLettersDemo a > span{
		height: 50px;
		float: left;
		position: relative;
		overflow: hidden;
	}
	#SlidingLettersDemo a span span{
		position: absolute;
		display: block;
		left: 0px;
		top: 0px;
		text-align: center;
	}
	#SlidingLettersDemo a span span.sl-w1{
		font-family: 'Bevan', arial, serif;
		color: #999999;
		text-shadow: 0px 0px 1px #fff;
		z-index: 2;
	}
	#SlidingLettersDemo {
		padding-top: 50px;
		margin: 20px;
		display: block;
	}
	#SlidingLettersDemo a{
		margin: 15px;
	}
	#SlidingLettersTxt01{
		font-family: 'Luckiest Guy', cursive;
	}
	#SlidingLettersTxt05{
		font-size: 100px;
		line-height: 100px;
	}
	#SlidingLettersDemo a#SlidingLettersTxt05 > span{
		height: 100px;
	}
	#SlidingLettersDemo a#SlidingLettersTxt01 span span.sl-w2{
		color: #8c0000;
		text-shadow: 5px 5px 3px #fff;
	}
	#SlidingLettersDemo a#SlidingLettersTxt02 span span.sl-w2{
		color: #3c948b;
		font-weight: bold;
		z-index: 3;
	}
	#SlidingLettersDemo a#SlidingLettersTxt03 span span.sl-w2{
		color: #ba968a;
		text-shadow: 1px 1px 1px #a78276,  0px 0px 5px #fff;
		z-index: 3;
	}
	#SlidingLettersDemo a#SlidingLettersTxt04 span span.sl-w2{
		color: #ecd16f;
		text-shadow: 0px 0px 4px #ecd16f;
		z-index: 3;
	}
	#SlidingLettersDemo a#SlidingLettersTxt05 span span.sl-w2{
		color: #ff516f;
		text-shadow: 0px 1px 2px #99162c;
		z-index: 3;
	}
</style>
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.lettering.js"></script>
<script src="<PATH>/jquery.easing.1.3.js"></script>
<script src="<PATH>/jquery.hoverwords.js"></script>
<script>
	$(window).load(function(){
		$('#SlidingLettersTxt01').hoverwords({ delay:50 });
		$('#SlidingLettersTxt02').hoverwords();
		$('#SlidingLettersTxt03').hoverwords();
		$('#SlidingLettersTxt04').hoverwords({ overlay:true});
		$('#SlidingLettersTxt05').hoverwords({ delay:60 });
	});
</script>

//オプション
delay		: false,
speed		: 300,
easing		: 'jswing',
dir			: 'leftright',
overlay		: false,
opacity		: true
<p class="title">文字にマウスを乗せると。。</p>
<div id="SlidingLettersDemo">
	<a href="#" id="SlidingLettersTxt01" data-hover="Good Morning">おはようございます!</a>
	<a href="#" id="SlidingLettersTxt02" data-hover="にっ!">いちたすいちは?</a>
	<a href="#" id="SlidingLettersTxt03" data-hover="すまりわ替れ入が字文">文字が入れ替わります</a>
	<a href="#" id="SlidingLettersTxt04">いろはにほへと</a>
	<a href="#" id="SlidingLettersTxt05" data-hover="かきくけこ">あいうえお</a>
</div>

SlidingLettersについて

SlidingLettersはマウスオーバーでアニメーションでテキスト切り替えできるプラグインです。 切り替えパターンが色々用意されているので、試して下さい。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスWTFPL
対応ブラウザ

関連するjQueryプラグイン

  • TextAnimation

    TextAnimation

    テキストを色々とアニメーションさせることができる

  • Airport

    Airport

    空港の発着情報ボードチックなテキスト表現ができる

  • Textualizer

    Textualizer

    テキストの切り替えにおもしろアニメーションをつけることができる

  • jQSlickWrap

    jQSlickWrap

    画像のフチに沿って文字を配置してくれる

  • fontSizer

    fontSizer

    ページ内の文字サイズを変更する事ができる