質問編集履歴
2
タイトル変更
test
CHANGED
@@ -1 +1 @@
|
|
1
|
-
|
1
|
+
画面を下にスクロールして文字をfadeInさせたい
|
test
CHANGED
File without changes
|
1
試したことを編集
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
|
-
|
145
|
+
・「 class="animated fadeIn"」を追加
|
140
|
-
|
146
|
+
|
141
|
-
|
147
|
+
・jsファイルに以下のコードを記述
|
142
|
-
|
143
|
-
|
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"
|
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
|
-
|
207
|
+
$(document).ready(function() {
|
206
|
-
|
208
|
+
|
209
|
+
|
210
|
+
|
207
|
-
|
211
|
+
$(".animated").waypoint({
|
208
|
-
|
209
|
-
|
212
|
+
|
210
|
-
|
211
|
-
|
213
|
+
handler: function(direction) {
|
212
|
-
|
214
|
+
|
215
|
+
|
216
|
+
|
213
|
-
|
217
|
+
if (direction === "down") {
|
214
|
-
|
215
|
-
|
218
|
+
|
216
|
-
|
219
|
+
|
220
|
+
|
217
|
-
$(
|
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
|
|