Sliding Letters with jQuery

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

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

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

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

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


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

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

</body>の直前にJavaScriptの記述をします。

※(参考)オプションで以下の効果を設定できます。
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」に変わります。

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

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

この記事と関連してると思われる記事: