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

編集履歴

質問編集履歴

6

修正

2020/02/09 01:41

投稿

machaking
machaking

スコア46

title CHANGED
File without changes
body CHANGED
@@ -8,14 +8,14 @@
8
8
  <div class="pic">
9
9
  <div class="ex">
10
10
  　 <a href="img/season/a.jpg"><img src="img/link/a.jpg" alt="" width="90%"></a>
11
- <p class="pagetitle">New year</p>
11
+ <p class="pagetitle">a</p>
12
12
  <p class="content"></p>
13
13
  </div>
14
14
  </div>
15
15
  <div class="pic">
16
16
  <div class="ex">
17
17
  <a href="img/season/b.jpg"><img src="img/link/b.jpg" alt="" width="90%"></a>
18
- <p class="pagetitle">Prayer</p>
18
+ <p class="pagetitle">b</p>
19
19
  <p class="content"></p>
20
20
  </div>
21
21
  </div>
@@ -25,14 +25,14 @@
25
25
  <div class="pic">
26
26
  <div class="ex">
27
27
  <a href="img/season/c.jpg"><img src="img/link/c.jpg" alt="" width="90%"></a>
28
- <p class="pagetitle">Congratulation</p>
28
+ <p class="pagetitle">c</p>
29
29
  <p class="content"></p>
30
30
  </div>
31
31
  </div>
32
32
  <div class="pic">
33
33
  <div class="ex">
34
34
  <a href="img/season/d.jpg"><img src="img/link/d.jpg" alt="" width="90%"></a>
35
- <p class="pagetitle">Page of Hina festival</p>
35
+ <p class="pagetitle">d</p>
36
36
  <p class="content"></p>
37
37
  </div>
38
38
  </div>

5

修正

2020/02/09 01:40

投稿

machaking
machaking

スコア46

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

4

修正

2020/02/09 01:39

投稿

machaking
machaking

スコア46

title CHANGED
File without changes
body CHANGED
@@ -7,43 +7,42 @@
7
7
 
8
8
  ### 発生している問題・エラーメッセージ
9
9
 
10
- ```
11
- HTML
10
+ ```HTML
12
- <div class="box scroll-fade">
11
+ <div class="box scroll-fade">
13
- <div class="pic">
12
+ <div class="pic">
14
- <div class="ex">
13
+ <div class="ex">
15
- 　　　<a href="img/season/a.jpg"><img src="img/link/a.jpg" alt="" width="90%"></a>
14
+ 　 <a href="img/season/a.jpg"><img src="img/link/a.jpg" alt="" width="90%"></a>
16
- <p class="pagetitle">New year</p>
15
+ <p class="pagetitle">New year</p>
17
- <p class="content"></p>
16
+ <p class="content"></p>
18
- </div>
19
17
  </div>
18
+ </div>
20
- <div class="pic">
19
+ <div class="pic">
21
- <div class="ex">
20
+ <div class="ex">
22
- <a href="img/season/b.jpg"><img src="img/link/b.jpg" alt="" width="90%"></a>
21
+ <a href="img/season/b.jpg"><img src="img/link/b.jpg" alt="" width="90%"></a>
23
- <p class="pagetitle">Prayer</p>
22
+ <p class="pagetitle">Prayer</p>
24
- <p class="content"></p>
23
+ <p class="content"></p>
25
- </div>
26
24
  </div>
27
25
  </div>
26
+ </div>
28
- <p></p>
27
+ <p></p>
29
- <div class="box scroll-fade">
28
+ <div class="box scroll-fade">
30
- <div class="pic">
29
+ <div class="pic">
31
- <div class="ex">
30
+ <div class="ex">
32
- <a href="img/season/c.jpg"><img src="img/link/c.jpg" alt="" width="90%"></a>
31
+ <a href="img/season/c.jpg"><img src="img/link/c.jpg" alt="" width="90%"></a>
33
- <p class="pagetitle">Congratulation</p>
32
+ <p class="pagetitle">Congratulation</p>
34
- <p class="content"></p>
33
+ <p class="content"></p>
35
- </div>
36
34
  </div>
35
+ </div>
37
- <div class="pic">
36
+ <div class="pic">
38
- <div class="ex">
37
+ <div class="ex">
39
- <a href="img/season/d.jpg"><img src="img/link/d.jpg" alt="" width="90%"></a>
38
+ <a href="img/season/d.jpg"><img src="img/link/d.jpg" alt="" width="90%"></a>
40
- <p class="pagetitle">Page of Hina festival</p>
39
+ <p class="pagetitle">Page of Hina festival</p>
41
- <p class="content"></p>
40
+ <p class="content"></p>
42
- </div>
43
41
  </div>
44
42
  </div>
45
-
43
+ </div>
44
+ ```
46
- CSS
45
+ ```CSS
47
46
  .pic {
48
47
  display: table-cell;
49
48
  text-align: center;
@@ -63,10 +62,10 @@
63
62
  .box {
64
63
  display: table;
65
64
  }
65
+ ```
66
66
 
67
67
 
68
-
69
- JS
68
+ ```Javascript
70
69
  $(function(){
71
70
  var effect_pos = 300; // 画面下からどの位置でフェードさせるか(px)
72
71
  var effect_move = 50; // どのぐらい要素を動かすか(px)
@@ -98,13 +97,4 @@
98
97
  });
99
98
  });
100
99
 
101
- ```
100
+ ```
102
-
103
- ```
104
-
105
- ### 試したこと
106
-
107
-
108
- ### 補足情報（FW/ツールのバージョンなど）
109
-
110
- ここにより詳細な情報を記載してください。

3

修正

2020/02/09 01:37

投稿

machaking
machaking

スコア46

title CHANGED
File without changes
body CHANGED
@@ -60,8 +60,12 @@
60
60
  background: white;
61
61
  }
62
62
 
63
+ .box {
64
+ display: table;
65
+ }
63
66
 
64
67
 
68
+
65
69
  JS
66
70
  $(function(){
67
71
  var effect_pos = 300; // 画面下からどの位置でフェードさせるか(px)

2

修正

2020/02/09 01:02

投稿

machaking
machaking

スコア46

title CHANGED
File without changes
body CHANGED
@@ -12,12 +12,14 @@
12
12
  <div class="box scroll-fade">
13
13
  <div class="pic">
14
14
  <div class="ex">
15
+ 　　　<a href="img/season/a.jpg"><img src="img/link/a.jpg" alt="" width="90%"></a>
15
16
  <p class="pagetitle">New year</p>
16
17
  <p class="content"></p>
17
18
  </div>
18
19
  </div>
19
20
  <div class="pic">
20
21
  <div class="ex">
22
+ <a href="img/season/b.jpg"><img src="img/link/b.jpg" alt="" width="90%"></a>
21
23
  <p class="pagetitle">Prayer</p>
22
24
  <p class="content"></p>
23
25
  </div>
@@ -27,12 +29,14 @@
27
29
  <div class="box scroll-fade">
28
30
  <div class="pic">
29
31
  <div class="ex">
32
+ <a href="img/season/c.jpg"><img src="img/link/c.jpg" alt="" width="90%"></a>
30
33
  <p class="pagetitle">Congratulation</p>
31
34
  <p class="content"></p>
32
35
  </div>
33
36
  </div>
34
37
  <div class="pic">
35
38
  <div class="ex">
39
+ <a href="img/season/d.jpg"><img src="img/link/d.jpg" alt="" width="90%"></a>
36
40
  <p class="pagetitle">Page of Hina festival</p>
37
41
  <p class="content"></p>
38
42
  </div>

1

書式改善

2020/02/09 00:59

投稿

machaking
machaking

スコア46

title CHANGED
File without changes
body CHANGED
@@ -8,11 +8,57 @@
8
8
  ### 発生している問題・エラーメッセージ
9
9
 
10
10
  ```
11
- ```
11
+ HTML
12
+ <div class="box scroll-fade">
13
+ <div class="pic">
14
+ <div class="ex">
15
+ <p class="pagetitle">New year</p>
16
+ <p class="content"></p>
17
+ </div>
18
+ </div>
19
+ <div class="pic">
20
+ <div class="ex">
21
+ <p class="pagetitle">Prayer</p>
22
+ <p class="content"></p>
23
+ </div>
24
+ </div>
25
+ </div>
26
+ <p></p>
27
+ <div class="box scroll-fade">
28
+ <div class="pic">
29
+ <div class="ex">
30
+ <p class="pagetitle">Congratulation</p>
31
+ <p class="content"></p>
32
+ </div>
33
+ </div>
34
+ <div class="pic">
35
+ <div class="ex">
36
+ <p class="pagetitle">Page of Hina festival</p>
37
+ <p class="content"></p>
38
+ </div>
39
+ </div>
40
+ </div>
12
41
 
42
+ CSS
43
+ .pic {
13
- ### 該当のソースコード
44
+ display: table-cell;
45
+ text-align: center;
46
+ }
14
47
 
15
- ```Jquery
48
+ .pic img {
49
+ width: 80%;
50
+ }
51
+
52
+ .ex {
53
+ width: 80%;
54
+ margin: -8px auto 100px;
55
+ height: 250px;
56
+ background: white;
57
+ }
58
+
59
+
60
+
61
+ JS
16
62
  $(function(){
17
63
  var effect_pos = 300; // 画面下からどの位置でフェードさせるか(px)
18
64
  var effect_move = 50; // どのぐらい要素を動かすか(px)
@@ -43,8 +89,11 @@
43
89
  });
44
90
  });
45
91
  });
92
+
46
93
  ```
47
94
 
95
+ ```
96
+
48
97
  ### 試したこと
49
98
 
50
99