進化が止まらない！CSS3アニメーションを簡単に利用できるスクリプトやスタイルシートのまとめ
Post on:2015年2月6日
sponsors
スクロールをトリガーに要素をアニメーションで表示したり、ページを表示した時にちょっとしたエフェクトを加えたり、ボタンのホバー時に気持ちいいアニメーションを加えたり、CSS3のアニメーションを簡単に加えることができるリソースを紹介します。
スクロールをトリガーに54種類のアニメーションを簡単に実装できるjQueryのプラグイン。アニメーションは非常に軽快で、デモ：ユニークの派手なアニメーションでも快適です。
ScrollMagic
ScrollMagic -GitHub
Appleのプロダクトページのように次々に要素を表示したり、簡単にパララックスを加えたり、特定の要素をスクロール時にピンで留めて表示したりなど、スクロール系のエフェクトは全部できてしまう感じです。
スマフォなどレスポンシブ対応はもちろん、水平スクロール、無限スクロール、div要素の内側のスクロールなどにも対応しています。
参考：ScrollMagicの使い方
SuperScrollorama
SuperScrollorama -GitHub
パララックスをはじめ、フェードやスライド、トゥイーンなど、多種多様なアニメーションに対応。スクロール時のエフェクトをよりスムーズにしたスクリプト。
参考：SuperScrolloramaの使い方
パスに沿って要素をコントロールできるスクリプト。
まるで大きなキャンパスに要素が配置されたように面白いUXを提供できます。
ページを表示する時に、スライド、フェード、回転、ぱたりなどのかっこいいアニメーションを加えることができます。WordPressのプラグインもあるので、簡単に組み込むことができます。
参考：Animsitionの使い方
AnimateScroll
AnimateScroll -GitHub
ページ内スクロールで要素に向かって単に一定の速度でスクロールするだけでなく、加速やバウンド、ちょっと通り過ぎて戻ったりといった30種類以上のアニメーションのエフェクトをサポートしたjQueryのプラグイン。
参考：AnimateScrollの使い方
先月バージョンアップしたばかりのHover.css。classを付与するだけでさまざまなアニメーションを実装できます。また、多くのスクリプトやフレームワークにも採用されています。
参考：Hover.cssの使い方
Animate.css
Animate.css -GitHub
こちらもclassを付与するだけでアニメーションが利用できるスタイルシート。フェードイン、フェードアウト、バウンド、シェイク、回転などのアニメーションを簡単に利用できます。
参考：Animate.cssの使い方
CSSのプロパティ一つに対して、値を二つ（開始と終了）変更し、さまざまなCSS3アニメーションの基本的な実装例を楽しめます。
参考：Animatableの使い方
CodropsやCSS-TricksやhakimelなどのCSSを使ったかっこいいエフェクトをまとめたもの。CSSのすご技が集まっています。
sponsors
