teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップCSS3に関する質問最近流行の表現の実現方法について

編集履歴

回答編集履歴

5

追記

2019/11/02 01:42

投稿

kyoya0819
kyoya0819

スコア10429

test CHANGED
@@ -341,3 +341,111 @@
341
341
 
342
342
 
343
343
  の部分ですがウィンドウサイズを引かないとウインドウの上まで要素が行かないとフェードインしなくなってしまいます。
344
+
345
+
346
+
347
+
348
+
349
+ ---
350
+
351
+
352
+
353
+ 暇な時間があったので作ってみました。
354
+
355
+ ```HTML
356
+
357
+ <div id=box1>
358
+
359
+ hogehoge~
360
+
361
+ </div>
362
+
363
+ <div id=box2>
364
+
365
+ hogehoge~
366
+
367
+ </div>
368
+
369
+ <div id=box3>
370
+
371
+ hohohoho~
372
+
373
+ </div>
374
+
375
+ <div id=box4>
376
+
377
+ hogehoge
378
+
379
+ </div>
380
+
381
+ ```
382
+
383
+ ```CSS
384
+
385
+ * {
386
+
387
+ margin: 0;
388
+
389
+ padding: 0
390
+
391
+ }
392
+
393
+ div {
394
+
395
+ height: 400px;
396
+
397
+ opacity: 0
398
+
399
+ }
400
+
401
+ #box1{
402
+
403
+ background: blue
404
+
405
+ }
406
+
407
+ #box2{
408
+
409
+ background: yellow
410
+
411
+ }
412
+
413
+ #box3{
414
+
415
+ background: green
416
+
417
+ }
418
+
419
+ #box4{
420
+
421
+ background: brown
422
+
423
+ }
424
+
425
+ ```
426
+
427
+ ```jQuery
428
+
429
+ $(window).on('load scroll',function(){
430
+
431
+ var height = $(window).height();
432
+
433
+ var now = $(document).scrollTop();
434
+
435
+ for(i=1;i<=4;i++){
436
+
437
+ var element = $('#box'+i);
438
+
439
+ var footer = element.offset().top - height;
440
+
441
+ if(now>footer){
442
+
443
+ element.animate({opacity:1.0},{duration:500,easing:'swing'});
444
+
445
+ }
446
+
447
+ }
448
+
449
+ });
450
+
451
+ ```

4

追記

2019/11/02 01:41

投稿

kyoya0819
kyoya0819

スコア10429

test CHANGED
@@ -20,6 +20,294 @@
20
20
 
21
21
 
22
22
 
23
+ ```HTMl
24
+
25
+
26
+
27
+ <header>
28
+
29
+ </header>
30
+
31
+
32
+
33
+ <div class="contents">
34
+
35
+
36
+
37
+ <p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
38
+
39
+ ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
40
+
41
+ ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
42
+
43
+ ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
44
+
45
+ ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
46
+
47
+ ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
48
+
49
+ ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
50
+
51
+ ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
52
+
53
+ ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
54
+
55
+ ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
56
+
57
+ ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
58
+
59
+ ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
60
+
61
+ ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
62
+
63
+ ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
64
+
65
+ ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
66
+
67
+ ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
68
+
69
+ ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
70
+
71
+ ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
72
+
73
+ ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
74
+
75
+ ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
76
+
77
+ ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
78
+
79
+ ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
80
+
81
+ ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
82
+
83
+ ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
84
+
85
+
86
+
87
+ <a href="#" class="topBtn" id="topBtn"><img src="img/pagetop.png" alt="ページトップ"></a>
88
+
89
+
90
+
91
+ <footer>
92
+
93
+ <div class="footer">
94
+
95
+ <ul class="clearfix">
96
+
97
+ <li>
98
+
99
+ <a href="#">sample</a>
100
+
101
+ </li>
102
+
103
+ <li>
104
+
105
+ <a href="#">sample</a>
106
+
107
+ </li>
108
+
109
+ <li>
110
+
111
+ <a href="#">sample</a>
112
+
113
+ </li>
114
+
115
+ <li>
116
+
117
+ <a href="#">sample</a>
118
+
119
+ </li>
120
+
121
+ <li>
122
+
123
+ <a href="#">sample</a>
124
+
125
+ </li>
126
+
127
+ <li>
128
+
129
+ <a href="#">sample</a>
130
+
131
+ </li>
132
+
133
+ <li>
134
+
135
+ <a href="#">sample</a>
136
+
137
+ </li>
138
+
139
+ <li>
140
+
141
+ <a href="#">sample</a>
142
+
143
+ </li>
144
+
145
+ <li>
146
+
147
+ <a href="#">sample</a>
148
+
149
+ </li>
150
+
151
+ <li>
152
+
153
+ <a href="#">sample</a>
154
+
155
+ </li>
156
+
157
+ <li>
158
+
159
+ <a href="#">sample</a>
160
+
161
+ </li>
162
+
163
+
164
+
165
+ </ul>
166
+
167
+ </div>
168
+
169
+ <!-- footer -->
170
+
171
+ </footer>
172
+
173
+
174
+
175
+ </div>
176
+
177
+
178
+
179
+ ```
180
+
181
+ ```CSs
182
+
183
+
184
+
185
+ body {
186
+
187
+ font-family: "Verdana", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo"," sans-serif";
188
+
189
+ color: #000;
190
+
191
+ background:#fff;
192
+
193
+ font-size:0.9em;
194
+
195
+ }
196
+
197
+
198
+
199
+ .contents{
200
+
201
+ max-width:950px;
202
+
203
+ background:#fff;
204
+
205
+ margin:0 auto;
206
+
207
+ line-height:140%;
208
+
209
+ position:relative;
210
+
211
+ }
212
+
213
+
214
+
215
+ /*フッター*/
216
+
217
+
218
+
219
+ .footer{
220
+
221
+ position: relative;
222
+
223
+ background:#960;
224
+
225
+ padding: 10px 0 20px 0;
226
+
227
+ overflow: hidden;
228
+
229
+ border-radius:10px;
230
+
231
+ -webkit-border-radius:10px;
232
+
233
+ -moz-border-radius:10px;
234
+
235
+ margin-top:25px;
236
+
237
+ height:30px;
238
+
239
+ }
240
+
241
+
242
+
243
+ .footer ul{
244
+
245
+ width: 90%;
246
+
247
+ margin:0 auto;
248
+
249
+ }
250
+
251
+
252
+
253
+ .footer li {
254
+
255
+ float: left;
256
+
257
+ width: 140px;
258
+
259
+ font-size: 11px;
260
+
261
+ text-align: left;
262
+
263
+ }
264
+
265
+
266
+
267
+ .footer li a{
268
+
269
+ color:#fff;
270
+
271
+ text-decoration:none;
272
+
273
+ }
274
+
275
+
276
+
277
+ .footer li a:before{
278
+
279
+ content:"□ ";
280
+
281
+ }
282
+
283
+
284
+
285
+
286
+
287
+ .topBtn {
288
+
289
+ position:fixed;
290
+
291
+ right:0px;
292
+
293
+ display:block;
294
+
295
+ }
296
+
297
+
298
+
299
+ #topBtn {
300
+
301
+ position: fixed;
302
+
303
+ bottom: 0;
304
+
305
+ display: none
306
+
307
+ }
308
+
309
+ ```
310
+
23
311
  ```jQuery
24
312
 
25
313
  $(window).scroll(function(){ //スクロールされたら関数実行

3

tuiik

2019/11/02 00:59

投稿

kyoya0819
kyoya0819

スコア10429

test CHANGED
@@ -42,7 +42,7 @@
42
42
 
43
43
  ```
44
44
 
45
- [サンプル](https://cdpn.io/asuchi0819/debug/bGGabBL/WPALYZNENdok)
45
+ [サンプル](https://cdpn.io/asuchi0819/debug/bGGabBL/wQMPozNqJBqk)
46
46
 
47
47
  簡単に解説入れときました。
48
48
 

2

追記

2019/11/02 00:56

投稿

kyoya0819
kyoya0819

スコア10429

test CHANGED
@@ -16,23 +16,25 @@
16
16
 
17
17
  表示領域外になったらフェードアウトすることができます。
18
18
 
19
+ （#topBtnはあらかじめ`display:none`してあるとする）
20
+
19
21
 
20
22
 
21
23
  ```jQuery
22
24
 
23
- $(window).scroll(function(){
25
+ $(window).scroll(function(){ //スクロールされたら関数実行
24
26
 
25
- var footer = $('footer').offset().top - $(window).height();
27
+ var footer = $('footer').offset().top - $(window).height(); //footerのページ上からの座標 - ウィンドウサイズ
26
28
 
27
- var now = $(document).scrollTop();
29
+ var now = $(document).scrollTop(); // ページ上からの現在位置
28
30
 
29
31
  if(now>footer){
30
32
 
31
- $('#topBtn').fadeIn('slow');
33
+ $('#topBtn').fadeIn('slow'); //フェードイン
32
34
 
33
35
  } else {
34
36
 
35
- $('#topBtn').fadeOut('slow');
37
+ $('#topBtn').fadeOut('slow'); //フェードアウト
36
38
 
37
39
  }
38
40
 
@@ -41,3 +43,13 @@
41
43
  ```
42
44
 
43
45
  [サンプル](https://cdpn.io/asuchi0819/debug/bGGabBL/WPALYZNENdok)
46
+
47
+ 簡単に解説入れときました。
48
+
49
+
50
+
51
+ > footerのページ上からの座標 - ウィンドウサイズ
52
+
53
+
54
+
55
+ の部分ですがウィンドウサイズを引かないとウインドウの上まで要素が行かないとフェードインしなくなってしまいます。

1

追記

2019/11/01 12:51

投稿

kyoya0819
kyoya0819

スコア10429

test CHANGED
@@ -3,3 +3,41 @@
3
3
 
4
4
 
5
5
  検索すればいくらでも見つかると思いますがほとんどはwindow.scrollで発火してoffsetで要素の位置を取得してscrollTopで表示領域の上の位置を取得して画面領域を引いてifでfadeInやらfadeOutやらを制御してます。
6
+
7
+
8
+
9
+ ---
10
+
11
+
12
+
13
+ 別の質問の使い回しですが以下のようなjQueryを書くことで
14
+
15
+ footerが表示領域に入ったら#topBtnをフェードイン
16
+
17
+ 表示領域外になったらフェードアウトすることができます。
18
+
19
+
20
+
21
+ ```jQuery
22
+
23
+ $(window).scroll(function(){
24
+
25
+ var footer = $('footer').offset().top - $(window).height();
26
+
27
+ var now = $(document).scrollTop();
28
+
29
+ if(now>footer){
30
+
31
+ $('#topBtn').fadeIn('slow');
32
+
33
+ } else {
34
+
35
+ $('#topBtn').fadeOut('slow');
36
+
37
+ }
38
+
39
+ });
40
+
41
+ ```
42
+
43
+ [サンプル](https://cdpn.io/asuchi0819/debug/bGGabBL/WPALYZNENdok)