【インタビュー】課題であった、UI改善やライターのモチベーションアップができました。―WingArc1st Inc.
最近の海外のおしゃサイトをみていると、「WEBサイト全体がなんだか滑らか」と感じることが多くあります。
例えばこんなサイトです。
この滑らかで気持ち良いスクロールを実現するには、以下のSmoothScrollAnimationsを使うと簡単です!
https://tympanus.net/Tutorials/SmoothScrollAnimations/
上記サイトに記載がある、Githubからファイル一式DLします。
ダウンロード→
私の場合、bodyの閉じタグ直前で読み込むのがポイントでした。
|
1 2 |
<script src="/js/imagesloaded.pkgd.min.js"></script> <script src="/js/demo.js"></script> |
demo.jsは名前を変えた方が良いかもですね。
|
1 2 3 4 5 6 7 |
<main> <div data-scroll> スムーススクロールさせたいコンテンツ </div> </main> |
<main>と<div data-scroll>で滑らかなスクロールを適用させたいコンテンツを囲みます。
ここまでで、スムーススクロールの動きは基本的に実装できているはずです。
cssは特に指定はいらないですが、サイトに合わせて調整してみてください。
実装してみたデモ
Miki Kohinata
就活時代、企業で働きたくないがゆえに将来独立することを決めエンジニアの道へ。IT企業で藤本と運命的に出会いKOHIMOTO設立。目指すのは人の心に寄り添えるエンジニア。人生のテーマソングはWeekend by 5lack。
INDEX
PICK UP
KOHIMOTOは実用的なWebサイトを追求するWeb制作会社です。
現場から最前線のWebトレンドやノウハウなどをお届けしていきます。
