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

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ファイルの効果的な使い方などを紹介します。