見るだけでもワクワクする、CSS3とjQueryのかっこいい7つのエフェクト

ページを開いた瞬間、ユーザーの目を引きつけるようなCSS3とjQueryを使ったタイポグラフィのかっこいいエフェクトを紹介します。

サイトのキャプチャ

Typography Effects with CSS3 and jQuery

かっこいい7つのデモ

デモは7つあり、どれもトキメクようなかっこいいエフェクトです。
デモを楽しむには、Chrome, Safari, Firefoxでご覧ください。

Demo 1

デモのキャプチャ

Demo 1

デモのキャプチャ

歪めて配置されたテキストは、マウスホバーで透明になり、フェードのアニメーションで異なるテキストが表示されます。

Demo 2

デモのキャプチャ

Demo 2

デモのキャプチャ

ポラロイド写真のように配置されたエレメントをホバーすると、テキストが半透明になり、背景の画像がアニメーションでスライドします。
また、それ以外のエレメントはアニメーションで回転し、縮小します。

Demo 3

デモのキャプチャ

Demo 3

デモのキャプチャ

ページをロードすると、ぼんやりとしたテキストがアニメーションで鮮明になります。ホバー時には、テキストのカラーがふんわりと変更します。

Demo 4

デモのキャプチャ

Demo 4

デモのキャプチャ

Chromeでのキャプチャ

デモのキャプチャ

Firefoxでのキャプチャ

空港のインフォメーションボードのようなエフェクトを再現したもので、Webkit系ブラウザ(Chrome, Safari)で期待通りの動作をします。
Firefoxでのエフェクトも面白いです。

Demo 5

デモのキャプチャ

Demo 5

デモのキャプチャ

浮かび上がったテキストがホバーすると沈み、背景の画像がアニメーションで拡大します。

Demo 6

デモのキャプチャ

Demo 6

デモのキャプチャ

これはDemo 3と類似しています。ページロード時にテキストをアニメーションで次々にはっきりと表示させます。

Demo 7

デモのキャプチャ

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の実装方法は、元記事に詳しく解説されています。

top of page

©2017 coliss