jQueryのinvew.jsで横からフェードさせたい。

下記のテスト環境版だと動作確認できるのですが、本番用に移植するとなぜか動作せず、該当の要素が消えてしまいます。

本場用で動かしたい要素はsectionになります。
※参考にした記事：https://www.i-ryo.com/entry/2018/04/02/015103
詳しい方よろしくお願いいたします。

index.html
1
2<!--本番用-->
3
4 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
5 <script type="text/javascript" src="invew_js/jquery.inview.js"></script>
6
7
8<style type="text/css">
9section {
10transform: translate(50px,0);
11-webkit-transform: translate(50px,0);
12opacity: 0;
13}
14.side_anime {
15    transform: translate(0,0);
16    -webkit-transform: translate(0,0);
17    opacity: 1;
18}
19
20</style>
21<section>...
22<h2>...</h2>
23
24<h3>....</h3>
25
26</section>
27
28                      <script>
29
30  $(function() {
31
32                      $('section').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
33                        if (isInView) {
34                          $(this).addClass('side_anime');
35                        } else {
36                          $(this).removeClass('side_anime');
37                        }
38                      });
39
40
41                    });
42                      </script>
43
44

index.html
1
2<!--テスト環境-->
3<!DOCTYPE html>
4<html lang="ja" dir="ltr">
5<head>
6  <meta charset="utf-8">
7
8  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
9  <script type="text/javascript" src="invew_js/jquery.inview.js"></script>
10
11  <title>サンプル（JQueryのふわっとフェードイ風）</title>
12</head>
13<body>
14
15  <style type="text/css">
16    h1, p {
17    text-align: center;
18  }
19
20  .scroll {
21    width: 100%;
22    max-width: 600px;
23    margin: 0 auto;
24    padding: 0;
25  }
26
27  .scroll li {
28    list-style: none;
29    transition: 0.5s;
30    margin: 0 0 50px;
31  }
32
33  .scroll img {
34    width: 100%;
35    margin: 10px 0 0 ;
36  }
37
38  .scroll figcaption {
39    text-align: center;
40  }
41
42  .scroll .fade_in {
43    opacity: 0;
44  }
45
46  .scroll .fade_in_anime {
47    opacity: 1;
48  }
49
50  .scroll .up {
51    transform: translate(0,50px);
52    -webkit-transform: translate(0,50px);
53    opacity: 0;
54  }
55
56  .scroll .up_anime {
57    transform: translate(0,0);
58    -webkit-transform: translate(0,0);
59    opacity: 1;
60  }
61
62  .scroll .side {
63    transform: translate(50px,0);
64    -webkit-transform: translate(50px,0);
65    opacity: 0;
66  }
67
68  .scroll .side_anime {
69    transform: translate(0,0);
70    -webkit-transform: translate(0,0);
71    opacity: 1;
72  }
73</style>
74
75  <h1>スクロールテスト</h1>
76<p>スクロールしてください<br>
77  スクロールしてください<br>
78  スクロールしてください<br>
79  スクロールしてください<br>
80  スクロールしてください<br>
81  スクロールしてください<br>
82  スクロールしてください<br>
83  スクロールしてください<br>
84  スクロールしてください<br>
85  スクロールしてください<br>
86  スクロールしてください<br>
87  スクロールしてください<br>
88  スクロールしてください<br>
89  スクロールしてください<br>
90  スクロールしてください<br>
91</p>
92<ul class="scroll">
93  <li class="fade_in"><figure>
94    <figcaption>フェードイン</figcaption>
95    <img src="images/01.jpg">
96    </figure></li>
97
98  <li class="up"><figure>
99    <figcaption>上に移動</figcaption>
100    <img src="images/02.jpg">
101    </figure></li>
102
103  <li class="side"><figure>
104    <figcaption>横に移動</figcaption>
105    <img src="images/03.jpg">
106    </figure></li>
107<p>スクロールしてください<br>
108  スクロールしてください<br>
109  スクロールしてください<br>
110  スクロールしてください<br>
111  スクロールしてください<br>
112  スクロールしてください<br>
113  スクロールしてください<br>
114  スクロールしてください<br>
115  スクロールしてください<br>
116  スクロールしてください<br>
117  スクロールしてください<br>
118  スクロールしてください<br>
119  スクロールしてください<br>
120  スクロールしてください<br>
121  スクロールしてください<br>
122  </p>
123</ul>
124
125
126   <script type="text/javascript">
127//フェードイン
128$(function() {
129
130  $('.fade_in').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
131    if (isInView) {
132      $(this).addClass('fade_in_anime');
133    } else {     $(this).removeClass('fade_in_anime');
134    }
135  });
136
137    $('.up').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
138    if (isInView) {
139      $(this).addClass('up_anime');
140    } else {
141      $(this).removeClass('up_anime');
142    }
143  });
144
145    $('.side').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
146    if (isInView) {
147      $(this).addClass('side_anime');
148    } else {
149      $(this).removeClass('side_anime');
150    }
151  });
152
153
154});
155</script>
156
157</body>
158</html>
159

行動規範の内容に同意します

回答1件

ベストアンサー

jquery.inview.jsだと他のプラグインと被る要素があるのか上手くいかず、CSS3で実装しました。

下記のようにCSSでも色々バリエーションあるみたいです。

animation-name:fadein;/フェードイン/
animation-name: slide;/左右/
animation-name: bounce;/上下**/

section{
animation-name: fadein;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-iteration-count: 1;
}
@keyframes fadein {
from {
opacity: 0;
transform: translateX(-100px);
}
to {
opacity: 1;
transform: translateX(0);
}
}