ウェブサイト制作において、わずかなアニメーションを実装した「マイクロインタラクション」の重要性が高まってきています。メインとなるコンテンツの邪魔せずに、魅力的なデザインを追加できるだけでなく、ユーザーにも分かりやすく情報を伝え、特定の要素に注目を集めることもできます。
今回は、素敵なアニメーションを実装した、HTML/CSS/JSスニペットをまとめてご紹介します。どれもアイデア性にあふれるクリエイティブな動きが表現されています。今後のデザイン制作に活用してみてはいかがでしょう。
詳細は以下から。
アニメーションが気持ちいい！コピペで実装できる最新HTML/CSSスニペットまとめ
ページの読み込みに多少時間がかかります、しばらくしてからスクロールするとよいでしょう。
３つのレイヤーを重ね、それぞれ@keyframesを指定することで、カラフルな波ウェーブ・エフェクトを実現しています。
See the Pen Waves by Rico Sta. Cruz (@rstacruz) on CodePen.
スクリーンをこすると、下に配置されたbackground-imageが現れる、Canvasを利用したユニークなレイアウト。
See the Pen Cursor trails by Chris Doble (@chrisdoble) on CodePen.
文字を入力すると、キラキラと輝きながらテキストが表示されていきます。
See the Pen Pixie Dust Input by Rik Schennink (@rikschennink) on CodePen.
クリックとマウスドラッグで、イメージ画像の切り替わりを調整できる、Canvas機能を活用したスライダー。
See the Pen THREE Image Transition by Szenia Zadvornykh (@zadvorsky) on CodePen.
Displacement Map Image Transition
画像が切り替わるたびに、煙のようなエフェクトが魅力的なイメージスライダー機能。
See the Pen Displacementmap image transition by Felix Nielsen (@flexmotion) on CodePen.
Smooth Hue Rotataion on Scroll
CSSフィルタ機能を利用した、スクロールに応じてスムーズに色合いを変化させています。
See the Pen Smooth hue rotation on scroll CSS only by Thomas Podgrodzki (@Podgro) on CodePen.
グラデーションカラーを利用した背景が、アニメーション付きで切り替わり、すこしずつ色が変化していきます。
See the Pen CSS Mood Lighting by Ally Baird (@Ally__Baird) on CodePen.
Scroll To Top Then Fixed Navigation Effect With jQuery and CSS
はじめは画面下に配置されたナビメニューを、スクロールに応じて画面上で固定する、よく見かける動作のひとつ。
See the Pen Scroll To Top Then Fixed Navigation Effect With jQuery and CSS by Bram de Haan (@atelierbram) on CodePen.
コミック漫画のコマ割りを再現した、レスポンシブにも対応するレイアウのアイデアには脱帽です。
See the Pen Responsive Comic Book Layout by Chris Smith (@chris22smith) on CodePen.
レスポンシブに対応した、大小さまざまなコンテンツをタイル状に組み合わせたレイアウト。
See the Pen Responsive Tiles by Nicholas Korta (@nekorasuKoruta) on CodePen.
メンバー紹介などに使える、グリッドをつかった万能レイアウト。
See the Pen The Team – Grid by Andy Tran (@andytran) on CodePen.
モバイルアプリに導入したい機能のひとつで、虫メガネアイコンをクリックすると、検索ボックスが表示されます。
See the Pen Nav and Search idea by Ally Baird (@Ally__Baird) on CodePen.
Search Input Context Animation
Ajaxなどをつかい、リアルタイム検索機能を実装するときに参考にしたい、アイコンアニメーションが素敵な作品。
See the Pen Search input context animation by Riccardo Zanutta (@rickzanutta) on CodePen.
色のHEX値やCMYK，RGBAなどお好みのカラーコードを、カラーパレットのクリックのみで行うことができます。
See the Pen Simple Flat Colour Selector (Clipboard, various formats) by Koya (@OfficialAntarctica) on CodePen.
クリックすると波型リップル・エフェクトを適用した、シンプルな金額、プライスリストの作成にどうぞ。
See the Pen Clip Mask Pricing Table by Jessica Biggs (@bigglesrocks) on CodePen.
ハートや星マークがキラキラと文字の周りで輝くCSSエフェクト。
See the Pen CSS Particle Effects by Koya (@OfficialAntarctica) on CodePen.
次のページでは、思わず押したくなるボタンや、SVGファイルの効果的な使い方などを紹介します。
