Scrolla

JavaScript

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

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

Scrolla

Scrolla

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

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

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

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

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

関連記事

  1. Custom Carousel

    JavaScript

    カードスタイルのカルーセル・スライダー実装「Custom Carousel」

    Custom Carouselはカードスタイルによるシンプルなカルーセ…

  2. JavaScript

    シンプルで使いやすいベーシックなスライドショーを実装できるjQueryプラグイン「Basic jQu…

    jQueryスライダーのネタが多いですが、今日もまたスライダーのプラグ…

  3. TV Credits

    JavaScript

    垂直・水平方向に滑らかに流れていくティッカーを実装できるjQueryプラグイン「TV Credits…

    TV Creditsは垂直方向や水平方向に流れていくティッカーを実装す…

  4. no-image

    JavaScript

    シンプルでカスタマイズもしやすいタブパネル実装「jquery-tab」

    jquery-tabはシンプルなタブパネルを実装することができるjQu…

  5. FancySelect

    JavaScript

    セレクトメニューをスタイリッシュに実装できるjQueryプラグイン「FancySelect」

    セレクトメニューをシンプルでスタイリッシュに実装することができるjQu…

最近の記事

  1. cheero USB-C PD Charger 60W
  2. DY-S01
  3. OWL-QI10W04
  4. BQ-CC87L

アーカイブ

PAGE TOP