Result
昔iPhone 5Sのプロダクト紹介ページにあったレイアウトを真似たスクリプト（One page scroll）をCSSだけで実装する、みたいなの。最近あんまり見かけませんので需要は少なそうですが。CSSスライダーと同じ方法で実装出来ます。
css
input[type='radio'] {/*ページスクロール用のボタン。input要素は非表示にしておく*/
display: none;
}
input[type='radio']#section1:checked ~ nav > label[for='section1'] {/*実際のボタン。チェックが入ったら背景色を変更*/
background-color: white;
}
/*以下、各セクションのスタイルセッティング*/
input[type='radio']#section1:checked ~ section:nth-of-type(1) {
z-index: 1;
top: 0;
transition: top 0.5s ease-in-out;
transition-delay: 0s;
}
input[type='radio']#section1:checked ~ .cover {
background-color: #eb9385;
}
input[type='radio']#section2:checked ~ nav > label[for='section2'] {
background-color: white;
}
input[type='radio']#section2:checked ~ section:nth-of-type(2) {
z-index: 1;
top: 0;
transition: top 0.5s ease-in-out;
transition-delay: 0s;
}
input[type='radio']#section2:checked ~ .cover {
background-color: #99c0bc;
}
input[type='radio']#section3:checked ~ nav > label[for='section3'] {
background-color: white;
}
input[type='radio']#section3:checked ~ section:nth-of-type(3) {
z-index: 1;
top: 0;
transition: top 0.5s ease-in-out;
transition-delay: 0s;
}
input[type='radio']#section3:checked ~ .cover {
background-color: #937782;
}
input[type='radio']#section4:checked ~ nav > label[for='section4'] {
background-color: white;
}
input[type='radio']#section4:checked ~ section:nth-of-type(4) {
z-index: 1;
top: 0;
transition: top 0.5s ease-in-out;
transition-delay: 0s;
}
input[type='radio']#section4:checked ~ .cover {
background-color: #2d4249;
}
.nav {/*スクロール用のボタンの親要素の配置。*/
position: fixed;
z-index: 2;
right: 30px;
top: 50%;
transform: translateY(-50%);
}
.nav__item {/*ボタンのスタイル*/
width: 12px;
height: 12px;
display: block;
margin: 12px auto;
border: solid 2px white;
border-radius: 50%;
cursor: pointer;
}
.nav__item:hover {/*ボタンのホバー時*/
background-color: white;
}
section {/*各セクション設定*/
height: 100%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 100%;
right: 0;
left: 0;
transition-delay: 0.5s;
}
/*各セクションのカラー設定*/
section:nth-of-type(1) {
background: #eb9385;
}
section:nth-of-type(2) {
background: #99c0bc;
}
section:nth-of-type(3) {
background: #937782;
}
section:nth-of-type(4) {
background: #2d4249;
}
.cover {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
}
html,
body {
height: 100%;
}
body {
overflow: hidden;
color: white;
}
html
<!-- input要素は非表示s--> <input type="radio" name="item" checked="checked" id="section1"/> <input type="radio" name="item" id="section2"/> <input type="radio" name="item" id="section3"/> <input type="radio" name="item" id="section4"/> <!-- 実際に表示されるボタン--> <nav class="nav"> <label class="nav__item" for="section1"></label> <label class="nav__item" for="section2"></label> <label class="nav__item" for="section3"></label> <label class="nav__item" for="section4"></label> </nav> <!-- 各セクション--> <section> <h1>foo</h1> </section> <section> <h1>bar</h1> </section> <section> <h1>hoge</h1> </section> <section> <h1>fuga</h1> </section> <div class="cover"></div>
