[CSS]半透明のパネルが奥に吸い込まれる！一味違った縦長スクロールを実装するスタイルシートのテクニック
Post on:2016年6月30日
sponsors
コンテンツを半透明のパネルに配置し、スクロールすると、パネルが奥に吸い込まれていくのを実装するスタイルシートを紹介します。
HTMLはシンプルで、JavaScriptは不要です。
実際の動作は、下記でお楽しみください。
スペースが小さいので、デモページを開いて見た方が快適です。
※上部の「Debug」ボタンをクリックすると、どのような仕組みになっているか分かると思います。
実装
HTML
各パネルをdiv要素で実装し、それらを内包するラッパーを用意します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<div class="wrapper"> <div class="slides"> <div class="slide"> <div class="title">Pure CSS z-scrolling</div> </div> <div class="slide"> <div class="title">Slide 1</div> </div> <div class="slide"> <div class="title">Slide 2</div> </div> <div class="slide"> <div class="title">Slide 3</div> </div> <div class="slide"> <div class="title">Slide 4</div> </div> <div class="slide"> <div class="title">Slide 5</div> </div> </div> </div> |
CSS
パネルを3Dの軸に沿って変形させ、正位置に戻して、スクロールさせます。
「Debug」ボタンのクリックでこの仕組みが可視化されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
body { margin: 0; padding: 0; perspective: 400px; overflow: hidden; background: #252825; position: fixed; top: 0; left: 0; bottom: 99.99%; /* Should be `0` but Safari needs this! (BUG #1) */ right: 0; } .wrapper { transform-style: preserve-3d; position: absolute; top: 0; left: 0; bottom: 0; right: 0; transform: rotateX(40deg); } .slides { perspective: 313px; padding: 50px 0px; width: 100%; height: 400px; transform-style: preserve-3d; overflow: auto; transform: translate(-50%, -0%); position: fixed; top: 50%; left: 50%; } .slide { position: relative; margin: auto; width: 600px; height: 400px; transform: rotateX(-40deg); transform-origin: 0 0; box-shadow: inset 0 0 0 5px rgba(200,200,200,.25); } .title { color: #fff; font-size: 275%; position: absolute; left: 50%; top: 50%; white-space: nowrap; transform: translate(-50%, -50%); text-transform: uppercase; } /* colours ----------------------------------------- */ .slide:nth-child(1) { background: hsla(0, 70%, 50%, .75); } .slide:nth-child(2) { background: hsla(45, 70%, 50%, .75); } .slide:nth-child(3) { background: hsla(90, 70%, 50%, .75); } .slide:nth-child(4) { background: hsla(135, 70%, 50%, .75); } .slide:nth-child(5) { background: hsla(180, 70%, 50%, .75); } .slide:nth-child(6) { background: hsla(215, 70%, 50%, .75); } |
sponsors
