自身のポートフォリオサイトで、ポートフォリオ作品の部分を、スクロールしたらふわっと表示されるアニメーションを取り入れたかったので、「ScroalReveal.js」を使って実装しようとしました。
ScroalReveal.jsとは
スクロールして要素が画面に表示されたら、指定したアニメーションを実行してくれるJavascriptライブラリです。
ふわっと要素を表示させたり、下から表示させたり、遅れて表示させたりなどを簡単に実装することができる優れものです。
ScroalReveal.jsの使い方
まずこちらの記事を参考に実装しました。
リンク先：ScrollReveal.jsを使ってスクロールしたらふわっと表示される動きを作ってみよう
1.ライブラリを読み込み
まず、ライブラリをscriptタグで読み込み。
<script src="https://unpkg.com/scrollreveal"></script>
2.アニメーションをつけたい要素にクラスを追加
アニメーションをつけたい要素に、私はrevealというクラスを追加しました。
3.Javascriptを読み込み
ScrollReveal().reveal('.reveal');
クラスの部分を自分がアニメーションをつけたい要素のクラスにします。
動かない。
参考記事のとおりやったのですが、まったく動かないので原因を調べまくったところ
こちらの記事を見つけました。
リンク先：ScrollReveal.jsを使えば「スクロール後に要素がふわっと浮き上がる」動きを最も少ない記述量で実装できる
ライブラリ読み込みの部分で、
bodyタグの閉じタグ直前にコピペしましょう。
と記述があったので、自身のコードを確認したところ、headタグ内で読み込みさせていました。
こちらをbodyの閉じタグの前に配置をまず修正。
そして、
ScrollReveal().reveal('.box');
1.で読み込んだライブラリとbodyタグの閉じタグの間に、このコードをコピペ。
という記述がありました。
自分のコードでは、script.jsというJSのファイルを別で作って読み込みさせていたので、これをHTMLで下記に修正し、JSの方からは記述を削除。
<script src="https://unpkg.com/scrollreveal">
ScrollReveal().reveal('.reveal');
</script>
これで動くようになりました！！
オプションで動きを変更できる
<script src="https://unpkg.com/scrollreveal">
ScrollReveal().reveal('.reveal', {
duration: 1000, // アニメーションの完了にかかる時間
viewFactor: 0.2, // 0~1,どれくらい見えたら実行するか
reset: true // 何回もアニメーション表示するか
});
</script>
ほかにもいろいろオプションがあるので、
ScrollReveal.jsを使ってスクロールしたらふわっと表示される動きを作ってみよう
今後実装で使用する際は、こちらの記事を参考にさせていただきたいです。
まとめ
JSを読み込む記述の場所って重要なんだなと再認識しました。
とりあえずheadタグに突っ込んでしまうクセがあったので、これを機会になおしていきたいです。