質問編集履歴
3
行いたいプログラム、現在の状況の追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,8 +1,16 @@
|
|
|
1
1
|
現在jQueryを勉強しているものです。
|
|
2
|
+
ポートフォリオ作成にあたりふわっと表示するイベントを登録したいのですが、なかなかうまくいきません。
|
|
2
|
-
|
|
3
|
+
新しい白紙のサイトで導入するとうまくいき、ポートフォリオサイトへクラスやjsファイルなどをコピー&ペーストでうまくいきませんでした。
|
|
3
4
|
|
|
4
5
|
どなたか原因がわかる方はいらっしゃいますでしょうか？
|
|
5
6
|
|
|
7
|
+
<行いたいプログラム>
|
|
8
|
+
ページをロードした際.load-upクラスをだんだん表示させるようなjQueryのコードを書きたいです。
|
|
9
|
+
|
|
10
|
+
<現在の状況>
|
|
11
|
+
.load-upが表示されず、真っ白な状態です。
|
|
12
|
+
|
|
13
|
+
|
|
6
14
|
https://reirei0727x.lolitapunk.jp/02_Blog/
|
|
7
15
|
上記のサイトの.load-upクラスになります。
|
|
8
16
|
|
|
@@ -11,8 +19,6 @@
|
|
|
11
19
|
|
|
12
20
|
HTMLファイルです
|
|
13
21
|
```ここに言語を入力
|
|
14
|
-
<!DOCTYPE html>
|
|
15
|
-
<html lang="ja">
|
|
16
22
|
<head>
|
|
17
23
|
<meta charset="UTF-8">
|
|
18
24
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
2
コメントアウトの削除、マークダウンの修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -114,7 +114,7 @@
|
|
|
114
114
|
<p>Copyright - Rei, 2021 All Rights Reserved.</p>
|
|
115
115
|
</footer>
|
|
116
116
|
|
|
117
|
-
|
|
117
|
+
<script src="./js/script.js"></script>
|
|
118
118
|
|
|
119
119
|
</body>
|
|
120
120
|
</html>
|
|
@@ -440,7 +440,7 @@
|
|
|
440
440
|
}
|
|
441
441
|
```
|
|
442
442
|
|
|
443
|
-
|
|
443
|
+
```ここに言語を入力
|
|
444
444
|
$(function(){
|
|
445
445
|
var effect_pos = 300; // 画面下からどの位置でフェードさせるか(px)
|
|
446
446
|
var effect_move = 50; // どのぐらい要素を動かすか(px)
|
1
タイトル変更、コードの追加
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
jQueryふわっと表示
|
|
1
|
+
jQuery、ふわっと表示させたいが、うまく機能しない。
|
body
CHANGED
|
@@ -440,4 +440,37 @@
|
|
|
440
440
|
}
|
|
441
441
|
```
|
|
442
442
|
|
|
443
|
+
> ```ここに言語を入力
|
|
444
|
+
$(function(){
|
|
445
|
+
var effect_pos = 300; // 画面下からどの位置でフェードさせるか(px)
|
|
446
|
+
var effect_move = 50; // どのぐらい要素を動かすか(px)
|
|
447
|
+
var effect_time = 800; // エフェクトの時間(ms) 1秒なら1000
|
|
448
|
+
|
|
449
|
+
// フェードする前のcssを定義
|
|
450
|
+
$('.scroll-fade').css({
|
|
451
|
+
opacity: 0,
|
|
452
|
+
transform: 'translateY('+ effect_move +'px)',
|
|
453
|
+
transition: effect_time + 'ms'
|
|
454
|
+
});
|
|
455
|
+
|
|
456
|
+
// スクロールまたはロードするたびに実行
|
|
457
|
+
$(window).on('scroll load', function(){
|
|
458
|
+
var scroll_top = $(this).scrollTop();
|
|
459
|
+
var scroll_btm = scroll_top + $(this).height();
|
|
460
|
+
effect_pos = scroll_btm - effect_pos;
|
|
461
|
+
|
|
462
|
+
// effect_posがthis_posを超えたとき、エフェクトが発動
|
|
463
|
+
$('.scroll-fade').each( function() {
|
|
464
|
+
var this_pos = $(this).offset().top;
|
|
465
|
+
if ( effect_pos > this_pos ) {
|
|
466
|
+
$(this).css({
|
|
467
|
+
opacity: 1,
|
|
468
|
+
transform: 'translateY(0)'
|
|
469
|
+
});
|
|
470
|
+
}
|
|
471
|
+
});
|
|
472
|
+
});
|
|
473
|
+
});
|
|
474
|
+
```
|
|
475
|
+
|
|
443
476
|
以上どなたかなぜjQueryがうまく動かないのかご教授いただければ幸いです。
|