1件のコメントセクションが上に重なるようなエフェクトを表示するStickyStack.jsを紹介します。1つ1つのセクションをレイヤーに見立てて、お洒落な感じにページトップで積み重なるエフェクトを表示させてくれます。どんな挙動なのか言葉だと伝わりにくいので、早速見てみましょう。下の方で簡単な実装方法と、設定が可能なオプション、そしてちょっとした遊び心で作ったデモも紹介してます。CodePen.はい、こんな感じのとってもお洒落な挙動になっています。jQueryプラグインなので実装はとても簡単です。boxShadowちょっと遊んだ結果:ロケット着陸?おわりに導入方法StickyStack.jsの導入方法をご紹介します。StickyStack.jsのダウンロード下記リンクからStickyStack.jsのダウンロードができます。迷ったら落ち着いて右側の方を上からじっくり見てください。ZIP」って書いてあるのが見つかると思います。Githubダウンロードしたら、お使いの環境にアップロードして呼び出しましょう。ちなみにStickyStack.jsはjQueryのプラグインなので、StickyStack.jsを呼び出す前にjQueryを呼び出している必要があります。今回はgoogleから公開されているソースを利用させてもらいました。HTMLとかjQueryの記述ちなみに今回、DOCTYPE宣言や<head>などの必要最低限の記述は端折っています。<section>要素</section></div>jQuerynの記述はわかりやすいかなーと思って別で記載しています。万が一呼び出し方がわからない人は<script>でhtmlファイルに直書きしてしまっても問題ありません。その際は上記で記述した<script>よりも後に記述してください。});})完成!これで、StickyStack.jsの設定は完成です!あとは各セクションのサイズなどを好きなようにcssで補完して、StickyStack.jsのお洒落な挙動を楽しんでください!ここからは各オプションと、僕のちょっとした暇つぶしの結果のご紹介になります。オプション各オプションの設定になります。言ってもStickyStack.jsで設定が可能なオプションで、デザイン面に影響するところはboxShadowくらいですので、正直面白みには掛けるかもしれません。適用させる要素を指定します。stackingElement見出しの通り、1セクションに該当する子要素設定します。区切ることも可能です。boxShadow1セクションの区切りは、それぞれがbox-shadowで設定されています。こちらの設定でbox-shadowの値を変えることで、好みの境界を作ることができます。遊んだ結果:ロケット着陸?背景全面にお洒落な画像をぶち込んでスライドさせるだけでカッコいい感じになってしまうStickyStack.js。ユーモアのある感じにならないかな。思って試行錯誤した結果がこれです。いいやって思ってます。CodePen.まあアイデアですが、これを使えば紙芝居とかはできますよね!そうなるとslideShareでやるわって話になりますが。おわりに背景全面にお洒落な画像をぶち込んでスライドさせるだけでカッコいい感じになってしまうStickyStack.js、いかがでしょうか。簡単に雰囲気カッコいいページを作りたいって時に、ぜひ使ってみてください。PMStickyStack.jsのご紹介ありがとうございました。こちらを参考に実装してみました。ところが、スクロールが長くなると、途中でワープしてしまって、全部を読み込まないんですよ。一回読み込むと、その次は全部スクロールできるのですが、最初の読み込みでは必ずエラーになります。エラーと出てくるので、同じお悩みの人も一定数いるようです。こちらの原因がお分かりでしたら、ぜひご教示いただきたく、お願い申し上げます。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。