スクロールで1画面移動(スクロールスナップ)をコピペでやる方法

スクロールで1画面移動(スクロールスナップ)をコピペでやる方法

2982 回閲覧されました

みなさんこんにちは、エンジニアのjonioです。

毎日WEBサイトを見てデザインの引き出しを作ろうとしているのですが普通は画面をスクロールするとスクロールした分だけ画面が動くのですが1画面ごと動く場合があります。

スクロールスナップというのですがコピペでできてjQuer を使わない実装方法を解説します。

サイトを作る時はとにかくスピードが命なのでスパッと作れる様にしましょう。

デモは↓です。

それでは解説します。

 

コピペのコード

コードは↓になります。

 

ざっくりした解説

14行目と18行目でスクロールした時に1画面ずつ動く様になります。