CSSだけでOne page scrollなWebサイト

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>

via

[Pure CSS] One page scroll