一般的なサイト制作案件では、過度なアニメーションを求められることは少ないですが、上手に取り入れることで利用者の心をグッとつかむことができます。どうせ作るなら、ユーザーの印象に残り、かつクライアントの目的を達成できるサイトに仕上げたいものです。
そんな、これからの制作案件にも採用できそうな、ちょっと目を引く表現方法を集めました。
CSSを使ったシンプルなマウスホーバー時のアニメーションエフェクトいろいろ。
ページ遷移時のアニメーションをCSS3で大量に実装したコレクション。
マウスの動きに合わせてパタパタと開閉するキャプション。3Dキューブがグリッド内を移動しているような動き。
CSS3を使って画像に折り目をつける。
ワンポイントに使えそうな、jQueryとCSS3を使ったデジタル時計。
スクロールするとアニメーションしながらサイズが変わる固定ヘッダーの実装。
CSS3で作るくるっと180度回転するフリップボードの作り方。
マウスオンでページがパラパラとめくれるCSS3で作った本。
一般的なサイト制作案件では、過度なアニメーションを求められることは少ないですが、上手に取り入れることで利用者の心をグッとつかむことができます。どうせ作るなら、ユーザーの印象に残り、かつクライアントの目的を達成できるサイトに仕上げたいものです。
そんな、これからの制作案件にも採用できそうな、ちょっと目を引く表現方法を集めました。
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で作った本。
関連するトピックス