スクロール時にアニメーションするjQueryプラグイン「Scrolla」

Scrolla

Scrollaは上下スクロールしたときにアニメーションするjQueryプラグインです。スクロール時にただ表示させるのではなく、アニメーションを加えながら表示させることでユーザーへの印象も強まりそうですね。

Scrolla

Scrolla

ファイルをダウンロードすると実際のデモ動作もチェックすることができます。

デモでは上下にスクロールしていくことで、複数の正方形がフェードインとともにアニメーションつきで表示されます。バウンスしながら表示される動きがとてもおもしろいですね。

アニメーションさせたい要素のHTMLタグには、data属性を利用して細かい設定を指定することが可能です。たとえば、data-animateにはbounceInを指定したり、data-durationには1.0sを指定したりといった感じです。ほかにも、data-delayやdata-offsetといった項目が用意されています。

また、ダウンロードしたサンプルページはレスポンシブにも対応しています。ブラウザ幅を縮小・拡大してもそれにあわせて各正方形がサイズ調整されるので、いろんなデバイスでスクロール時のアニメーションを楽しめそうですね。

というわけで、スクロール時にアニメーションつきで表示させることができるjQueryプラグイン「Scrolla」のご紹介でした。

スポンサーリンク

スポンサーリンク

アクセスランキング

Tags

オススメ商品

Archives