W3QはBiztterに生まれ変わりました!
Web制作に関するお悩みはBiztterへどうぞ!

Biztterで質問する

制作案件に使えば注目度アップ!CSS3を使った驚きのアニメーション表現

一般的なサイト制作案件では、過度なアニメーション... / CSS3を使ったアニメーション表現 / Simple Icon Hover Effect...他...全10件

一般的なサイト制作案件では、過度なアニメーションを求められることは少ないですが、上手に取り入れることで利用者の心をグッとつかむことができます。どうせ作るなら、ユーザーの印象に残り、かつクライアントの目的を達成できるサイトに仕上げたいものです。

そんな、これからの制作案件にも採用できそうな、ちょっと目を引く表現方法を集めました。

CSS3を使ったアニメーション表現

Simple Icon Hover Effects tympanus.net: Simple Icon Hover Effects | Codrops

CSSを使ったシンプルなマウスホーバー時のアニメーションエフェクトいろいろ。

A Collection of Page Transitions tympanus.net: A Collection of Page Transitions | C...

ページ遷移時のアニメーションをCSS3で大量に実装したコレクション。

Direction-aware 3D hover effect codepen.io: Direction-aware 3D hover effect - Co...

マウスの動きに合わせてパタパタと開閉するキャプション。3Dキューブがグリッド内を移動しているような動き。

CSS3 shadow map codepen.io: CSS3 shadow map - CodePen

CSS3を使って画像に折り目をつける。

Digital Clock tutorialzine.com: How to Make a Digital Clock with jQu...

ワンポイントに使えそうな、jQueryとCSS3を使ったデジタル時計。

On-Scroll Animated Header tympanus.net: Blueprint: On-Scroll Animated Header...

スクロールするとアニメーションしながらサイズが変わる固定ヘッダーの実装。

CSS Flip Boards paulund.co.uk: CSS Flip Boards

CSS3で作るくるっと180度回転するフリップボードの作り方。

Animated Books with CSS 3D Transforms tympanus.net: Animated Books with CSS 3D Transform...

マウスオンでページがパラパラとめくれるCSS3で作った本。

最終更新日:2013-07-12 (54,748 views)

関連するトピックス

ページ上部に戻る