【レスポンシブデザイン】アニメーションが動かない原因

シュウ

今回は【レスポンシブデザイン】アニメーションが動かない原因について

こんな方に読んでほしい

レスポンシブデザインを学び始めた方へ
PCのアニメーションが動くのに、スマホだけアニメーションが動かないで悩んでる方へ
今回は「アニメーションが動かない原因」について解説しております。

今回は、最近お仕事で起きたトラブルの内容を解決した記事になります。
解決には、お時間がかかりましたが至って簡単なことで一瞬で解決しました。

[記事の内容]

アニメーションが動かない原因について

今回のトラブルが起きた際の状況は以下のようになります。

トラブル解決前の状況

wow.jsを使用していました
WordPressでの作業をしていました
PCでは通常通りアニメーションは動いてました
複数のjsファイルを使用していました

wow.jsの設定について解説

【jQuery】wow.jsの使い方から設定の流れまで

wow.jsスクロール連動のアニメーションを実装!!の解説になります！

アニメーションが動くために試してみたこと

アニメーションが動くために試してみたことは以下になります。

解決案

wow.jsの記述の見直し、改善を試す
Wodpressの記述を見直し、改善を試す
複数のjsファイルを一旦削除しwow.jsのみにしてみる
CSSの記述を見直し、改善を試す

wow.jsの記述の見直し、改善を試す

<script src="js/wow.min.js" type="text/javascript"></script>
<script>
new WOW().init();
</script>

//Animate.cssのバージョンが4以降の場合の変更点↓
<script>
wow = new WOW(
    {
        animateClass:   'animaate__animated'
    }
)
wow.init();
</script>

wowを使用するさには、「animateClass」でクラス名を入力する必要があるようです。

Wodpressの記述を見直し、改善を試す

Wodpressの記述を見直し、改善を試す点ですが、よくあるのがミスが
以下になります。

// header.php
<?php wp_head(); ?>

// footer.php
<?php wp_footer(); ?>

上記の2点のコードを記述していない場合は、「js」、「プラグイン」が動かない原因になります。
今回は、記述忘れもなくしっかり記述しておりました。

複数のjsファイルを一旦削除しwow.jsのみにしてみる

次に、複数のjsファイルとCSSファイルを一旦削除してみましたが、それでもPCは動いてスマホは動きませんでした。
読みの形をCDNから参照してみました。

//animate.cssをCDNに変更↓
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

//wowをCDNに変更↓
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<script>
wow = new WOW(
    {
        animateClass:   'animaate__animated'
    }
)
wow.init();
</script>

上記のコードに変更してもやはりスマホだけ動きませんでした。

CSSの記述を見直し、改善を試す

最後にCSSの記述を見直す改善を行いました。

//変更前
<div class="box wow fadeInUp" data-wow-duration="2s">Example</div>

//変更後
<div class="box wow animate__animated animate__fadeInUp">Example</div>

上記のコードに変更してもやはりスマホだけ動きませんでした。
ですが、よくみて見るtスマホのファーストビューのアニメーションのみが動いてました。
スクロールしていくとアニメーションが作動せず、コンテンツ自体非表示になっている状態でした。

もしかすると、最初からアニメーションが動かない原因は「wow.js」と「Animate.css」が原因ではないとおもい、CSS全体を見直しました。
以下の点を修正したことにより無事にアニメーションが動きました。

html,body {
	一部省略
	overflow: hidden; /*--原因はoverflow　削除--*/
}

結論：スマホのみアニメーションが動かない原因は、「overflow hidden」でした。
overflow hiddenの記述があることでコンテンツ自体が非表示になっていたのかもしれません。
最初は、「wow.js」と「Animate.css」この2点を疑って調べていたので中々「overflow hidden」までたどり着くのに時間がかかりました。