MENU
CLOSE
ユーザビリティ Edit : 2019.11.25 Update : 2024.11.07

サイト全体を滑らかにスクロールさせる – SmoothScrollAnimations

最近の海外のおしゃサイトをみていると、「WEBサイト全体がなんだか滑らか」と感じることが多くあります。
例えばこんなサイトです。

この滑らかで気持ち良いスクロールを実現するには、以下のSmoothScrollAnimationsを使うと簡単です!
https://tympanus.net/Tutorials/SmoothScrollAnimations/

ソースDL

上記サイトに記載がある、Githubからファイル一式DLします。
ダウンロード→
 

各ファイルの読み込み

私の場合、bodyの閉じタグ直前で読み込むのがポイントでした。

demo.jsは名前を変えた方が良いかもですね。
 

HTML

<main>と<div data-scroll>で滑らかなスクロールを適用させたいコンテンツを囲みます。
ここまでで、スムーススクロールの動きは基本的に実装できているはずです。
 

CSS

cssは特に指定はいらないですが、サイトに合わせて調整してみてください。
実装してみたデモ

Miki Kohinata

大学時代、将来独立することを決めエンジニアの道へ。就職したIT企業で藤本と運命的に出会いKOHIMOTO設立。目指すのは人の心に寄り添えるエンジニア。人生のテーマソングはWeekend by 5lack。