質問編集履歴

2

タイトル変更

2017/11/28 11:03

投稿

narururu
narururu

スコア172

test CHANGED
@@ -1 +1 @@
1
- JQueryで画面スクロールをトリガーにアニメーションを実装したい
1
+ 画面を下にスクロールして文字fadeInさせたい
test CHANGED
File without changes

1

試したことを編集

2017/11/28 11:03

投稿

narururu
narururu

スコア172

test CHANGED
File without changes
test CHANGED
@@ -136,11 +136,17 @@
136
136
 
137
137
  ###試したこと
138
138
 
139
+ waypoints.jsとAnimate.cssを使用してチャレンジしました。
140
+
141
+ ・</body>直前に<script src="jquery.waypoints.min.js"></script>を挿入
142
+
143
+ ・headタグ内に<link rel="stylesheet" href="css/animate.css">を挿入
144
+
139
- 1枚目の画面のところまでスクロールした際に文章をfadeInさせるために、
145
+ ・「 class="animated fadeIn"」を追加
140
-
146
+
141
- 1枚目のキャプションのタグ「id="#cap"」を追加し、2枚目キャプションと分けました。
147
+ ・jsファイルに以コードを記述
142
-
143
- そして、JQueryでコーディングしました。しかし、よくわからない状態です。JQueryの公式サイトを見ているのですが、どれを使えばいいのか全然わからなくて。。。
148
+
149
+
144
150
 
145
151
 
146
152
 
@@ -158,7 +164,7 @@
158
164
 
159
165
  <img src="images/slide1.jpg" alt="slide1" width="100%">
160
166
 
161
- <div class="carousel-caption" id="cap">
167
+ <div class="carousel-caption" class="animated fadeIn">
162
168
 
163
169
  文章
164
170
 
@@ -198,35 +204,39 @@
198
204
 
199
205
  ```
200
206
 
201
- $(function(){
202
-
203
- $("#cap").html("hidden");
204
-
205
- $(window).scroll(function (){
207
+ $(document).ready(function() {
206
-
208
+
209
+
210
+
207
- $("#cap").(function(){
211
+ $(".animated").waypoint({
208
-
209
- var top = $(this).offset().top;
212
+
210
-
211
- var scroll = $(window).scrollTop();
213
+ handler: function(direction) {
212
-
214
+
215
+
216
+
213
- var windowHeight = $(window).height();
217
+ if (direction === "down") {
214
-
215
- (scroll > top - windowHeight + windowHeight/4){
218
+
216
-
219
+
220
+
217
- $("#cap",this).html("fadeIn" , 5000);
221
+ $(this.element).addClass("fadeIn");
218
-
222
+
223
+
224
+
219
- });
225
+ this.destroy();
220
226
 
221
227
  }
222
228
 
223
- });
229
+ },
230
+
231
+ offset: "30%"
224
232
 
225
233
  });
226
234
 
235
+ });
236
+
227
- ```
237
+ ```
228
-
238
+
229
- 上記で試したところ、カルーセルのキャプションは全て非表示なってしまいました。
239
+ 上記で試したところ、何も変化しませんでした。
230
240
 
231
241
  コーディングが間違っていると思うのですが、分かる方いらっしゃいましたら、アドバイスいただけますでしょうか。
232
242