【StickyStack.js】おしゃれなスクロールを実装する

WEB制作
【StickyStack.js】おしゃれなスクロールを実装する

どうもこんにちは塚本です！

今日は “StickyStack.js” というプラグインを紹介します．
こちらは言葉で説明するのが難しいので，まずはデモを見てもらうとわかりやすいと思います.

学生時代にスタックのPush・Popの説明でこんな感じの図が出てきたのを思い出しました．
(情報系出身の方ならなんとなく分からないですか⁉)

あとサムネイル画像がなぜパンケーキかというと，これもスタックで連想されたからです(笑)

目次

Demo

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

スクロールすると下からニュルっと出てきて
積み重なるように上に固定されます．

特にスマホで見たときに親和性が高いのかな〜と思いました．

導入方法

GitHubからファイルをダウンロードして読み込ませて下さい．

 “wrap” の中の “content” 達が積み重なっていくように設定したいと思います.

・jQuery

$(function(){
    $('.wrap').stickyStack({
        containerElement: '.wrap',
        stackingElement: 'div',
    });
})

・HTML

<div class="wrap">
	<div class="content1"></div>
	<div class="content2"></div>
	<div class="content3"></div>
	<div class="content4"></div>
	<div class="content5"></div>
</div>

これだけでデモのようにつくることができます.

年末年始，暇を持て余す予定の方はStickyStack.jsを使用してPowerPointのプレゼンをWebで再現してみてください！