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. ホワイトチョコマカダミアドーナツ
  2. エッグペペ
  3. ダークチョコレート
  4. 朝のコーヒー
  5. ザンビア
PAGE TOP