cssとhtmlとパララックスと
とてもシンプルなものはHTMLとCSSだけで実装できるのでびっくり。 CSSすごいねー.
(デモ)https://obscure-cliffs-26990.herokuapp.com/
<!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <meta http-equiv='X-UA-Compatible' content='ie=edge'> <link rel='stylesheet' href='style.css'> <title>Document</title> </head> <body> <div class='container'> <section class="sec1 full-height"> <h3>1</h3> </section> <section class="sec2 full-height sticky"> <p>2</p> <div class='sticky-inner'> <p>★</p> </div> </section> <section class="sec3 full-height"> <h3>3</h3> </section> <section class="sec4 full-height sticky"> <p>4</p> <div class='sticky-inner'> <p>ぴ</p> </div> </section> <section class="sec1 full-height"> <p>5</p> <p>おしまい。</p> </section> </div><!-- container --> </body> </html>
.container { position: relative; } .full-height { width: 100%; height: 100vh !important; min-height: 90vh; /* これいる?? */ } .sec1 { background: #6088C6; } .sec2 { background: #AEC4E5; } .sec3 { background: #4072B3; } .sec4 { background: #EB8686; } .sticky { position: sticky; top: 0; z-index: -1; } .sticky-inner { font-size: 150px; position: absolute; top: calc(50% - 75px); left: calc(50% - 75px); } /* reset */ html, body { width: 100%; margin: 0; padding: 0; } div, p { margin: 0; padding: 0; }
ただ
position: sticky
がIE11未対応。そううまくは行かないねー。