質問編集履歴

4

情報の追加

2020/08/03 17:53

投稿

RyoYo
RyoYo

スコア9

test CHANGED
File without changes
test CHANGED
@@ -472,7 +472,25 @@
472
472
 
473
473
  ```
474
474
 
475
-
475
+ ```js
476
+
477
+ var nystories = document.querySelector(".anchor").offsetTop;
478
+
479
+ window.onscroll = function gradation() {
480
+
481
+ if (window.pageYOffset > 0) {
482
+
483
+ var opac = (window.pageYOffset / nystories);
484
+
485
+ console.log(opac);
486
+
487
+ document.body.style.background = "linear-gradient(rgba(51,102,102," + opac + "), rgba(0,51,51," + opac + ")), url(file:///Users/ryoyokoyama/pythonBox/portfolio/img/portfolio-main.jpg) no-repeat";
488
+
489
+ }
490
+
491
+ }
492
+
493
+ ```
476
494
 
477
495
 
478
496
 

3

情報の追加

2020/08/03 17:53

投稿

RyoYo
RyoYo

スコア9

test CHANGED
File without changes
test CHANGED
@@ -20,7 +20,15 @@
20
20
 
21
21
  ```html
22
22
 
23
+ <body>
24
+
25
+ <h1>New York Stories</h1>
26
+
27
+ <a class="anchor" href="#">Scroll</a>
28
+
29
+ <!--start portfolio details -->
30
+
23
- <div class="menu">
31
+ <div class="menu">
24
32
 
25
33
  <label class="label1" for="type1">
26
34
 
@@ -38,21 +46,231 @@
38
46
 
39
47
  </div>
40
48
 
49
+
50
+
51
+
52
+
53
+ <div class="portfolio-detail-1"></div>
54
+
55
+ <div class="portfolio-detail-2"></div>
56
+
41
57
  ```
42
58
 
43
59
 
44
60
 
45
61
  ```scss
46
62
 
63
+ * {
64
+
65
+ box-sizing: border-box;
66
+
67
+ }
68
+
47
- body{
69
+ body {
70
+
48
-
71
+ font-family: Calluna, Arial, sans-serif;
72
+
73
+ background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), url(file:///Users/ryoyokoyama/pythonBox/portfolio/img/portfolio-main.jpg);
74
+
75
+ background-repeat: no-repeat;
76
+
77
+ background-attachment: fixed !important;
78
+
79
+ background-size: cover !important;
80
+
81
+ background-position: center top !important;
82
+
83
+ padding: 1rem;
84
+
85
+ padding-top: 45%;
86
+
87
+ color: #fff;
88
+
89
+ z-index: 1;
90
+
91
+ }
92
+
93
+
94
+
95
+ h1 {
96
+
97
+ font-size: 4rem;
98
+
99
+ text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
100
+
101
+ line-height: 1;
102
+
103
+ position: absolute;
104
+
105
+ top: 10px;
106
+
107
+ font-weight: 100;
108
+
109
+ }
110
+
111
+ p {
112
+
113
+ font-size: 1.3rem;
114
+
115
+ text-align: left;
116
+
117
+ line-height: 1.6;
118
+
119
+ margin-left: 8rem;
120
+
121
+ margin-right: 8rem;
122
+
123
+ color: #000;
124
+
125
+ }
126
+
127
+ h2 {
128
+
129
+ text-align: center;
130
+
131
+ text-transform: uppercase;
132
+
133
+ margin-bottom: 0;
134
+
135
+ }
136
+
137
+ span {
138
+
139
+ display: block;
140
+
141
+ margin: 0;
142
+
143
+ text-align: center;
144
+
145
+ font-size: 3rem;
146
+
147
+ }
148
+
149
+ a {
150
+
151
+
152
+
153
+ display: inline-block;
154
+
155
+ position: absolute;
156
+
157
+ right: 50vw;
158
+
159
+ bottom: 0;
160
+
161
+ z-index: 2;
162
+
163
+ padding: 10px 10px 110px;
164
+
165
+ overflow: hidden;
166
+
167
+ color: #fff;
168
+
169
+ font-size: 14px;
170
+
171
+ font-family: 'Josefin Sans', sans-serif;
172
+
173
+ line-height: 1;
174
+
175
+ letter-spacing: .2em;
176
+
177
+ text-transform: uppercase;
178
+
179
+ text-shadow: 0 0 7px rgba(0, 0, 0, 1) !important;
180
+
181
+ text-decoration: none;
182
+
183
+ writing-mode: vertical-lr;
184
+
185
+
186
+
187
+ &::after {
188
+
189
+ content: '';
190
+
191
+ position: absolute;
192
+
193
+ bottom: 0;
194
+
195
+ left: 50%;
196
+
197
+ width: 1px;
198
+
199
+ height: 100px;
200
+
201
+ background: #fff;
202
+
203
+ }
204
+
205
+ &::before {
206
+
207
+ content: '';
208
+
209
+ position: absolute;
210
+
211
+ bottom: 0;
212
+
213
+ left: 50%;
214
+
215
+ width: 1px;
216
+
217
+ height: 100px;
218
+
219
+ background: rgba(255, 255, 255, .4);
220
+
221
+ }
222
+
223
+ &::after {
224
+
225
+ animation: sdl 1.5s cubic-bezier(1, 0, 0, 1) infinite;
226
+
227
+ }
228
+
229
+ @keyframes sdl {
230
+
231
+ 0% {
232
+
233
+ transform: scale(1, 0);
234
+
235
+ transform-origin: 0 0;
236
+
237
+ }
238
+
239
+ 50% {
240
+
241
+ transform: scale(1, 1);
242
+
243
+ transform-origin: 0 0;
244
+
245
+ }
246
+
247
+ 50.1% {
248
+
249
+ transform: scale(1, 1);
250
+
251
+ transform-origin: 0 100%;
252
+
253
+ }
254
+
255
+ 100% {
256
+
257
+ transform: scale(1, 0);
258
+
259
+ transform-origin: 0 100%;
260
+
261
+ }
262
+
263
+ }
264
+
265
+ }
266
+
49
- div {
267
+ div {
50
268
 
51
269
  &.portfolio-detail-0 {
52
270
 
53
271
  background-image:
54
272
 
55
- url(file:///Users/ooo/pythonBox/portfolio/img/portfolio-detail0.jpg);
273
+ url(file:///Users/ryoyokoyama/pythonBox/portfolio/img/portfolio-detail0.jpg);
56
274
 
57
275
  height: 50vh;
58
276
 
@@ -70,13 +288,103 @@
70
288
 
71
289
  }
72
290
 
291
+ &.portfolio-detail-1 {
292
+
293
+ background-color: burlywood;
294
+
295
+ height: 50vh;
296
+
297
+ width: 70vw;
298
+
299
+ background-size: cover;
300
+
301
+ position: relative;
302
+
303
+ top: 550px;
304
+
305
+ right: -25vw;
306
+
307
+ z-index: 2;
308
+
73
- }
309
+ }
310
+
74
-
311
+ &.portfolio-detail-2 {
312
+
313
+ background-color: burlywood;
314
+
315
+ height: 50vh;
316
+
317
+ width: 70vw;
318
+
319
+ background-size: cover;
320
+
321
+ position: relative;
322
+
323
+ top: 800px;
324
+
325
+ right: -25vw;
326
+
327
+ z-index: 2;
328
+
75
- }
329
+ }
330
+
76
-
331
+ &.btn {
332
+
77
-
333
+ position: relative;
334
+
78
-
335
+ top: 1500px;
336
+
337
+ z-index: 3;
338
+
339
+ a {
340
+
341
+ &.btn--orange {
342
+
343
+ color: #fff;
344
+
345
+ background-color: #eb6100;
346
+
347
+ }
348
+
349
+
350
+
351
+ &.btn--orange:hover {
352
+
353
+ color: #fff;
354
+
355
+ background: #f56500;
356
+
357
+ }
358
+
359
+
360
+
361
+ &.btn-c {
362
+
363
+ font-size: 1.8rem;
364
+
365
+ position: relative;
366
+
367
+ padding: 1.5rem 2rem 1.5rem 2rem;
368
+
369
+ border-radius: 100vh;
370
+
371
+ }
372
+
373
+
374
+
375
+ &.btn-c i.fa {
376
+
377
+ margin-right: 1rem;
378
+
379
+ }
380
+
381
+ }
382
+
383
+ }
384
+
385
+
386
+
79
- div {
387
+ div {
80
388
 
81
389
  label {
82
390
 
@@ -160,6 +468,8 @@
160
468
 
161
469
  }
162
470
 
471
+ }
472
+
163
473
  ```
164
474
 
165
475
 

2

情報の追加

2020/08/03 17:52

投稿

RyoYo
RyoYo

スコア9

test CHANGED
File without changes
test CHANGED
@@ -43,6 +43,38 @@
43
43
 
44
44
 
45
45
  ```scss
46
+
47
+ body{
48
+
49
+ div {
50
+
51
+ &.portfolio-detail-0 {
52
+
53
+ background-image:
54
+
55
+ url(file:///Users/ooo/pythonBox/portfolio/img/portfolio-detail0.jpg);
56
+
57
+ height: 50vh;
58
+
59
+ width: 70vw;
60
+
61
+ background-size: cover;
62
+
63
+ position: relative;
64
+
65
+ top: 300px;
66
+
67
+ right: -25vw;
68
+
69
+ z-index: 2;
70
+
71
+ }
72
+
73
+ }
74
+
75
+ }
76
+
77
+
46
78
 
47
79
  div {
48
80
 

1

誤字

2020/08/02 01:50

投稿

RyoYo
RyoYo

スコア9

test CHANGED
File without changes
test CHANGED
@@ -42,7 +42,7 @@
42
42
 
43
43
 
44
44
 
45
- ```css
45
+ ```scss
46
46
 
47
47
  div {
48
48