Written by Kasumi

スクロール中、要素をふわっと出す。scrollrevealjs の使い方について【簡単便利】

スクロール中に要素をふわっと出現させたいのだけど、どうすれば良いかわからない。
JSで簡単に実装できる方法とかないの??

このような疑問に答えます!

本記事ではscrollrevealjsを使って、【要素をふわっと出す】簡単な方法について解説します。

scrollrevealjsを準備しよう

scrollrevealjs

下記、公式サイト様より、scrollrevealjsを入手しよう。
CDNもしくはjSファイルをダウンロードしてbody終了タグの前に読み込ませます。
https://scrollrevealjs.org/guide/hello-world.html

以下コードペンデモです。

See the Pen MWYgrzZ by Kohei (@kouk05) on CodePen.default

JSを読み込ませたら、上記コードペンのJSコードを参考に実行関数をscript内に記述したら完成!
内訳としてはsr.reveal内にふわっと出現させる要素のクラス名、その後、どのように出現させるかオプションを記述します。
※注意点として、上記の実行関数は、scrollrevealjsの後に記述してください。
各オプションの意味については下記公式サイト様を参照してください。
https://scrollrevealjs.org/api/delay.html
以上で解説を終わります。

目次

関連記事

JavaScript

JavaScriptで配列要素にある数値・文字列を加算。合計を取得する方法

2022.12.30
2004
JavaScript

scriptタグの読み込み・実行タイミングを変更する方法【defer / async属性を使おう】

2023.01.01
1936
JavaScript

【JavaScript】マウスホイールした時のスクロール量を表示する方法

2023.02.07
2838
JavaScript

【JavaScript】fetchメソッドを使ってJSONを非同期で読み込み・HTMLに出力する方法

2023.01.02
5023