【Illustrator・Ai】イラレの手書きクレヨン風の自作ブラシで、ひよこのキャラクターを作ってみた。
最近の海外のおしゃサイトをみていると、「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
