2018年04月17日(火)

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

• 0
• 5
• 3
• 33

Result

See the Pen [Pure CSS] One page scroll by kachibito (@kachibito) on CodePen.

昔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-i...