ScrollReveal.jsを簡単に実装できるかと思っていたら、かなり詰まったので備忘録的に書いていきます。
目次
やりたかった事
このサイトを参考にScrollReveal.jsを自分で作成した静的htmlサイトで使用したかった。
現状
検証ツールで確認してみると、opacityが0になっていたりして、全く反応していない。
jsファイルはconsole.logとかで試してみると正しく読み込めていた。
試行錯誤
色々調べていると、jsファイルを読み込むリンクがおかしいのかもみたいなのが書いてあった。
slim版だと色々動かないのがあるらしい。自分はbootstrapのスターターキットを使っていたので、以下に変更した。
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js""></script>
以下に変更
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>上記でも解決しなかった。。。。
ここで謎が判明。自分で作っている他の静的htmlだとScrollReveal.jsが動く！！！
試しにscriptを動く方の記述にしてみる。動かない。なぜ。
しかもここで動くか試したところちゃんと動く！！！なぜかlocalだけ動いてくれない。
でも。。という事はjsの読み込みは関係なさそう。
なんかhtmlとcssで変なことしてるかも。。。。
解決
見つけた。html,bodyに変なの適用してた。
html, body{
overflow-x: hidden;
}これをコメントアウトしてあげると正しく動くようになった！！！！
いや〜、なんでこんなの付けてたんだろう？w
適当に書いていくと今回みたいにロスに繋がるので、ちゃんと書いていきたいですw
手順としては、js読み込まれてた->同じスクリプトでも他のhtmlサイトだと反映される->スクリプトは行けてそう。->じゃあ変なことどっかに書いてる？->書いてたぁぁ！
って感じでした。
めでたし。
以上！
