ウェブサイト制作において、わずかなアニメーションを実装した「マイクロインタラクション」の重要性が高まってきています。メインとなるコンテンツの邪魔せずに、魅力的なデザインを追加できるだけでなく、ユーザーにも分かりやすく情報を伝え、特定の要素に注目を集めることもできます。
今回は、素敵なアニメーションを実装した、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ファイルの効果的な使い方などを紹介します。
2016年を代表する鮮やかな配色に、オーバー気味のドロップシャドウが美しい、ボタン・ホバー用エフェクト。
See the Pen Fancy Button by Mohsen Khakbiz (@Mohsen-Khakbiz) on CodePen.
Big Fancy 3D Rotating SVG Button
マウスホバーに合わせて、立体的に回転します。
See the Pen Big Fancy 3D Rotating SVG Button by J Scott Smith (@jscottsmith) on CodePen.
青白く光る文字テキストや、放射線上に広がるライティングが魅力的なホバーエフェクト。
See the Pen Blue light button by Toshiyuki TAKAHASHI (@gau) on CodePen.
Collection of Cool Button Hover Effects
HTML/CSSのみで作成された、オリジナル性の高いボタン用ホバーエフェクトを、合計9種類用意しています。
See the Pen Collection of Cool Button Hover Effects by Carlos1162 (@Carlos1162) on CodePen.
SVG ファイルを利用せずに、CSSのみでアニメーション付きのボーダーラインを演出します。
See the Pen Borders on hover without SVG by Adrian Crabtree (@imacrab) on CodePen.
タイトルのままですが、Facebookでのリアクション機能を完全再現しています。
See the Pen Facebook Reactions (Mother’s day sneak peak) by Carlos Medina (@medinnna) on CodePen.
表示されるたびにユニークなアニメーションを追加した、SVG アイコン素材が揃っています。
See the Pen SVG Animated icons by kittons (@airnan) on CodePen.
各フォント毎にアニメーションを設定することで、滑らかなストローク・アニメーションを表現しています。
See the Pen SVG Stroke Animation by Toshiyuki TAKAHASHI (@gau) on CodePen.
こちらも波型SVGラインに、シンプルな@keyframesを利用して、マイクロインタラクションを追加します。
See the Pen Animations! by Varun Vachhar (@winkerVSbecks) on CodePen.
アニメーションの滑らかさに定評のするプラグインを利用した、実践で参考にしたいスニペット。
See the Pen Logo by Marco Barría (@fixcl) on CodePen.
写真加工を行ったときのビフォーとアフターを、マウスカーソルに反応するスライダーで適用できます。
See the Pen Before & After by Bryan Stoner (@mimoduo) on CodePen.
風景画を立体的な粒子状でとらえた、未来を感じるアート・デザイン作品のひとつ。ズームアップすると、すごいです。
See the Pen Pixel Particles by Szenia Zadvornykh (@zadvorsky) on CodePen.
ぬるりと動くモーフィング・アニメーションを採用した、CSSのみでスタイリングされたページ送りで、美しいグラデーション背景もポイント。
See the Pen Page control animations by Giuseppe Bandiera (@giuband) on CodePen.
カラフルなドットが大小にサイズを変え点滅する、CSSで作成されたローディング・アニメーション。
See the Pen #cssloop 003 by Matteo Belfiore (@heartbox) on CodePen.
スポーツカーがドリフト走行している様子を、ローディング画面に活用しています。
See the Pen SVG Car Drift Loader by Chris Gannon (@chrisgannon) on CodePen.
CSSスタイリングのみで表現された、本物そっくりのiPhone 6。
See the Pen iPhone 6 mockup | CSS only by Håvard Brynjulfsen (@havardob) on CodePen.
各キーボードを入力することで、バケツをつかったドラムマシーンで遊びことができます。
See the Pen SVG Animated Bucket Drums by Spencer Putnam (@sgput) on CodePen.
なんとCSSのスタイリングのみで作成されたアニメーションは、中毒性のあるコミカルな動きが素敵です。
See the Pen CSS Wrestler by Pavel (@drfisher) on CodePen.
