進化が止まらない!CSS3アニメーションを簡単に利用できるスクリプトやスタイルシートのまとめ

スクロールをトリガーに要素をアニメーションで表示したり、ページを表示した時にちょっとしたエフェクトを加えたり、ボタンのホバー時に気持ちいいアニメーションを加えたり、CSS3のアニメーションを簡単に加えることができるリソースを紹介します。

サイトのキャプチャ

Story Box
Story Box -GitHub

スクロールをトリガーに54種類のアニメーションを簡単に実装できるjQueryのプラグイン。アニメーションは非常に軽快で、デモ:ユニークの派手なアニメーションでも快適です。

サイトのキャプチャ

ScrollMagic
ScrollMagic -GitHub

Appleのプロダクトページのように次々に要素を表示したり、簡単にパララックスを加えたり、特定の要素をスクロール時にピンで留めて表示したりなど、スクロール系のエフェクトは全部できてしまう感じです。
スマフォなどレスポンシブ対応はもちろん、水平スクロール、無限スクロール、div要素の内側のスクロールなどにも対応しています。
参考:ScrollMagicの使い方

サイトのキャプチャ

SuperScrollorama
SuperScrollorama -GitHub

パララックスをはじめ、フェードやスライド、トゥイーンなど、多種多様なアニメーションに対応。スクロール時のエフェクトをよりスムーズにしたスクリプト。
参考:SuperScrolloramaの使い方

サイトのキャプチャ

ScrollPath
ScrollPath -GitHub

パスに沿って要素をコントロールできるスクリプト。
まるで大きなキャンパスに要素が配置されたように面白いUXを提供できます。

サイトのキャプチャ

Animsition
Animsition -GitHub

ページを表示する時に、スライド、フェード、回転、ぱたりなどのかっこいいアニメーションを加えることができます。WordPressのプラグインもあるので、簡単に組み込むことができます。
参考:Animsitionの使い方

サイトのキャプチャ

AnimateScroll
AnimateScroll -GitHub

ページ内スクロールで要素に向かって単に一定の速度でスクロールするだけでなく、加速やバウンド、ちょっと通り過ぎて戻ったりといった30種類以上のアニメーションのエフェクトをサポートしたjQueryのプラグイン。
参考:AnimateScrollの使い方

サイトのキャプチャ

Hover.css
Hover.css -GitHub

先月バージョンアップしたばかりのHover.css。classを付与するだけでさまざまなアニメーションを実装できます。また、多くのスクリプトやフレームワークにも採用されています。
参考:Hover.cssの使い方

サイトのキャプチャ

Animate.css
Animate.css -GitHub

こちらもclassを付与するだけでアニメーションが利用できるスタイルシート。フェードイン、フェードアウト、バウンド、シェイク、回転などのアニメーションを簡単に利用できます。
参考:Animate.cssの使い方

サイトのキャプチャ

Animatable
Animatable -GitHub

CSSのプロパティ一つに対して、値を二つ(開始と終了)変更し、さまざまなCSS3アニメーションの基本的な実装例を楽しめます。
参考:Animatableの使い方

サイトのキャプチャ

Effect.css
Effect.css -GitHub

CodropsやCSS-TricksやhakimelなどのCSSを使ったかっこいいエフェクトをまとめたもの。CSSのすご技が集まっています。

top of page

©2017 coliss