1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【CSS】wow.jsが動かない時の対処法。CDNではなくファイルを直接読み込む

Posted at

アニメーションを設定するwow.jsを設定しても動かずハマったのでその対処法について。

症状

以下のように、animateをつけたクラスとwow単体では機能する。

html(動く)
class="animate__animated animate__zoomIn"
class="wow animate__animated animate__zoomIn"

wowでスクロールが差し掛かったタイミングで表示されるのと、animate.cssは機能している状態。

しかし、このクラス設定を、animateなしの、fadeInbounceInUpにすると動かなくなる、、

html(動かない)
class="wow bounceInUp"
class="wow fadeIn"

## 結論 animate.cssをCDNで読み込んでいたのがダメだった。 **wow.jsの公式githubでDLしたフォルダに入っている`animate.css`をローカルで読み込む**必要がある。

Download Zip(もしくはgit clone)
image.png

WOW/css/libs/animate.cssに入っている。

image.png

CDNではなく、このファイルを読み込むようにしたらちゃんと動いた。


## 感想 [wow.jsの公式ページ](https://wowjs.uk/docs.html)にいくと、[animate.css](https://animate.style/#best-practices)の公式ページに誘導され、そこにCDNでもいいって書いてあるのに、、紛らわしい、、

image.png

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?