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. FlexNav

    JavaScript

    見た目もシンプルでレスポンシブ対応のナビゲーションメニューを実装できるjQueryプラグイン「Fle…

    シンプルなデザインでレスポンシブにも対応したナビゲーションメニューを実…

  2. jCalculator

    JavaScript

    jQueryプラグインで電卓を実装できる「jCalculator」

    jCalculatorというjQueryプラグインを使えば入力フィール…

  3. JQuery Clock

    JavaScript

    シンプルなアナログ時計を実装できる「JQuery Clock」

    JQuery Clockはシンプルなアナログ時計を実装できます。画像を…

  4. plainModal

    JavaScript

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

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

  5. Sticky Elements

    JavaScript

    エレメントがくっついてくるアニメーション「Sticky Elements」

    Sticky Elementsはエレメントにカーソルを乗せるとくっつい…

  6. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryのeachと$.eachの簡単な使い方のメモ

    jQueryのeachと$.eachの使い方のメモです。あんまり深い知…

最近の記事

  1. プラスシェル シティ04 フォールディングカメラケース
  2. enerpad AC-27KS
  3. KMS-160

アーカイブ

PAGE TOP