teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問より洗練された書き方　スクロールイベント

編集履歴

質問編集履歴

9

エラーを修正しました。

2016/12/11 08:26

投稿

up24
up24

スコア41

test CHANGED
File without changes
test CHANGED
@@ -64,47 +64,63 @@
64
64
 
65
65
  ```Javascript
66
66
 
67
-
68
-
69
67
  //上部のdiv
70
68
 
71
- $(function()){
69
+ $(function () {
72
70
 
73
- $(window).scroll(function(){
71
+ $(window).scroll(function () {
74
72
 
75
- function ImgLightFunc(){
73
+ function ImgLightFunc() {
76
74
 
77
- $('#divWrapp .mainImg).stop.animate({"opacity":"0.8"},{"duration":"1500"});
75
+ $('#divWrapp .mainImg').stop().animate({
78
76
 
79
- }
77
+ "opacity": "0.8"
80
78
 
81
- function ImgDarkFunc(){
79
+ }, {
82
80
 
83
- $('#divWrapp .mainImg).stop.animate({"opacity":"0"},{"duration":"1500"});
81
+ "duration": "1500"
84
82
 
83
+ });
84
+
85
- }
85
+ }
86
86
 
87
87
 
88
88
 
89
- var obj_t_pos = $('#divWrapp').offset().top;
89
+ function ImgDarkFunc() {
90
90
 
91
- var scr_count = $(document).scrollTop()+(window.innerHeight/2); //ディスプレイの半分の高さ
91
+ $('#divWrapp .mainImg').stop().animate({
92
+
93
+ "opacity": "0"
94
+
95
+ }, {
96
+
97
+ "duration": "1500"
98
+
99
+ });
100
+
101
+ }
92
102
 
93
103
 
94
104
 
95
- if(scr_count > obj_t_pos){
105
+ var obj_t_pos = $('#divWrapp').offset().top;
96
106
 
97
- ImgLightFunc();
107
+ var scr_count = $(document).scrollTop() + (window.innerHeight / 2); //ディスプレイの半分の高さ
98
-
99
- {
100
-
101
- ImgDarkFunc();
102
-
103
- }
104
108
 
105
109
 
106
110
 
111
+ if (scr_count > obj_t_pos) {
112
+
113
+ ImgLightFunc();
114
+
115
+ } else {
116
+
117
+ ImgDarkFunc();
118
+
119
+ }
120
+
121
+
122
+
107
- });
123
+ });
108
124
 
109
125
  });
110
126
 
@@ -114,46 +130,62 @@
114
130
 
115
131
  //下部のdiv
116
132
 
117
- $(function()){
133
+ $(function () {
118
134
 
119
- $(window).scroll(function(){
135
+ $(window).scroll(function () {
120
136
 
121
- function ImgLightFunc2(){
137
+ function ImgLightFunc2() {
122
138
 
123
- $('#divWrapp2 .mainImg).stop.animate({"opacity":"0.8"},{"duration":"1500"});
139
+ $('#divWrapp2 .mainImg').stop().animate({
124
140
 
125
- }
141
+ "opacity": "0.8"
126
142
 
127
- function ImgDarkFunc2(){
143
+ }, {
128
144
 
129
- $('#divWrapp2 .mainImg).stop.animate({"opacity":"0"},{"duration":"1500"});
145
+ "duration": "1500"
130
146
 
147
+ });
148
+
131
- }
149
+ };
132
150
 
133
151
 
134
152
 
135
- var obj_t_pos = $('#divWrapp2').offset().top;
153
+ function ImgDarkFunc2() {
136
154
 
137
- var scr_count = $(document).scrollTop()+(window.innerHeight/2); //ディスプレイの半分の高さ
155
+ $('#divWrapp2 .mainImg').stop().animate({
156
+
157
+ "opacity": "0"
158
+
159
+ }, {
160
+
161
+ "duration": "1500"
162
+
163
+ });
164
+
165
+ }
138
166
 
139
167
 
140
168
 
141
- if(scr_count > obj_t_pos){
169
+ var obj_t_pos = $('#divWrapp2').offset().top;
142
170
 
143
- ImgLightFunc2();
171
+ var scr_count = $(document).scrollTop() + (window.innerHeight / 2); //ディスプレイの半分の高さ
144
-
145
- {
146
-
147
- ImgDarkFunc2();
148
-
149
- }
150
172
 
151
173
 
152
174
 
175
+ if (scr_count > obj_t_pos) {
176
+
177
+ ImgLightFunc2();
178
+
179
+ } else {
180
+
181
+ ImgDarkFunc2();
182
+
183
+ }
184
+
185
+
186
+
153
- });
187
+ });
154
188
 
155
189
  });
156
190
 
157
-
158
-
159
191
  ```

8

質問文の余計な文言を削除。

2016/12/11 08:26

投稿

up24
up24

スコア41

test CHANGED
File without changes
test CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
 
8
8
 
9
- この時、下記のJavascriptについて
9
+ 下記のJavascriptについて
10
10
 
11
11
  もっと効率よくて簡単で洗練された書き方、
12
12
 

7

質問文の一部を入れ替えました。

2016/12/05 14:15

投稿

up24
up24

スコア41

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,18 @@
1
1
  初心者です。
2
2
 
3
3
  よろしくお願いします。
4
+
5
+
6
+
7
+
8
+
9
+ この時、下記のJavascriptについて
10
+
11
+ もっと効率よくて簡単で洗練された書き方、
12
+
13
+ プロならこう書くべきという
14
+
15
+ お手本を教えていただけませんでしょうか。
4
16
 
5
17
 
6
18
 
@@ -23,16 +35,6 @@
23
35
  暗い画像から明るい画像へとアニメーションして見えるようにしています。
24
36
 
25
37
  簡単なパララックス風のページの一部です。
26
-
27
-
28
-
29
-
30
-
31
- この時、下記のJavascriptについて
32
-
33
- もっと効率よくて簡単な、プロならこう書くべきという
34
-
35
- お手本を教えていただけませんでしょうか。
36
38
 
37
39
 
38
40
 

6

タイトルを変更しました。

2016/12/05 14:13

投稿

up24
up24

スコア41

test CHANGED
@@ -1 +1 @@
1
- プロな書き方
1
+ より洗練された書き方　スクロールイベント
test CHANGED
File without changes

5

カテゴリにHTMLを追加しました。

2016/12/05 14:10

投稿

up24
up24

スコア41

test CHANGED
File without changes
test CHANGED
File without changes

4

文字サイズがおかしかったので修正しました。

2016/12/05 14:07

投稿

up24
up24

スコア41

test CHANGED
File without changes
test CHANGED
@@ -12,11 +12,7 @@
12
12
 
13
13
  imgタグの画像（明るめの画像）はページ表示時は透明状態で、
14
14
 
15
- 背景の暗めの画像が表示されている状態です。
16
-
17
- #divWrapp2も同様です。
18
-
19
- #divWrapp、#divWrapp2がが縦に並んでいます。
15
+ 背景の暗めの画像が表示されている状態です。#divWrapp2も同様です。#divWrapp、#divWrapp2がが縦に並んでいます。
20
16
 
21
17
 
22
18
 

3

文章をわかりやすく補正しました。

2016/12/05 14:02

投稿

up24
up24

スコア41

test CHANGED
File without changes
test CHANGED
@@ -14,7 +14,9 @@
14
14
 
15
15
  背景の暗めの画像が表示されている状態です。
16
16
 
17
- それが縦に2個あります。
17
+ #divWrapp2も同様です。
18
+
19
+ #divWrapp、#divWrapp2がが縦に並んでいます。
18
20
 
19
21
 
20
22
 

2

#divWrapp、#divWrapp2と　大枠のdiv要素を2個にしました。誤字を修正しました。

2016/12/05 13:59

投稿

up24
up24

スコア41

test CHANGED
File without changes
test CHANGED
@@ -13,6 +13,8 @@
13
13
  imgタグの画像（明るめの画像）はページ表示時は透明状態で、
14
14
 
15
15
  背景の暗めの画像が表示されている状態です。
16
+
17
+ それが縦に2個あります。
16
18
 
17
19
 
18
20
 
@@ -34,7 +36,7 @@
34
36
 
35
37
  お手本を教えていただけませんでしょうか。
36
38
 
37
- また、
39
+
38
40
 
39
41
  よろしくお願いします。
40
42
 

1

divを2個にしました。上部のdivと下部のdivです。

2016/12/05 13:57

投稿

up24
up24

スコア41

test CHANGED
File without changes
test CHANGED
@@ -14,11 +14,17 @@
14
14
 
15
15
  背景の暗めの画像が表示されている状態です。
16
16
 
17
+
18
+
17
19
  ページをスクロールして、#divWrappが画面中央に来ると
18
20
 
19
21
  imgタグの画像（明るめの画像）の透明度が0.8になり、
20
22
 
21
23
  暗い画像から明るい画像へとアニメーションして見えるようにしています。
24
+
25
+ 簡単なパララックス風のページの一部です。
26
+
27
+
22
28
 
23
29
 
24
30
 
@@ -27,6 +33,8 @@
27
33
  もっと効率よくて簡単な、プロならこう書くべきという
28
34
 
29
35
  お手本を教えていただけませんでしょうか。
36
+
37
+ また、
30
38
 
31
39
  よろしくお願いします。
32
40
 
@@ -40,11 +48,23 @@
40
48
 
41
49
  </div>
42
50
 
51
+
52
+
53
+ <div id="divWrapp2">
54
+
55
+ <img src="" class="mainImg">
56
+
57
+ </div>
58
+
43
59
  ```
44
60
 
45
61
 
46
62
 
47
63
  ```Javascript
64
+
65
+
66
+
67
+ //上部のdiv
48
68
 
49
69
  $(function()){
50
70
 
@@ -86,4 +106,52 @@
86
106
 
87
107
  });
88
108
 
109
+
110
+
111
+
112
+
113
+ //下部のdiv
114
+
115
+ $(function()){
116
+
117
+ $(window).scroll(function(){
118
+
119
+ function ImgLightFunc2(){
120
+
121
+ $('#divWrapp2 .mainImg).stop.animate({"opacity":"0.8"},{"duration":"1500"});
122
+
123
+ }
124
+
125
+ function ImgDarkFunc2(){
126
+
127
+ $('#divWrapp2 .mainImg).stop.animate({"opacity":"0"},{"duration":"1500"});
128
+
129
+ }
130
+
131
+
132
+
133
+ var obj_t_pos = $('#divWrapp2').offset().top;
134
+
135
+ var scr_count = $(document).scrollTop()+(window.innerHeight/2); //ディスプレイの半分の高さ
136
+
137
+
138
+
139
+ if(scr_count > obj_t_pos){
140
+
141
+ ImgLightFunc2();
142
+
143
+ {
144
+
145
+ ImgDarkFunc2();
146
+
147
+ }
148
+
149
+
150
+
151
+ });
152
+
153
+ });
154
+
155
+
156
+
89
157
  ```