Advertisement

latestsnippet2016may

 

ウェブサイト制作において、わずかなアニメーションを実装した「マイクロインタラクション」の重要性が高まってきています。メインとなるコンテンツの邪魔せずに、魅力的なデザインを追加できるだけでなく、ユーザーにも分かりやすく情報を伝え、特定の要素に注目を集めることもできます。

 

 

今回は、素敵なアニメーションを実装した、HTML/CSS/JSスニペットをまとめてご紹介します。どれもアイデア性にあふれるクリエイティブな動きが表現されています。今後のデザイン制作に活用してみてはいかがでしょう。

 

 

 

詳細は以下から。

 

 

 

アニメーションが気持ちいい!コピペで実装できる最新HTML/CSSスニペットまとめ

 

ページの読み込みに多少時間がかかります、しばらくしてからスクロールするとよいでしょう。

 

Waves

3つのレイヤーを重ね、それぞれ@keyframesを指定することで、カラフルな波ウェーブ・エフェクトを実現しています。

See the Pen Waves by Rico Sta. Cruz (@rstacruz) on CodePen.

 

 

 

Cursor Traits

スクリーンをこすると、下に配置されたbackground-imageが現れる、Canvasを利用したユニークなレイアウト。

See the Pen Cursor trails by Chris Doble (@chrisdoble) on CodePen.

 

 

 

Pixel Dust Input

文字を入力すると、キラキラと輝きながらテキストが表示されていきます。

See the Pen Pixie Dust Input by Rik Schennink (@rikschennink) on CodePen.

 

 

 

THREE Image Transition

クリックとマウスドラッグで、イメージ画像の切り替わりを調整できる、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.

 

 

 

CSS Mood Lighting

グラデーションカラーを利用した背景が、アニメーション付きで切り替わり、すこしずつ色が変化していきます。

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.

 

 

 

Responsive Comic Layout

コミック漫画のコマ割りを再現した、レスポンシブにも対応するレイアウのアイデアには脱帽です。

See the Pen Responsive Comic Book Layout by Chris Smith (@chris22smith) on CodePen.

 

 

 

Responsive Tile

レスポンシブに対応した、大小さまざまなコンテンツをタイル状に組み合わせたレイアウト。

See the Pen Responsive Tiles by Nicholas Korta (@nekorasuKoruta) on CodePen.

 

 

 

The Team – Grid

メンバー紹介などに使える、グリッドをつかった万能レイアウト。

See the Pen The Team – Grid by Andy Tran (@andytran) on CodePen.

 

 

 

Nav and Search Idea

モバイルアプリに導入したい機能のひとつで、虫メガネアイコンをクリックすると、検索ボックスが表示されます。

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.

 

 

 

Simple Flat Color Selector

色のHEX値やCMYK,RGBAなどお好みのカラーコードを、カラーパレットのクリックのみで行うことができます。

See the Pen Simple Flat Colour Selector (Clipboard, various formats) by Koya (@OfficialAntarctica) on CodePen.

 

 

Clip Mask Pricing Table

クリックすると波型リップル・エフェクトを適用した、シンプルな金額、プライスリストの作成にどうぞ。

See the Pen Clip Mask Pricing Table by Jessica Biggs (@bigglesrocks) on CodePen.

 

 

 

CSS Particle Buttons

ハートや星マークがキラキラと文字の周りで輝くCSSエフェクト。

See the Pen CSS Particle Effects by Koya (@OfficialAntarctica) on CodePen.

 

 

次のページでは、思わず押したくなるボタンや、SVGファイルの効果的な使い方などを紹介します。

 

 

Fancy Button

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.

 

 

 

Blue Light Button

青白く光る文字テキストや、放射線上に広がるライティングが魅力的なホバーエフェクト。

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.

 

 

 

Borders on Hover without SVG

SVG ファイルを利用せずに、CSSのみでアニメーション付きのボーダーラインを演出します。

See the Pen Borders on hover without SVG by Adrian Crabtree (@imacrab) on CodePen.

 

 

 

Facebook Reactions

タイトルのままですが、Facebookでのリアクション機能を完全再現しています。

See the Pen Facebook Reactions (Mother’s day sneak peak) by Carlos Medina (@medinnna) on CodePen.

 

 

 

SVG Animated Icons

表示されるたびにユニークなアニメーションを追加した、SVG アイコン素材が揃っています。

See the Pen SVG Animated icons by kittons (@airnan) on CodePen.

 

 

 

SVG Stroke Animations

各フォント毎にアニメーションを設定することで、滑らかなストローク・アニメーションを表現しています。

See the Pen SVG Stroke Animation by Toshiyuki TAKAHASHI (@gau) on CodePen.

 

 

 

Animations!

こちらも波型SVGラインに、シンプルな@keyframesを利用して、マイクロインタラクションを追加します。

See the Pen Animations! by Varun Vachhar (@winkerVSbecks) on CodePen.

 

 

 

GSAP TweenMax Logo

アニメーションの滑らかさに定評のするプラグインを利用した、実践で参考にしたいスニペット。

See the Pen Logo by Marco Barría (@fixcl) on CodePen.

 

 

 

Before & After

写真加工を行ったときのビフォーとアフターを、マウスカーソルに反応するスライダーで適用できます。

See the Pen Before & After by Bryan Stoner (@mimoduo) on CodePen.

 

 

 

Pixel Particles

風景画を立体的な粒子状でとらえた、未来を感じるアート・デザイン作品のひとつ。ズームアップすると、すごいです。

See the Pen Pixel Particles by Szenia Zadvornykh (@zadvorsky) on CodePen.

 

 

 

Page Control Animation

ぬるりと動くモーフィング・アニメーションを採用した、CSSのみでスタイリングされたページ送りで、美しいグラデーション背景もポイント。

See the Pen Page control animations by Giuseppe Bandiera (@giuband) on CodePen.

 

 

 

CSS Loop 003

カラフルなドットが大小にサイズを変え点滅する、CSSで作成されたローディング・アニメーション。

See the Pen #cssloop 003 by Matteo Belfiore (@heartbox) on CodePen.

 

 

 

SVG Car Drift Loader

スポーツカーがドリフト走行している様子を、ローディング画面に活用しています。

See the Pen SVG Car Drift Loader by Chris Gannon (@chrisgannon) on CodePen.

 

 

 

iPhone 6 MockUP | Only CSS

CSSスタイリングのみで表現された、本物そっくりのiPhone 6。

See the Pen iPhone 6 mockup | CSS only by Håvard Brynjulfsen (@havardob) on CodePen.

 

 

 

SVG Animated Bucket Drum

各キーボードを入力することで、バケツをつかったドラムマシーンで遊びことができます。

See the Pen SVG Animated Bucket Drums by Spencer Putnam (@sgput) on CodePen.

 

 

 

CSS Wrestler

なんとCSSのスタイリングのみで作成されたアニメーションは、中毒性のあるコミカルな動きが素敵です。

See the Pen CSS Wrestler by Pavel (@drfisher) on CodePen.