見るだけでもワクワクする、CSS3とjQueryのかっこいい7つのエフェクト
Post on:2011年11月30日
sponsors
ページを開いた瞬間、ユーザーの目を引きつけるようなCSS3とjQueryを使ったタイポグラフィのかっこいいエフェクトを紹介します。
Typography Effects with CSS3 and jQuery
[ad#ad-2]
かっこいい7つのデモ
デモは7つあり、どれもトキメクようなかっこいいエフェクトです。
デモを楽しむには、Chrome, Safari, Firefoxでご覧ください。
Demo 1
歪めて配置されたテキストは、マウスホバーで透明になり、フェードのアニメーションで異なるテキストが表示されます。
Demo 2
ポラロイド写真のように配置されたエレメントをホバーすると、テキストが半透明になり、背景の画像がアニメーションでスライドします。
また、それ以外のエレメントはアニメーションで回転し、縮小します。
Demo 3
ページをロードすると、ぼんやりとしたテキストがアニメーションで鮮明になります。ホバー時には、テキストのカラーがふんわりと変更します。
Demo 4
Chromeでのキャプチャ
Firefoxでのキャプチャ
空港のインフォメーションボードのようなエフェクトを再現したもので、Webkit系ブラウザ(Chrome, Safari)で期待通りの動作をします。
Firefoxでのエフェクトも面白いです。
[ad#ad-2]
Demo 5
浮かび上がったテキストがホバーすると沈み、背景の画像がアニメーションで拡大します。
Demo 6
これはDemo 3と類似しています。ページロード時にテキストをアニメーションで次々にはっきりと表示させます。
Demo 7
各テキストをサークルで囲み、ホバー時に太陽のようなラジアルグラデーションをアニメーションで表示します。
実装のポイント
各デモのHTMLはシンプルで、下記のHTMLをベースに作成されています。
HTML
<div id="letter-container" class="letter-container"> <h2><a href="#">Sun</a></h2> </div>
h2要素で実装した個々のテキストに自動でspanを挿入できるようスクリプト「Lettering.JS」を使用しています。
「Lettering.JS」の使い方は当サイトで以前取り上げたので、参照ください。
各デモのCSS3とjQueryの実装方法は、元記事に詳しく解説されています。
sponsors
