【jQuery】セクションが上に重なるようなエフェクトを表示するStickyStack.js

セクションが上に重なるようなエフェクトを表示するStickyStack.jsを紹介します。

１つ１つのセクションをレイヤーに見立てて、お洒落な感じにページトップで積み重なるエフェクトを表示させてくれます。どんな挙動なのか言葉だと伝わりにくいので、早速見てみましょう。

下の方で簡単な実装方法と、設定が可能なオプション、そしてちょっとした遊び心で作ったデモも紹介してます。

See the Pen StickyStack.js by mike-zarandona (@mike-zarandona) on CodePen.

はい、こんな感じのとってもお洒落な挙動になっています。jQueryプラグインなので実装はとても簡単です。

この記事の目次

導入方法

StickyStack.jsの導入方法をご紹介します。

StickyStack.jsのダウンロード

下記リンクからStickyStack.jsのダウンロードができます。迷ったら落ち着いて右側の方を上からじっくり見てください。落ち着いてさえいれば「Download ZIP」って書いてあるのが見つかると思います。

StickyStack.js – Github

ダウンロードしたら、お使いの環境にアップロードして呼び出しましょう。ちなみにStickyStack.jsはjQueryのプラグインなので、StickyStack.jsを呼び出す前にjQueryを呼び出している必要があります。今回はgoogleから公開されているソースを利用させてもらいました。

HTMLとかjQueryの記述

ちなみに今回、DOCTYPE宣言や<head>などの必要最低限の記述は端折っています。

 title="html"]
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="jquery.stickystack.min.js"></script>
<div class="main-content-wrapper">
   <section>要素</section>
   <section>要素</section>
   <section>要素</section>
   <section>要素</section>
</div>

jQuerynの記述はわかりやすいかなーと思って別で記載しています。万が一呼び出し方がわからない人は<script>でhtmlファイルに直書きしてしまっても問題ありません。その際は上記で記述した<script>よりも後に記述してください。

 title="jQuery"]
$(function(){
    $('.main-content-wrapper').stickyStack({
        containerElement: '.main-content-wrapper',
        stackingElement: 'section',
        boxShadow: '0 -3px 20px rgba(0, 0, 0, 0.25)'
    });
})

完成！

これで、StickyStack.jsの設定は完成です！あとは各セクションのサイズなどを好きなようにcssで補完して、StickyStack.jsのお洒落な挙動を楽しんでください！ここからは各オプションと、僕のちょっとした暇つぶしの結果のご紹介になります。

オプション

各オプションの設定になります。とは言ってもStickyStack.jsで設定が可能なオプションで、デザイン面に影響するところはboxShadowくらいですので、正直面白みには掛けるかもしれません。

要素の対象設定 containerElement

containerElement に StickyStack.js を適用させる要素を指定します。

１セクションに該当する子要素設定 stackingElement

見出しの通り、１セクションに該当する子要素設定します。こちらの設定によっては <li> や <div> で区切ることも可能です。

１セクションの区切り設定 boxShadow

１セクションの区切りは、それぞれがbox-shadowで設定されています。こちらの設定でbox-shadowの値を変えることで、好みの境界を作ることができます。

ちょっと遊んだ結果：ロケット着陸？

背景全面にお洒落な画像をぶち込んでスライドさせるだけでカッコいい感じになってしまうStickyStack.js。どうにかちょっとユーモアのある感じにならないかな。と思って試行錯誤した結果がこれです。まあいいやって思ってます。

See the Pen [jQuery]スクロールすると一番上で重なるStickyStackを導入した３ by nkmrkisk (@rekid) on CodePen.

まあアイデアですが、これを使えば紙芝居とかはできますよね！そうなるとslideShareでやるわって話になりますが。。。

おわりに

背景全面にお洒落な画像をぶち込んでスライドさせるだけでカッコいい感じになってしまうStickyStack.js、いかがでしょうか。簡単に雰囲気カッコいいページを作りたいって時に、ぜひ使ってみてください。