teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問Jqueryでスクロールエフェクトが想定した動作をしない

編集履歴

質問編集履歴

6

修正

2020/02/09 01:41

投稿

machaking
machaking

スコア46

test CHANGED
File without changes
test CHANGED
@@ -18,7 +18,7 @@
18
18
 
19
19
  　 <a href="img/season/a.jpg"><img src="img/link/a.jpg" alt="" width="90%"></a>
20
20
 
21
- <p class="pagetitle">New year</p>
21
+ <p class="pagetitle">a</p>
22
22
 
23
23
  <p class="content"></p>
24
24
 
@@ -32,7 +32,7 @@
32
32
 
33
33
  <a href="img/season/b.jpg"><img src="img/link/b.jpg" alt="" width="90%"></a>
34
34
 
35
- <p class="pagetitle">Prayer</p>
35
+ <p class="pagetitle">b</p>
36
36
 
37
37
  <p class="content"></p>
38
38
 
@@ -52,7 +52,7 @@
52
52
 
53
53
  <a href="img/season/c.jpg"><img src="img/link/c.jpg" alt="" width="90%"></a>
54
54
 
55
- <p class="pagetitle">Congratulation</p>
55
+ <p class="pagetitle">c</p>
56
56
 
57
57
  <p class="content"></p>
58
58
 
@@ -66,7 +66,7 @@
66
66
 
67
67
  <a href="img/season/d.jpg"><img src="img/link/d.jpg" alt="" width="90%"></a>
68
68
 
69
- <p class="pagetitle">Page of Hina festival</p>
69
+ <p class="pagetitle">d</p>
70
70
 
71
71
  <p class="content"></p>
72
72
 

5

修正

2020/02/09 01:40

投稿

machaking
machaking

スコア46

test CHANGED
File without changes
test CHANGED
@@ -1,7 +1,3 @@
1
- ### 前提・実現したいこと
2
-
3
-
4
-
5
1
  下記のJqueryでスクロールエフェクトを複数要素に追加しようとしています。
6
2
 
7
3
  スクロールして一つ目の要素は問題なく動作するのですが2つ目以降はエフェクト開始位置がズレているのか
@@ -9,10 +5,6 @@
9
5
  だいぶ下の方までスクロールしないと動作しなくなってしまいます。（3つ目はもっと下まで要スクロール）
10
6
 
11
7
  ズレていることはわかるのですが何が原因でこうなっているのでしょうか？
12
-
13
-
14
-
15
- ### 発生している問題・エラーメッセージ
16
8
 
17
9
 
18
10
 

4

修正

2020/02/09 01:39

投稿

machaking
machaking

スコア46

test CHANGED
File without changes
test CHANGED
@@ -16,79 +16,77 @@
16
16
 
17
17
 
18
18
 
19
- ```
19
+ ```HTML
20
20
 
21
- HTML
21
+ <div class="box scroll-fade">
22
22
 
23
- <div class="box scroll-fade">
23
+ <div class="pic">
24
24
 
25
- <div class="pic">
25
+ <div class="ex">
26
26
 
27
- <div class="ex">
27
+ 　 <a href="img/season/a.jpg"><img src="img/link/a.jpg" alt="" width="90%"></a>
28
28
 
29
- 　　　<a href="img/season/a.jpg"><img src="img/link/a.jpg" alt="" width="90%"></a>
29
+ <p class="pagetitle">New year</p>
30
30
 
31
- <p class="pagetitle">New year</p>
32
-
33
- <p class="content"></p>
31
+ <p class="content"></p>
34
-
35
- </div>
36
-
37
- </div>
38
-
39
- <div class="pic">
40
-
41
- <div class="ex">
42
-
43
- <a href="img/season/b.jpg"><img src="img/link/b.jpg" alt="" width="90%"></a>
44
-
45
- <p class="pagetitle">Prayer</p>
46
-
47
- <p class="content"></p>
48
-
49
- </div>
50
32
 
51
33
  </div>
52
34
 
53
35
  </div>
54
36
 
55
- <p></p>
37
+ <div class="pic">
56
38
 
57
- <div class="box scroll-fade">
39
+ <div class="ex">
58
40
 
59
- <div class="pic">
41
+ <a href="img/season/b.jpg"><img src="img/link/b.jpg" alt="" width="90%"></a>
60
42
 
61
- <div class="ex">
43
+ <p class="pagetitle">Prayer</p>
62
44
 
63
- <a href="img/season/c.jpg"><img src="img/link/c.jpg" alt="" width="90%"></a>
64
-
65
- <p class="pagetitle">Congratulation</p>
66
-
67
- <p class="content"></p>
45
+ <p class="content"></p>
68
-
69
- </div>
70
-
71
- </div>
72
-
73
- <div class="pic">
74
-
75
- <div class="ex">
76
-
77
- <a href="img/season/d.jpg"><img src="img/link/d.jpg" alt="" width="90%"></a>
78
-
79
- <p class="pagetitle">Page of Hina festival</p>
80
-
81
- <p class="content"></p>
82
-
83
- </div>
84
46
 
85
47
  </div>
86
48
 
87
49
  </div>
88
50
 
51
+ </div>
89
52
 
53
+ <p></p>
90
54
 
55
+ <div class="box scroll-fade">
56
+
57
+ <div class="pic">
58
+
59
+ <div class="ex">
60
+
61
+ <a href="img/season/c.jpg"><img src="img/link/c.jpg" alt="" width="90%"></a>
62
+
63
+ <p class="pagetitle">Congratulation</p>
64
+
65
+ <p class="content"></p>
66
+
67
+ </div>
68
+
69
+ </div>
70
+
71
+ <div class="pic">
72
+
73
+ <div class="ex">
74
+
75
+ <a href="img/season/d.jpg"><img src="img/link/d.jpg" alt="" width="90%"></a>
76
+
77
+ <p class="pagetitle">Page of Hina festival</p>
78
+
79
+ <p class="content"></p>
80
+
81
+ </div>
82
+
83
+ </div>
84
+
85
+ </div>
86
+
87
+ ```
88
+
91
- CSS
89
+ ```CSS
92
90
 
93
91
  .pic {
94
92
 
@@ -128,13 +126,13 @@
128
126
 
129
127
  }
130
128
 
129
+ ```
131
130
 
132
131
 
133
132
 
134
133
 
135
134
 
136
-
137
- JS
135
+ ```Javascript
138
136
 
139
137
  $(function(){
140
138
 
@@ -199,21 +197,3 @@
199
197
 
200
198
 
201
199
  ```
202
-
203
-
204
-
205
- ```
206
-
207
-
208
-
209
- ### 試したこと
210
-
211
-
212
-
213
-
214
-
215
- ### 補足情報（FW/ツールのバージョンなど）
216
-
217
-
218
-
219
- ここにより詳細な情報を記載してください。

3

修正

2020/02/09 01:37

投稿

machaking
machaking

スコア46

test CHANGED
File without changes
test CHANGED
@@ -122,6 +122,14 @@
122
122
 
123
123
 
124
124
 
125
+ .box {
126
+
127
+ display: table;
128
+
129
+ }
130
+
131
+
132
+
125
133
 
126
134
 
127
135
 

2

修正

2020/02/09 01:02

投稿

machaking
machaking

スコア46

test CHANGED
File without changes
test CHANGED
@@ -26,6 +26,8 @@
26
26
 
27
27
  <div class="ex">
28
28
 
29
+ 　　　<a href="img/season/a.jpg"><img src="img/link/a.jpg" alt="" width="90%"></a>
30
+
29
31
  <p class="pagetitle">New year</p>
30
32
 
31
33
  <p class="content"></p>
@@ -38,6 +40,8 @@
38
40
 
39
41
  <div class="ex">
40
42
 
43
+ <a href="img/season/b.jpg"><img src="img/link/b.jpg" alt="" width="90%"></a>
44
+
41
45
  <p class="pagetitle">Prayer</p>
42
46
 
43
47
  <p class="content"></p>
@@ -56,6 +60,8 @@
56
60
 
57
61
  <div class="ex">
58
62
 
63
+ <a href="img/season/c.jpg"><img src="img/link/c.jpg" alt="" width="90%"></a>
64
+
59
65
  <p class="pagetitle">Congratulation</p>
60
66
 
61
67
  <p class="content"></p>
@@ -68,6 +74,8 @@
68
74
 
69
75
  <div class="ex">
70
76
 
77
+ <a href="img/season/d.jpg"><img src="img/link/d.jpg" alt="" width="90%"></a>
78
+
71
79
  <p class="pagetitle">Page of Hina festival</p>
72
80
 
73
81
  <p class="content"></p>

1

書式改善

2020/02/09 00:59

投稿

machaking
machaking

スコア46

test CHANGED
File without changes
test CHANGED
@@ -18,76 +18,174 @@
18
18
 
19
19
  ```
20
20
 
21
+ HTML
22
+
23
+ <div class="box scroll-fade">
24
+
25
+ <div class="pic">
26
+
27
+ <div class="ex">
28
+
29
+ <p class="pagetitle">New year</p>
30
+
31
+ <p class="content"></p>
32
+
33
+ </div>
34
+
35
+ </div>
36
+
37
+ <div class="pic">
38
+
39
+ <div class="ex">
40
+
41
+ <p class="pagetitle">Prayer</p>
42
+
43
+ <p class="content"></p>
44
+
45
+ </div>
46
+
47
+ </div>
48
+
49
+ </div>
50
+
51
+ <p></p>
52
+
53
+ <div class="box scroll-fade">
54
+
55
+ <div class="pic">
56
+
57
+ <div class="ex">
58
+
59
+ <p class="pagetitle">Congratulation</p>
60
+
61
+ <p class="content"></p>
62
+
63
+ </div>
64
+
65
+ </div>
66
+
67
+ <div class="pic">
68
+
69
+ <div class="ex">
70
+
71
+ <p class="pagetitle">Page of Hina festival</p>
72
+
73
+ <p class="content"></p>
74
+
75
+ </div>
76
+
77
+ </div>
78
+
79
+ </div>
80
+
81
+
82
+
83
+ CSS
84
+
85
+ .pic {
86
+
87
+ display: table-cell;
88
+
89
+ text-align: center;
90
+
91
+ }
92
+
93
+
94
+
95
+ .pic img {
96
+
97
+ width: 80%;
98
+
99
+ }
100
+
101
+
102
+
103
+ .ex {
104
+
105
+ width: 80%;
106
+
107
+ margin: -8px auto 100px;
108
+
109
+ height: 250px;
110
+
111
+ background: white;
112
+
113
+ }
114
+
115
+
116
+
117
+
118
+
119
+
120
+
121
+ JS
122
+
123
+ $(function(){
124
+
125
+ var effect_pos = 300; // 画面下からどの位置でフェードさせるか(px)
126
+
127
+ var effect_move = 50; // どのぐらい要素を動かすか(px)
128
+
129
+ var effect_time = 800; // エフェクトの時間(ms) 1秒なら1000
130
+
131
+
132
+
133
+ // フェードする前のcssを定義
134
+
135
+ $('.scroll-fade').css({
136
+
137
+ opacity: 0,
138
+
139
+ transform: 'translateY('+ effect_move +'px)',
140
+
141
+ transition: effect_time + 'ms'
142
+
143
+ });
144
+
145
+
146
+
147
+ // スクロールまたはロードするたびに実行
148
+
149
+ $(window).on('scroll load', function(){
150
+
151
+ var scroll_top = $(this).scrollTop();
152
+
153
+ var scroll_btm = scroll_top + $(this).height();
154
+
155
+ effect_pos = scroll_btm - effect_pos;
156
+
157
+
158
+
159
+ // effect_posがthis_posを超えたとき、エフェクトが発動
160
+
161
+ $('.scroll-fade').each( function() {
162
+
163
+ var this_pos = $(this).offset().top;
164
+
165
+ if ( effect_pos > this_pos ) {
166
+
167
+ $(this).css({
168
+
169
+ opacity: 1,
170
+
171
+ transform: 'translateY(0)'
172
+
173
+ });
174
+
175
+ }
176
+
177
+ });
178
+
179
+ });
180
+
181
+ });
182
+
183
+
184
+
21
185
  ```
22
186
 
23
187
 
24
188
 
25
- ### 該当のソースコード
26
-
27
-
28
-
29
- ```Jquery
30
-
31
- $(function(){
32
-
33
- var effect_pos = 300; // 画面下からどの位置でフェードさせるか(px)
34
-
35
- var effect_move = 50; // どのぐらい要素を動かすか(px)
36
-
37
- var effect_time = 800; // エフェクトの時間(ms) 1秒なら1000
38
-
39
-
40
-
41
- // フェードする前のcssを定義
42
-
43
- $('.scroll-fade').css({
44
-
45
- opacity: 0,
46
-
47
- transform: 'translateY('+ effect_move +'px)',
48
-
49
- transition: effect_time + 'ms'
50
-
51
- });
52
-
53
-
54
-
55
- // スクロールまたはロードするたびに実行
56
-
57
- $(window).on('scroll load', function(){
58
-
59
- var scroll_top = $(this).scrollTop();
60
-
61
- var scroll_btm = scroll_top + $(this).height();
62
-
63
- effect_pos = scroll_btm - effect_pos;
64
-
65
-
66
-
67
- // effect_posがthis_posを超えたとき、エフェクトが発動
68
-
69
- $('.scroll-fade').each( function() {
70
-
71
- var this_pos = $(this).offset().top;
72
-
73
- if ( effect_pos > this_pos ) {
74
-
75
- $(this).css({
76
-
77
- opacity: 1,
78
-
79
- transform: 'translateY(0)'
80
-
81
- });
82
-
83
- }
84
-
85
- });
86
-
87
- });
88
-
89
- });
90
-
91
189
  ```
92
190
 
93
191