Scrolla

JavaScript

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

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

Scrolla

Scrolla

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

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

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

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

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

Shave設定した高さに基づいて複数行のテキストを切り取る「Shave」前のページ

スクロールによるプログレスバーを表示できるjQueryプラグイン「PrognRoll」次のページPrognRoll

最近の記事

  1. SILENT HILL 2
  2. FUNLOGY スピーカー
  3. 聖剣伝説 VISIONS of MANA
  4. エルデの追憶
  5. コーヒー豆
PAGE TOP