Stacked Strips

JavaScript

スタックしながらスクロールできるエフェクト実装「Stacked Strips」

Stacked StripsはWebページをスクロールする時に、スタックしていくようなエフェクトを実装することができるjQueryプラグインです。ページ内でコンテンツごとに分割したい時なんかに活用できますね。

Stacked Strips

デモ

デモでは横幅いっぱいに広がったダイナミックな背景画像に、画面中央にはテキストが表示されています。スクロールしていくとその画面に次の背景画像が重なり合って(スタッキングされて)いきます。

また、背景画像がすべて重なる少し前に、画面中央に表示されるテキストもアニメーションとともに表示されます。このように、スクロールするたびに次々とコンテンツがスタックされていくという仕組みです。

背景やテキストなど、スタックされるたびにガラッと印象が変わるのでとてもダイナミックな変化を体感できますね。

Stacked Stripsにはオプションもいくつか用意されており、strip_size、active_position、after_classという項目のセッティングが可能です。デフォルトの値は、strip_sizeが”full”、active_positionが50、after_classがfalseです。ちょっとしたカスタマイズをしたい人にはうれしいですね。

というわけで、スタックしながらスクロールしていくことができるエフェクトを実装したいという人は、ぜひStacked Stripsを活用されてみてはいかがでしょうか?

Stacked Strips

関連記事

  1. Sticky Slider Navigation(Responsive)
  2. jQuery Waterwheel Carousel

    JavaScript

    水平や垂直方向に配置できる水車のような便利なカルーセル「jQuery Waterwheel Caro…

    水平方向や垂直方向に配置できる水車のような便利なカルーセル「jQuer…

  3. plainModal

    JavaScript

    カスタマイズ性が高いシンプルなモーダルウィンドウのjQueryプラグイン「plainModal」

    plainModalはシンプルでカスタマイズ性が高いモーダルウィンドウ…

  4. JavaScript

    画像やHTML要素に簡単にドロップシャドウをつけられるjQueryプラグイン「pShadow」

    個人的にすごく便利で使う機会がありそなjQueryプラグインの紹介です…

  5. awNotices

    JavaScript

    スタート・ストップ機能がついたシンプルなjQueryニュースティッカー「awNotices」

    awNoticesはスタート・ストップ機能がついたシンプルに切り替わる…

  6. JavaScript

    シンプルでスタイリッシュなLightbox風のjQueryプラグイン「Featherlight」

    シンプルでスタイリッシュなデザインが特徴的なLightbox風のjQu…

最近の記事

  1. cheero Smart USB Charger 48W CHE-320
  2. ブエノカフェ CM-200

アーカイブ

PAGE TOP