Scrollaは上下スクロールしたときにアニメーションするjQueryプラグインです。スクロール時にただ表示させるのではなく、アニメーションを加えながら表示させることでユーザーへの印象も強まりそうですね。
Scrolla
Scrollaの詳細は以下になります。
ファイルをダウンロードすると実際のデモ動作もチェックすることができます。
デモでは上下にスクロールしていくことで、複数の正方形がフェードインとともにアニメーションつきで表示されます。バウンスしながら表示される動きがとてもおもしろいですね。
アニメーションさせたい要素のHTMLタグには、data属性を利用して細かい設定を指定することが可能です。たとえば、data-animateにはbounceInを指定したり、data-durationには1.0sを指定したりといった感じです。ほかにも、data-delayやdata-offsetといった項目が用意されています。
また、ダウンロードしたサンプルページはレスポンシブにも対応しています。ブラウザ幅を縮小・拡大してもそれにあわせて各正方形がサイズ調整されるので、いろんなデバイスでスクロール時のアニメーションを楽しめそうですね。
というわけで、スクロール時にアニメーションつきで表示させることができるjQueryプラグイン「Scrolla」のご紹介でした。
