スクロールしたら下からフワッと出て来るScrollReveal.js【コピペOK】

最近のサイトではスクロールするとフワッと下から出て来る動きが実装されているサイトが多いですよね！

そんな動きが簡単に実装できるのがScrollReveal.jsです。

昔色々調べたのですが、結局一番簡単なのがこれでした。

実際の動きがコレ↓

DEMO

実装コード(ScrollReveal.js)

1. <script src=”https://unpkg.com/scrollreveal”></script><!– ScrollReveal.jsの読み込み –>
2. <script>
3.     ScrollReveal().reveal(‘.scroll_bottom_up’, {
4.   duration: 1200, // アニメーションの完了までにかかる時間
5.   viewFactor: 0.15, // 0~1。どれくらい見えたら実行するか
6.   reset: false, // アニメーションを繰り返し表示するか
7.   origin: ‘bottom’, // どこから現れるか
8.   distance: ’50px’, // どれだけの距離移動するか
9. });
10. </script>

おまめ

ScrollReveal.jsを1行で読みこみ、簡単な記述をするだけでスクロールしたらフワッと出て来る動きを実装できます！

origin: ‘bottom’を以下に変えても使いやすいと思います。

origin: ‘right’　→右から

origin: ‘left’　→左から

実装コード(HTML＆CSS)

1. <div class=”scroll_bottom_up shikaku”></div>
2. <div class=”scroll_bottom_up shikaku”></div>
3. <div class=”scroll_bottom_up shikaku”></div>
4. <div class=”scroll_bottom_up shikaku”></div>
5. <div class=”scroll_bottom_up shikaku”></div>
6. <div class=”scroll_bottom_up shikaku”></div>
7. <style>
8.     .shikaku{
9.         margin-top: 10px;
10.         width: 200px;
11.         height: 200px;
12.         background-color: orange;
13.     }</style>

あとはHTMLで動きを付けたい要素に「class=”scroll_bottom_up”」をつければ動きが実装出来ちゃいます！（※上の記述で言えば）

おまめ

とってもカンタン！！

コピペOKです♪

こちらの記事を参考にさせて頂いてます。

https://liginc.co.jp/500530