Cabinets d'avocats Alcya conseil

CSS3で実装できるイケてるアニメーション チュートリアル20選


今回は CSS を使って実装可能なアニメーションを紹介していきます。
細かなアニメーションでも、配置などを工夫することで
もっとユーザーを囲い込むことができるでしょう。

 

Material Design Preloader

Material Design Preloader

Material Design Preloader

(勝手に Google の Inbox by Gmail の画像が使われてるけど、いいのだろうか…)

スクリーンショットではわかりづらいので、ぜひリンク先をご覧ください。
画面上部のバーの色がどんどん変わっていくデザインです。
サンプルでは無限にカラーが変わり続けますが、JavaScript などと併用すれば
「読み込み中」の意味をもたせて使うこともできるでしょう。

 

Creative Link Effects

Creative Link Effects

Creative Link Effects

文字( リンク )にマウスを持ってくると [ ] が表示されたりする
エフェクトなどがあります。ページを進めていくと、別なエフェクトが登場します。

 

Text Opening Sequence

Text Opening Sequence with CSS Animations

Text Opening Sequence with CSS Animations

これもスクリーンショットではわかりづらいですね。
このエフェクトはまるで映画のように文字を表示させるものです。
ティザーサイトなどで効果を発揮しそうですね。

 

Flipside

Flipside

Flipside

こちらは「Delete」をクリックすることで
オブジェクトが反転したようなエフェクトがかかります。
これらの動作を CSS で記述してしまうなんて…。

 

Pure CSS Modal Popup

Pure CSS Modal Popup

Pure CSS Modal Popup

こちらは先ほど紹介した Flipside とは少し違い、
画面中央のボタンをクリックすることで、
画面全体ポップアップが表示されるようになっています。

 

Just Some MoreButton Hover Effects

Just Some MoreButton Hover Effects

Just Some MoreButton Hover Effects

こちらは、様々なボタンのエフェクトを公開している Web ページになります。
「POSITION AWARE」などは Google のマテリアルデザインを
踏襲しているような形ですね。

 

WinShape Camps その1

WinShape Camps1

WinShape Camps

少し WinShape Camps のページに多数の工夫が見られていたので紹介します。
まずは1番最初に表示される部分。
画面いっぱいに表示された動画の上に重なるように表示されている
様々な色のエフェクト、綺麗です。

 

WinShape Camps その2

WinShape Camps 2

WinShape Camps

続いて2つ目。
メニュー項目をマウスオーバーしている時には色を変えて
それに関する画像を背景に。それ以外の時はトップと同じように
動画を背景で流しています。

 

WinShape Camps その3

WinShape Camps その3

WinShape Camps

ここもすごいかなと思います。
おそらく背景として動画をセットしており、
それを div などの要素を使用して分け、
色の加工を行うか否かを指定していると推測されます。

 

Dom Jacob

Dom Jacob

Dom Jacob

時間とともに色が変わるデザイン。
メニューバーとも連動しています。
メリハリのあるデザインです。

 

Takeshi Watamura

Takeshi Watamura

Takeshi Watamura

時間とともに背景色が変わっていくデザイン…。
と思いきや、文字色もゆっくりと変わっていますね。
リンクにマウスオーバーすると、リンク先の Web ページをプレビューできます。

 

Maka-Veli

Maka-Veli

Maka-Veli

あれ?アニメーションは?
このページのフッターや、ページ数を切り替えるためのバーに仕組まれています。
色の使い分けでこんなに変わるものなんですね。

 

NxWorld

NxWorld

NxWorld

CSS で実装可能なアニメーションが 20 種類も紹介されています。

 

Original Hover Effects

Original Hover Effects

Original Hover Effects

CSS のアニメーションを使った様々な
エフェクトが紹介されています。

 

Creative CSS3 Animation Menus

Creative CSS3 Animation Menus

Creative CSS3 Animation Menus

こちらは CSS 3 のアニメーションで実装できる
様々なタイプのメニューのサンプルが表示されています。

 

3 cool CSS3 image hover effects その1

3 cool CSS3 image hover effects

3 cool CSS3 image hover effects

1つ目のデモは画像が右上にスライドでずれて、
その後ろに隠れていたテキストを読むことができるデザインとなっています。

 

3 cool CSS3 image hover effects その2

3 cool CSS3 image hover effects 2

3 cool CSS3 image hover effects

2つ目は画像が下にスライドして、
バックにあるテキストが表示されるデザインです。
画像はスライド時に下部分が隠れる仕様です。

 

3 cool CSS3 image hover effects その3

3 cool CSS3 image hover effects 3

3 cool CSS3 image hover effects

3 cool CSS3 image hover effects 、最後のデザインは
画像がくるっと回るデザインです。これなら一切文字を使用しないので、
例えば多言語対応の Web サイトにはとてもいいかもしれません。

 

CSS GHOST BUTTONS

CSS GHOST BUTTONS

CSS GHOST BUTTONS

ゴーストボタン。それは Web サイトの背景とマッチしたボタンのことです。
この Web サイトでは、ゴーストボタンの欠点であった
「背景とマッチしすぎてボタンがわかりづらい」を改善しています。

 

Cabinets d’avocats Alcya conseil

Cabinets d'avocats Alcya conseil

Cabinets d’avocats Alcya conseil

各項目にマウスオーバーすると、その項目がくるくると回るという
とても可愛いデザインです。インパクトを与えるには
十分なものでしょう。

 

まとめ

さて、20個もの CSS のお手本となる Web サイトを紹介してきました。
自分の CSS のスキルアップもできたかなと思うので、
そこのあなたも一緒に頑張っていきましょう!

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Hello world! mlooking です!読み方は エムルッキング 。いろいろな情報を伝えられたらいいかなと思っています。

Next Articleピクトグラムアイコンがダウンロードし放題のサイトまとめ