既に多くの方がご存知だとは思いますが、ちょっとしたエフェクトやアニメーションなどもわざわざJavaScriptを利用しなくとも実装できるようになったりと、CSSを利用して様々な見せ方や動きを実装できるようになりました。
そこで今回は主にCSSを利用してエフェクトやアニメーションを付けたいときに参考になりそうなのもので、且つ使用頻度が高そうなデモやテクニックをまとめてみました。
一部紹介しているものの中にはクラス付加などの動きについてJavaScriptを利用してはいますが、基本的な動きはいずれもCSSを用いて表現しているものになります。
image hover 63 effects
イメージにhoverするとキャプションが表示されるというエフェクトが多数まとめられています。
HTMLもシンプルでエフェクトはすべてCSSで実装されています。
Css3 Transform
rotate, scale, translateといった、CSSのtransformを利用した際にそれぞれどのような動きになるのかが一覧化されているものです。
未だにどのように記述するとどう動いたり変化するのかがピンとこないという人にわかりやすいと思います。
Animated dial buttons
クリックでサークル状に展開するナビゲーションを実装したもので、フル・ハーフ・右上・左下など全10パターンあります。
Pure CSS Header Menu
JavaScriptは使用せずに開閉のスイッチに<input type="checkbox">を、表示のアニメーションにはtransformとtransitionを使用する形でメニューを実装したものです。
Switcher styles collection
<input type="checkbox">と<label>を組み合わせて作成したスイッチスタイルをまとめているもので、動きも見た目もすべてCSSで表現しています。
Some More Inspiration for Text Input Effects | Codrops
フォーム入力時にラベルやフィールドに何かアニメーションを加えたいという時に参考になるエントリーで、シンプルな動きだけでなくちょっと遊び心あるような動きのものまで様々です。
Awesome input focus effects - Usingcss3
同じく入力フォームのフィールドフォーカス時に何かアニメーションを加えたいという時に参考になるエントリーで、こちらは全体的にシンプルなものになります。
Text input love
こちらもラベルやフィールドにアニメーションを加えたものです。
Modal Animations
animationやtransformを利用してモーダル表示のアニメーションを実装したものです。
Building Full Screen CSS3 Menus with Tons of Creative Demos | Scotch
transformやtransitionといったCSSを利用してメニュー表示アニメーションを実装するチュートリアルです。
classの追加・削除でJavaScriptを利用してはいますが、表示する際のエフェクトなどはCSSを使用しており、フリップ・パララックス・フルスクリーン・スケールなど全24種類です。
Inspiration for Button Styles and Effects | Codrops
ボタンのホバーエフェクトがまとめられており、シンプルなものから少し変わったものまで様々なエフェクトがあります。
サンプルもボタンの感じや背景カラーが異なるパターンで複数用意されているので、設置したいサイトでのイメージも浮かべやすいと思います。
Button Hover Effects
同じくボタンホバー時のエフェクトが全13種類あります。
Collection of Cool Button Hover Effects
一部ボタンと呼ぶべきか悩むものもありますが、こちらもホバー時のエフェクトがまとめられているデモで全11種類あります。
Inspiration for Line Menu Styles | Codrops
メニュー要素でのホバーエフェクトやカレント時のスタイルでラインアニメーションを利用しているサンプルが多数あります。
クールでカッコいいエフェクトが多くて、グローバルナビゲーションやタブメニュー部分などいろいろな場面で使えそうです。
Gradient Background Animation
アニメーションするグラデーション背景をCSSで実装してみたサンプルです。
SpinKit | Simple CSS Spinners
ローディング表示などで使用できるスピナーの動きをCSSで実装しているサンプルで全11種類あります。
全体的にHTMLもシンプルで、実装コードは各デモ上に表示されている「Source」をクリックすると確認できます。
Single Element CSS Spinners
同じくCSSを使って動きと見た目を表現したスピナーで、こちらは全8種類ですがHTMLはすべてdiv要素ひとつで実装されています。
Single Element Spinner
こちらもHTMLはdiv要素ひとつで、見た目や動きはCSSで表現されているシンプルなサークルタイプのスピナーです。
Loader a Day (day 17)
動きが特徴的なローディングアニメーションです。
Pure CSS - Simple Slider
JavaScriptは使用せずにHTMLとCSSだけでシンプルなスライダーを実装したものです。
切り替え用のバレットは<input type="radio">が使用されており、アニメーションは間接セレクタやtransformを用いて実装されています。
こういったものは探せば他にもまだまだ沢山出てきますが紹介しだすとキリがないとも思ったので、今回は全体的にサンプルやデモが複数あるものやまとまっているもので且つ使用頻度が高そうなホバーやフォーカス時の動きを中心に紹介してみました。
紹介しているものでCodePenで公開されているのはソースを見るだけでなくいじってみたりするのも容易ですし、その他もサンプル用ソースをダウンロードできるのがほとんどなので、自分でいろいろといじったりしてみると勉強になったり、もっと面白いエフェクトやアニメーションを見つけられたりもできそうですね。
ちなみに、当ブログでも上で紹介してきたものと同じような主にCSSを利用してちょっとしたエフェクトやアニメーションを実装したサンプルを幾つか紹介しているので、興味ある方はこちらもご覧になってみてください。