teratail
回答率
85.36%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問スクロールして下方からフェードインするfooter要素の下方に一瞬出来る空白を消したい

編集履歴

質問編集履歴

4

コード修正

2019/11/06 21:06

投稿

tnk_fuku
tnk_fuku

スコア42

test CHANGED
File without changes
test CHANGED
@@ -12,7 +12,7 @@
12
12
 
13
13
  <header>
14
14
 
15
- <!-- 省略 -->
15
+ ヘッダー
16
16
 
17
17
  </header>
18
18
 
@@ -22,7 +22,7 @@
22
22
 
23
23
  <div class="arrow"></div>
24
24
 
25
- <p><!-- 省略 --></p>
25
+ <p>テキスト</p>
26
26
 
27
27
  </div>
28
28
 
@@ -34,13 +34,13 @@
34
34
 
35
35
  <ul class="footer_flex">
36
36
 
37
- <li><!-- 省略 --></li>
37
+ <li>リスト</li>
38
-
38
+
39
- <li><!-- 省略 --></li>
39
+ <li>リスト</li>
40
-
40
+
41
- <li><!-- 省略 --></li>
41
+ <li>リスト</li>
42
-
42
+
43
- <li><!-- 省略 --></li>
43
+ <li>リスト</li>
44
44
 
45
45
  </ul>
46
46
 
@@ -48,7 +48,159 @@
48
48
 
49
49
  </footer>
50
50
 
51
- <script>
51
+ </body>
52
+
53
+
54
+
55
+ ```
56
+
57
+
58
+
59
+ CSS
60
+
61
+ ```ここに言語を入力
62
+
63
+ body {
64
+
65
+ background-color: #000;
66
+
67
+ height: 100%;
68
+
69
+ color:#fff;
70
+
71
+ }
72
+
73
+ header {
74
+
75
+ height:1500px;
76
+
77
+ }
78
+
79
+ .wrap {
80
+
81
+ position: relative;
82
+
83
+ max-width: 1030px;
84
+
85
+ margin: 0 auto;
86
+
87
+ height: auto;
88
+
89
+ }
90
+
91
+ .welcome_section {
92
+
93
+ padding: 0 0 100px;
94
+
95
+ font-size: 2.5rem;
96
+
97
+ text-align: center;
98
+
99
+ }
100
+
101
+ .arrow {
102
+
103
+ position: relative;
104
+
105
+ }
106
+
107
+ .arrow::before {
108
+
109
+ content: "";
110
+
111
+ display: block;
112
+
113
+ position: absolute;
114
+
115
+ top: 0;
116
+
117
+ right: 50%;
118
+
119
+ width: 20px;
120
+
121
+ height: 20px;
122
+
123
+ border-top: 2px solid #fff;
124
+
125
+ border-right: 2px solid #fff;
126
+
127
+ transform: translateX(-50%) rotate(135deg);
128
+
129
+ }
130
+
131
+ .welcome_section p {
132
+
133
+ padding-top: 100px;
134
+
135
+ }
136
+
137
+
138
+
139
+ .footer_nav {
140
+
141
+ width: 100%;
142
+
143
+ height: 120px;
144
+
145
+ background-color: #fff;
146
+
147
+ }
148
+
149
+ .footer_nav ul li {
150
+
151
+ display: inline-block;
152
+
153
+ color: #000;
154
+
155
+ }
156
+
157
+ .footer_flex {
158
+
159
+ width: 80%;
160
+
161
+ padding: 40px 0;
162
+
163
+ margin-right: 10%;
164
+
165
+ margin-left: 10%;
166
+
167
+ flex-wrap: wrap;
168
+
169
+ justify-content: space-between;
170
+
171
+ }
172
+
173
+ .footer_flex li {
174
+
175
+ font-family: Arial,Raleway, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
176
+
177
+ width: 24%;
178
+
179
+ text-align: center;
180
+
181
+ font-size: 1.8rem;
182
+
183
+ padding: ;
184
+
185
+ }
186
+
187
+ .fadeInUp {
188
+
189
+ margin-bottom: -0.1px;
190
+
191
+ opacity: 0;
192
+
193
+ transform: translateY(80px);
194
+
195
+ transition: 1.5s;
196
+
197
+ }
198
+
199
+ ```
200
+
201
+ jQuery
202
+
203
+ ```
52
204
 
53
205
  $(function(){
54
206
 
@@ -84,152 +236,6 @@
84
236
 
85
237
  });
86
238
 
87
- </script>
88
-
89
- </body>
90
-
91
- ```
92
-
93
-
94
-
95
- CSS
96
-
97
- ```ここに言語を入力
98
-
99
- body {
100
-
101
- background-color: #000;
102
-
103
- height: 100%;
104
-
105
- }
106
-
107
- header {
108
-
109
- //省略
110
-
111
- }
112
-
113
- .wrap {
114
-
115
- position: relative;
116
-
117
- max-width: 1030px;
118
-
119
- margin: 0 auto;
120
-
121
- height: auto;
122
-
123
- }
124
-
125
- .welcome_section {
126
-
127
- padding: 0 0 100px;
128
-
129
- font-size: 2.5rem;
130
-
131
- text-align: center;
132
-
133
- }
134
-
135
- .arrow {
136
-
137
- position: relative;
138
-
139
- }
140
-
141
- .arrow::before {
142
-
143
- content: "";
144
-
145
- display: block;
146
-
147
- position: absolute;
148
-
149
- top: 0;
150
-
151
- right: 50%;
152
-
153
- width: 20px;
154
-
155
- height: 20px;
156
-
157
- border-top: 2px solid #fff;
158
-
159
- border-right: 2px solid #fff;
160
-
161
- transform: translateX(-50%) rotate(135deg);
162
-
163
- }
164
-
165
- .welcome_section p {
166
-
167
- padding-top: 100px;
168
-
169
- }
170
-
171
-
172
-
173
- .footer_nav {
174
-
175
- width: 100%;
176
-
177
- height: 120px;
178
-
179
- background-color: #fff;
180
-
181
- }
182
-
183
- .footer_nav ul li {
184
-
185
- display: inline-block;
186
-
187
- color: #000;
188
-
189
- }
190
-
191
- .footer_flex {
192
-
193
- width: 80%;
194
-
195
- padding: 40px 0;
196
-
197
- margin-right: 10%;
198
-
199
- margin-left: 10%;
200
-
201
- flex-wrap: wrap;
202
-
203
- justify-content: space-between;
204
-
205
- }
206
-
207
- .footer_flex li {
208
-
209
- font-family: Arial,Raleway, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
210
-
211
- width: 24%;
212
-
213
- text-align: center;
214
-
215
- font-size: 1.8rem;
216
-
217
- padding: ;
218
-
219
- }
220
-
221
- .fadeInUp {
222
-
223
- margin-bottom: -0.1px;
224
-
225
- opacity: 0;
226
-
227
- transform: translateY(80px);
228
-
229
- transition: 1.5s;
230
-
231
- }
232
-
233
239
  ```
234
240
 
235
241
 

3

コード修正

2019/11/06 21:06

投稿

tnk_fuku
tnk_fuku

スコア42

test CHANGED
File without changes
test CHANGED
@@ -8,8 +8,12 @@
8
8
 
9
9
  ```ここに言語を入力
10
10
 
11
+ <body>
12
+
11
13
  <header>
12
14
 
15
+ <!-- 省略 -->
16
+
13
17
  </header>
14
18
 
15
19
  <section class="welcome_section">
@@ -18,7 +22,7 @@
18
22
 
19
23
  <div class="arrow"></div>
20
24
 
21
- <p><!-- 文章が入る --></p>
25
+ <p><!-- 省略 --></p>
22
26
 
23
27
  </div>
24
28
 
@@ -30,13 +34,13 @@
30
34
 
31
35
  <ul class="footer_flex">
32
36
 
33
- <li><!-- テキストが入る --></li>
37
+ <li><!-- 省略 --></li>
34
-
38
+
35
- <li><!-- テキストが入る --></li>
39
+ <li><!-- 省略 --></li>
36
-
40
+
37
- <li><!-- テキストが入る --></li>
41
+ <li><!-- 省略 --></li>
38
-
42
+
39
- <li><!-- テキストが入る --></li>
43
+ <li><!-- 省略 --></li>
40
44
 
41
45
  </ul>
42
46
 
@@ -92,6 +96,20 @@
92
96
 
93
97
  ```ここに言語を入力
94
98
 
99
+ body {
100
+
101
+ background-color: #000;
102
+
103
+ height: 100%;
104
+
105
+ }
106
+
107
+ header {
108
+
109
+ //省略
110
+
111
+ }
112
+
95
113
  .wrap {
96
114
 
97
115
  position: relative;

2

修正

2019/11/06 14:06

投稿

tnk_fuku
tnk_fuku

スコア42

test CHANGED
File without changes
test CHANGED
@@ -8,22 +8,82 @@
8
8
 
9
9
  ```ここに言語を入力
10
10
 
11
+ <header>
12
+
13
+ </header>
14
+
15
+ <section class="welcome_section">
16
+
17
+ <div class="wrap">
18
+
19
+ <div class="arrow"></div>
20
+
21
+ <p><!-- 文章が入る --></p>
22
+
23
+ </div>
24
+
25
+ </section>
26
+
11
- <footer class="fadeInUp">
27
+ <footer class="footer_nav fadeInUp">
12
-
28
+
13
- <ul>
29
+ <div class="wrap">
30
+
14
-
31
+ <ul class="footer_flex">
32
+
15
- <li> </li>
33
+ <li><!-- テキストが入る --></li>
16
-
34
+
17
- <li> </li>
35
+ <li><!-- テキストが入る --></li>
18
-
36
+
19
- <li> </li>
37
+ <li><!-- テキストが入る --></li>
20
-
38
+
21
- <li> </li>
39
+ <li><!-- テキストが入る --></li>
22
40
 
23
41
  </ul>
24
42
 
43
+ </div>
44
+
25
45
  </footer>
26
46
 
47
+ <script>
48
+
49
+ $(function(){
50
+
51
+ function animation(){
52
+
53
+ $('.fadeInUp').each(function(){
54
+
55
+ var target = $(this).offset().top;
56
+
57
+ var scroll = $(window).scrollTop();
58
+
59
+ var windowHeight = $(window).height();
60
+
61
+ if (scroll > target - windowHeight){
62
+
63
+ $(this).css('opacity','1');
64
+
65
+ $(this).css('transform','translateY(0)');
66
+
67
+ }
68
+
69
+ });
70
+
71
+ }
72
+
73
+ animation();
74
+
75
+ $(window).scroll(function (){
76
+
77
+ animation();
78
+
79
+ });
80
+
81
+ });
82
+
83
+ </script>
84
+
85
+ </body>
86
+
27
87
  ```
28
88
 
29
89
 
@@ -32,11 +92,121 @@
32
92
 
33
93
  ```ここに言語を入力
34
94
 
95
+ .wrap {
96
+
97
+ position: relative;
98
+
99
+ max-width: 1030px;
100
+
101
+ margin: 0 auto;
102
+
103
+ height: auto;
104
+
105
+ }
106
+
107
+ .welcome_section {
108
+
109
+ padding: 0 0 100px;
110
+
111
+ font-size: 2.5rem;
112
+
113
+ text-align: center;
114
+
115
+ }
116
+
117
+ .arrow {
118
+
119
+ position: relative;
120
+
121
+ }
122
+
123
+ .arrow::before {
124
+
125
+ content: "";
126
+
127
+ display: block;
128
+
129
+ position: absolute;
130
+
131
+ top: 0;
132
+
133
+ right: 50%;
134
+
135
+ width: 20px;
136
+
137
+ height: 20px;
138
+
139
+ border-top: 2px solid #fff;
140
+
141
+ border-right: 2px solid #fff;
142
+
143
+ transform: translateX(-50%) rotate(135deg);
144
+
145
+ }
146
+
147
+ .welcome_section p {
148
+
149
+ padding-top: 100px;
150
+
151
+ }
152
+
153
+
154
+
155
+ .footer_nav {
156
+
157
+ width: 100%;
158
+
159
+ height: 120px;
160
+
161
+ background-color: #fff;
162
+
163
+ }
164
+
165
+ .footer_nav ul li {
166
+
167
+ display: inline-block;
168
+
169
+ color: #000;
170
+
171
+ }
172
+
173
+ .footer_flex {
174
+
175
+ width: 80%;
176
+
177
+ padding: 40px 0;
178
+
179
+ margin-right: 10%;
180
+
181
+ margin-left: 10%;
182
+
183
+ flex-wrap: wrap;
184
+
185
+ justify-content: space-between;
186
+
187
+ }
188
+
189
+ .footer_flex li {
190
+
191
+ font-family: Arial,Raleway, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
192
+
193
+ width: 24%;
194
+
195
+ text-align: center;
196
+
197
+ font-size: 1.8rem;
198
+
199
+ padding: ;
200
+
201
+ }
202
+
35
203
  .fadeInUp {
36
204
 
205
+ margin-bottom: -0.1px;
206
+
37
207
  opacity: 0;
38
208
 
39
- transform: translateY(20px);
209
+ transform: translateY(80px);
40
210
 
41
211
  transition: 1.5s;
42
212
 
@@ -46,54 +216,6 @@
46
216
 
47
217
 
48
218
 
49
- jQuery
50
-
51
- ```ここに言語を入力
52
-
53
- $(function(){
54
-
55
- function animation(){
56
-
57
- $('.fadeInUp').each(function(){
58
-
59
- var target = $(this).offset().top;
60
-
61
- var scroll = $(window).scrollTop();
62
-
63
- var windowHeight = $(window).height();
64
-
65
- if (scroll > target - windowHeight){
66
-
67
- $(this).css('opacity','1');
68
-
69
- $(this).css('transform','translateY(0)');
70
-
71
- }
72
-
73
- });
74
-
75
- }
76
-
77
- animation();
78
-
79
- $(window).scroll(function (){
80
-
81
- animation();
82
-
83
- });
84
-
85
- });
86
-
87
- ```
88
-
89
-
90
-
91
- bodyの背景は黒でfooterの背景は白としています。
92
-
93
-
94
-
95
-
96
-
97
219
  footerがフェードインしてきたときにfooter下方に一瞬黒の余白が出来てしまいます。
98
220
 
99
221
 

1

誤字脱字

2019/11/06 13:09

投稿

tnk_fuku
tnk_fuku

スコア42

test CHANGED
@@ -1 +1 @@
1
- スクロールして下方からフェードインするfooter要素の下方に一瞬空白が出来るを消したい
1
+ スクロールして下方からフェードインするfooter要素の下方に一瞬出来る空白を消したい
test CHANGED
File without changes