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

multi.js検索機能がついたセレクトボックスを実装できる「multi.js」前のページ

Spotifyで曲と曲の境目をDJっぽくクロスフェードさせる設定方法次のページSpotifyでクロスフェードさせる設定方法

関連記事

  1. Ace Responsive Menu
  2. no-image

    JavaScript

    レスポンシブ対応でモバイルフレンドリーなjQueryデートピッカー・タイムピッカー「pickadat…

    pickadateはレスポンシブに対応したモバイルフレンドリーなデート…

  3. Bara-Bones-Slider

    JavaScript

    優れたカスタマイズ性を有するjQueryスライダー「Bara-Bones-Slider」

    Bara-Bones-Sliderは、優れたカスタマイズ性を有するイメ…

  4. JavaScript

    JavaScriptの配列操作をメモがてら整理してまとめてみる

    自分用のメモです。JavaScriptの配列操作に関するメソッドなんか…

  5. Liquid Slider

    JavaScript

    タブパネル式のレスポンシブなjQueryスライダー「Liquid Slider」

    ちょっと珍しそうなスライダーを見つけたのでご紹介します。タブパネルにも…

最近の記事

  1. VS-543AS
  2. タリーズ 本日のコーヒー
  3. MRW-G1
  4. 桜と太陽

アーカイブ

PAGE TOP