HTML_CSS
Googleでログイン問題6：スクロールスナップを実装しよう
お洒落なサイトなどで実装されているスクロールスナップを実装してみましょう。
画像につきましては https://ninjacode.work/assets/img/kv.png こちらを使用して大丈夫です。
見本を動画を参考に作成してください。
画像につきましては https://ninjacode.work/assets/img/kv.png こちらを使用して大丈夫です。
見本を動画を参考に作成してください。
期待する画面
解答ソースコード
<div>
<section class="snap-area snap-area--red"></section>
<section class="snap-area snap-area--blue"></section>
<section class="snap-area snap-area--yellow"></section>
<section class="snap-area snap-area--green"></section>
<section class="snap-area snap-area--pink"></section>
</div>
¥HTML¥
div {
overflow: auto;
scroll-snap-type: y mandatory;
height: 100vh;
}
.snap-area {
position: relative;
scroll-snap-align: start;
height: 100vh;
}
.snap-area::before {
content: ";
display: inline-block;
width: 375px;
height: 200px;
background-size: cover;
background-repeat: no-repeat;
background-image: url(https://ninjacode.work/assets/img/kv.png);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.snap-area--red {
background-color: red;
}
.snap-area--blue {
background-color: blue;
}
.snap-area--yellow {
background-color: yellow;
}
.snap-area--green {
background-color: green;
}
.snap-area--pink {
background-color: pink;
}
¥CSS¥
補足
スナップスクロールを実装する場合、うまく機能させる為にoverflow: auto; と scroll-snap-type: y mandatory; は必ずセットで付与するように覚えておきましょう。
リスト要素は高さを100vhと指定することで、画面の高さいっぱいに要素が広がってくれます。
そこにscroll-snap-align: start;を付与することで、スナップスクロールが実現されます。
リスト要素は高さを100vhと指定することで、画面の高さいっぱいに要素が広がってくれます。
そこにscroll-snap-align: start;を付与することで、スナップスクロールが実現されます。
完了にする！
活動記録をTweetする
1.HTMLの宣言をしてみよう
overflow: auto; と scroll-snap-type: y mandatory; を付与します。
その際に横にスクロールさせたい場合は、scroll-snap-type: x mandatory; としましょう。
中に入ったリスト要素に対してheight: 100vhを付与し画像を浮かして真ん中にすれば出来上がりです。