質問編集履歴
3
行いたいプログラム、現在の状況の追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
現在jQueryを勉強しているものです。
|
|
2
2
|
|
|
3
|
+
ポートフォリオ作成にあたりふわっと表示するイベントを登録したいのですが、なかなかうまくいきません。
|
|
4
|
+
|
|
3
|
-
|
|
5
|
+
新しい白紙のサイトで導入するとうまくいき、ポートフォリオサイトへクラスやjsファイルなどをコピー&ペーストでうまくいきませんでした。
|
|
4
6
|
|
|
5
7
|
|
|
6
8
|
|
|
@@ -8,6 +10,20 @@
|
|
|
8
10
|
|
|
9
11
|
|
|
10
12
|
|
|
13
|
+
<行いたいプログラム>
|
|
14
|
+
|
|
15
|
+
ページをロードした際.load-upクラスをだんだん表示させるようなjQueryのコードを書きたいです。
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
<現在の状況>
|
|
20
|
+
|
|
21
|
+
.load-upが表示されず、真っ白な状態です。
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
11
27
|
https://reirei0727x.lolitapunk.jp/02_Blog/
|
|
12
28
|
|
|
13
29
|
上記のサイトの.load-upクラスになります。
|
|
@@ -24,10 +40,6 @@
|
|
|
24
40
|
|
|
25
41
|
```ここに言語を入力
|
|
26
42
|
|
|
27
|
-
<!DOCTYPE html>
|
|
28
|
-
|
|
29
|
-
<html lang="ja">
|
|
30
|
-
|
|
31
43
|
<head>
|
|
32
44
|
|
|
33
45
|
<meta charset="UTF-8">
|
2
コメントアウトの削除、マークダウンの修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -230,7 +230,7 @@
|
|
|
230
230
|
|
|
231
231
|
|
|
232
232
|
|
|
233
|
-
|
|
233
|
+
<script src="./js/script.js"></script>
|
|
234
234
|
|
|
235
235
|
|
|
236
236
|
|
|
@@ -882,7 +882,7 @@
|
|
|
882
882
|
|
|
883
883
|
|
|
884
884
|
|
|
885
|
-
|
|
885
|
+
```ここに言語を入力
|
|
886
886
|
|
|
887
887
|
$(function(){
|
|
888
888
|
|
1
タイトル変更、コードの追加
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
jQueryふわっと表示
|
|
1
|
+
jQuery、ふわっと表示させたいが、うまく機能しない。
|
test
CHANGED
|
@@ -882,4 +882,70 @@
|
|
|
882
882
|
|
|
883
883
|
|
|
884
884
|
|
|
885
|
+
> ```ここに言語を入力
|
|
886
|
+
|
|
887
|
+
$(function(){
|
|
888
|
+
|
|
889
|
+
var effect_pos = 300; // 画面下からどの位置でフェードさせるか(px)
|
|
890
|
+
|
|
891
|
+
var effect_move = 50; // どのぐらい要素を動かすか(px)
|
|
892
|
+
|
|
893
|
+
var effect_time = 800; // エフェクトの時間(ms) 1秒なら1000
|
|
894
|
+
|
|
895
|
+
|
|
896
|
+
|
|
897
|
+
// フェードする前のcssを定義
|
|
898
|
+
|
|
899
|
+
$('.scroll-fade').css({
|
|
900
|
+
|
|
901
|
+
opacity: 0,
|
|
902
|
+
|
|
903
|
+
transform: 'translateY('+ effect_move +'px)',
|
|
904
|
+
|
|
905
|
+
transition: effect_time + 'ms'
|
|
906
|
+
|
|
907
|
+
});
|
|
908
|
+
|
|
909
|
+
|
|
910
|
+
|
|
911
|
+
// スクロールまたはロードするたびに実行
|
|
912
|
+
|
|
913
|
+
$(window).on('scroll load', function(){
|
|
914
|
+
|
|
915
|
+
var scroll_top = $(this).scrollTop();
|
|
916
|
+
|
|
917
|
+
var scroll_btm = scroll_top + $(this).height();
|
|
918
|
+
|
|
919
|
+
effect_pos = scroll_btm - effect_pos;
|
|
920
|
+
|
|
921
|
+
|
|
922
|
+
|
|
923
|
+
// effect_posがthis_posを超えたとき、エフェクトが発動
|
|
924
|
+
|
|
925
|
+
$('.scroll-fade').each( function() {
|
|
926
|
+
|
|
927
|
+
var this_pos = $(this).offset().top;
|
|
928
|
+
|
|
929
|
+
if ( effect_pos > this_pos ) {
|
|
930
|
+
|
|
931
|
+
$(this).css({
|
|
932
|
+
|
|
933
|
+
opacity: 1,
|
|
934
|
+
|
|
935
|
+
transform: 'translateY(0)'
|
|
936
|
+
|
|
937
|
+
});
|
|
938
|
+
|
|
939
|
+
}
|
|
940
|
+
|
|
941
|
+
});
|
|
942
|
+
|
|
943
|
+
});
|
|
944
|
+
|
|
945
|
+
});
|
|
946
|
+
|
|
947
|
+
```
|
|
948
|
+
|
|
949
|
+
|
|
950
|
+
|
|
885
951
|
以上どなたかなぜjQueryがうまく動かないのかご教授いただければ幸いです。
|