質問編集履歴

2

追記

2021/06/04 05:39

投稿

wing283
wing283

スコア123

test CHANGED
File without changes
test CHANGED
@@ -26,247 +26,791 @@
26
26
 
27
27
  <meta charset="UTF-8">
28
28
 
29
- <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
30
-
31
29
  <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>
32
30
 
33
-
31
+ <style>
32
+
33
+ #loading {
34
+
35
+ width: 100vw;
36
+
37
+ height: 100vh;
38
+
39
+ transition: all 1s;
40
+
41
+ background-color: #000;
42
+
43
+ position: fixed;
44
+
45
+ top: 0;
46
+
47
+ left: 0;
48
+
49
+ z-index: 9999;
50
+
51
+ }
52
+
53
+ .spinner {
54
+
55
+ width: 960px;
56
+
57
+ height: 448px;
58
+
59
+ margin: 0 auto;
60
+
61
+ border-radius: 100%;
62
+
63
+ position: absolute;
64
+
65
+ top: 50%;
66
+
67
+ left: 50%;
68
+
69
+ transform: translateY(-50%) translateX(-50%);
70
+
71
+ -webkit- transform: translateY(-50%) translateX(-50%);
72
+
73
+ }
74
+
75
+ @keyframes sk-scaleout {
76
+
77
+ 0% {
78
+
79
+ transform: scale(0);
80
+
81
+ }
82
+
83
+ 100% {
84
+
85
+ transform: scale(1.0);
86
+
87
+ opacity: 0;
88
+
89
+ }
90
+
91
+ }
92
+
93
+ .loaded {
94
+
95
+ opacity: 0;
96
+
97
+ visibility: hidden;
98
+
99
+ }
100
+
101
+ .isMove { display: none;}
102
+
103
+ .isMove.mask2 { display: block;}
104
+
105
+ .container {
106
+
107
+ display: flex;
108
+
109
+ flex-wrap: wrap;
110
+
111
+ justify-content: space-between;
112
+
113
+ width: 100%;
114
+
115
+ max-width: 700px;
116
+
117
+ height: auto;
118
+
119
+ margin: 0 auto;
120
+
121
+ padding: 40px 0;
122
+
123
+ }
124
+
125
+ .box {
126
+
127
+ width: 100%;
128
+
129
+ height: 200px;
130
+
131
+ margin: 0 0 2% 0;
132
+
133
+ overflow: hidden;
134
+
135
+ }
136
+
137
+ .boxInner {
138
+
139
+ width: inherit;
140
+
141
+ height: inherit;
142
+
143
+ line-height: 200px;
144
+
145
+ font-size: 1.5em;
146
+
147
+ text-align: center;
148
+
149
+ color: #555;
150
+
151
+ opacity: 0;
152
+
153
+ }
154
+
155
+ .isPlay {
156
+
157
+ animation-name: play;
158
+
159
+ animation-duration: .5s;
160
+
161
+ animation-fill-mode: forwards;
162
+
163
+ animation-timing-function: cubic-bezier(.8,0,.5,1);
164
+
165
+ position: relative;
166
+
167
+ opacity: 1 !important;
168
+
169
+ }
170
+
171
+ .isPlay:before {
172
+
173
+ animation-name: maskOut;
174
+
175
+ animation-duration: .5s;
176
+
177
+ animation-delay: .5s;
178
+
179
+ animation-fill-mode: forwards;
180
+
181
+ animation-timing-function: cubic-bezier(.8,0,.5,1);
182
+
183
+ content: '';
184
+
185
+ position: absolute;
186
+
187
+ top: 0;
188
+
189
+ left: 0;
190
+
191
+ z-index: 1;
192
+
193
+ width: 100%;
194
+
195
+ height: 100%;
196
+
197
+ background: #000;
198
+
199
+ }
200
+
201
+ @keyframes play {
202
+
203
+ from {
204
+
205
+ transform: translateX(-100%);
206
+
207
+ }
208
+
209
+ to {
210
+
211
+ transform: translateX(0);
212
+
213
+ }
214
+
215
+ }
216
+
217
+ @keyframes maskOut {
218
+
219
+ from {
220
+
221
+ transform: translateX(0);
222
+
223
+ }
224
+
225
+ to {
226
+
227
+ transform: translateX(100%);
228
+
229
+ }
230
+
231
+ }
232
+
233
+ .Vd.isPlay {
234
+
235
+ animation-name: play2;
236
+
237
+ animation-duration: .5s;
238
+
239
+ animation-fill-mode: forwards;
240
+
241
+ animation-timing-function: cubic-bezier(.8,0,.5,1);
242
+
243
+ position: relative;
244
+
245
+ opacity: 1;
246
+
247
+ }
248
+
249
+ .Vd.isPlay:before {
250
+
251
+ animation-name: maskOut2;
252
+
253
+ animation-duration: .5s;
254
+
255
+ animation-delay: .5s;
256
+
257
+ animation-fill-mode: forwards;
258
+
259
+ animation-timing-function: cubic-bezier(.8,0,.5,1);
260
+
261
+ content: '';
262
+
263
+ position: absolute;
264
+
265
+ top: 0;
266
+
267
+ left: 0;
268
+
269
+ z-index: 1;
270
+
271
+ width: 100%;
272
+
273
+ height: 100%;
274
+
275
+ background-: #000;
276
+
277
+ }
278
+
279
+ @keyframes play2 {
280
+
281
+ from {
282
+
283
+ transform: translateY(-100%);
284
+
285
+ }
286
+
287
+ to {
288
+
289
+ transform: translateY(0);
290
+
291
+ }
292
+
293
+ }
294
+
295
+ @keyframes maskOut2 {
296
+
297
+ from {
298
+
299
+ transform: translateY(0);
300
+
301
+ }
302
+
303
+ to {
304
+
305
+ transform: translateY(100%);
306
+
307
+ }
308
+
309
+ }
310
+
311
+ .conInr .box {
312
+
313
+ width: max-content;
314
+
315
+ height: auto;
316
+
317
+ margin: 0 0 0 0;
318
+
319
+ overflow: hidden;
320
+
321
+ }
322
+
323
+ .conInr .box img {
324
+
325
+ width: 100%;
326
+
327
+ }
328
+
329
+ .conInr,
330
+
331
+ .conInr .boxInner {
332
+
333
+ position: relative;
334
+
335
+ padding-bottom: 60%;
336
+
337
+ width: 100%;}
338
+
339
+ .img1,
340
+
341
+ .img2,
342
+
343
+ .img3,
344
+
345
+ .img4,
346
+
347
+ .img5 {
348
+
349
+ position: absolute !important;
350
+
351
+ overflow: hidden;
352
+
353
+ opacity: 0;}
354
+
355
+ .img1.isPlay {
356
+
357
+ width: 90%;
358
+
359
+ left: 0;
360
+
361
+ right: 0;
362
+
363
+ margin: 0 auto;
364
+
365
+ opacity: 1;
366
+
367
+ }
368
+
369
+ .img2.isPlay {
370
+
371
+ width: 50%;
372
+
373
+ right: 2%;
374
+
375
+ top: 55%;
376
+
377
+ }
378
+
379
+ .img3.isPlay {
380
+
381
+ width: 40%;
382
+
383
+ left: 2%;
384
+
385
+ top: 55%;
386
+
387
+ }
388
+
389
+ .img4.isPlay {
390
+
391
+ width: 100%;
392
+
393
+ }
394
+
395
+ .img5.isPlay {
396
+
397
+ width: 30%;
398
+
399
+ left: 15%;
400
+
401
+ top: 30%;
402
+
403
+ }
404
+
405
+ .boxImg4 {
406
+
407
+ position: absolute !important;
408
+
409
+ width: 20% !important;
410
+
411
+ right: 2%;
412
+
413
+ top: 5%;
414
+
415
+ overflow: hidden !important;
416
+
417
+ height: 0;
418
+
419
+ padding-bottom: 14%;}
420
+
421
+ </style>
34
422
 
35
423
  </head>
36
424
 
37
425
  <body>
38
426
 
427
+ <div class="wrapper">
428
+
429
+ <div id="loading">
430
+
431
+ <div class="spinner">
432
+
433
+ <svg viewBox="0 0 0 1" class="mask" id="movie" >
434
+
435
+ <mask id="clip">
436
+
437
+ <g id="mask"></g>
438
+
439
+ </mask>
440
+
441
+ <image xlink:href="hoge.svg" width="100%" height="100%" mask="url(#clip)"></image>
442
+
443
+ </svg>
444
+
445
+ </div>
446
+
447
+ </div>
448
+
449
+ <main>
450
+
39
451
  <section>
40
452
 
41
- <div id="loading">
453
+ <div class="container">
454
+
42
-
455
+ <div class="box">
456
+
43
- <div class="spinner"></div>
457
+ <div class="boxInner">Lorem Ipsum</div>
458
+
459
+ <div class="boxInner">Lorem Ipsum</div>
460
+
461
+ <div class="boxInner">Lorem Ipsum</div>
44
462
 
45
463
  </div>
46
464
 
47
465
  <div class="box">
48
466
 
49
- <img src="http://into-the-program.com/demo/images/sample001.jpg" alt="">
467
+ <div class="boxInner">Lorem Ipsum</div>
50
468
 
51
469
  </div>
52
470
 
53
-
54
-
55
- <div class="box box_">
471
+ <div class="box">
56
-
472
+
57
- <div class="img img1"><img src="http://into-the-program.com/demo/images/sample002.jpg" alt=""></div>
473
+ <div class="boxInner">Lorem Ipsum</div>
58
-
59
- <div class="img img2"><img src="http://into-the-program.com/demo/images/sample003.jpg" alt=""></div>
60
-
61
- <div class="img img3"><img src="http://into-the-program.com/demo/images/sample004.jpg" alt=""></div>
62
474
 
63
475
  </div>
64
476
 
477
+ <div class="box">
478
+
479
+ <div class="boxInner">Lorem Ipsum</div>
480
+
481
+ </div>
482
+
483
+ </div>
484
+
65
485
  </section>
66
486
 
67
- <style>
68
-
69
- #loading {
70
-
71
- width: 100vw;
72
-
73
- height: 100vh;
74
-
75
- transition: all 1s;
76
-
77
- background-color: #0bd;
78
-
79
- position: fixed;
80
-
81
- top: 0;
82
-
83
- left: 0;
84
-
85
- z-index: 9999;
86
-
87
- }
88
-
89
- .spinner {
90
-
91
- width: 100px;
92
-
93
- height: 100px;
94
-
95
- margin: 200px auto;
96
-
97
- background-color: #fff;
98
-
99
- border-radius: 100%;
100
-
101
- animation: sk-scaleout 3.0s infinite ease-in-out;
102
-
103
- }
104
-
105
- @keyframes sk-scaleout {
106
-
107
- 0% {
108
-
109
- transform: scale(0);
110
-
111
- }
112
-
113
- 100% {
114
-
115
- transform: scale(1.0);
116
-
117
- opacity: 0;
118
-
119
- }
120
-
121
- }
122
-
123
- .loaded {
124
-
125
- opacity: 0;
126
-
127
- visibility: hidden;
128
-
129
- }
130
-
131
- img { width: 100%;}
132
-
133
- .box,
134
-
135
- .img {
136
-
137
- position: relative;
138
-
139
- width: 100%;
140
-
141
- height: auto;
142
-
143
- margin: 0 0 20px 0;
144
-
145
- overflow: hidden;
146
-
147
- }
148
-
149
- .box:before,
150
-
151
- .img:before{
152
-
153
- content: '';
154
-
155
- position: absolute;
156
-
157
- width: 100%;
158
-
159
- height: 100%;
160
-
161
- background: rgba(0, 0, 0, .9);
162
-
163
- transition: 0.5s cubic-bezier(.15,.65,.85,.65);
164
-
165
- }
166
-
167
- .isPlay:before {
168
-
169
- transform: translate3d(100%, 0, 0);
170
-
171
- }
172
-
173
-
174
-
175
- .img1 {width: 400px;}
176
-
177
- .img2 {width: 200px;}
178
-
179
- .img3 {width: 200px;}
180
-
181
- </style>
182
-
183
-
487
+ <section>
488
+
489
+ <svg viewBox="0 0 0 2" class="isMovie" id="move" >
490
+
491
+ <mask id="clipMask">
492
+
493
+ <g id="mask"></g>
494
+
495
+ </mask>
496
+
497
+ <image xlink:href="huga.svg" width="100%" height="100%" mask="url(#clipMask)"></image>
498
+
499
+ </svg>
500
+
501
+ <div class=" ">
502
+
503
+ <div class="conInr">
504
+
505
+ <div class="box">
506
+
507
+ <div class="img1"><img src="http://into-the-program.com/demo/images/sample001.jpg" alt=""></div>
508
+
509
+ </div>
510
+
511
+ <div class="box">
512
+
513
+ <div class="img2"><img src="http://into-the-program.com/demo/images/sample002.jpg" alt=""></div>
514
+
515
+ </div>
516
+
517
+ <div class="box">
518
+
519
+ <div class="Vd img3"><img src="http://into-the-program.com/demo/images/sample003.jpg" alt=""></div>
520
+
521
+ </div>
522
+
523
+ <div class="box">
524
+
525
+ <div class="Vd img4 boxImg4"><img src="http://into-the-program.com/demo/images/sample004.jpg" alt=""></div>
526
+
527
+ </div>
528
+
529
+ <div class="box">
530
+
531
+ <div class="img5"><img src="http://into-the-program.com/demo/images/sample005.jpg" alt=""></div>
532
+
533
+ </div>
534
+
535
+ </div>
536
+
537
+ </div>
538
+
539
+ </section>
540
+
541
+ </main>
542
+
543
+ </div>
544
+
545
+
546
+
547
+ <script src="https://cdn.jsdelivr.net/npm/vivus@latest/dist/vivus.min.js"></script>
184
548
 
185
549
  <script>
186
550
 
187
-
188
-
189
- window.onload = function() {
190
-
191
- setTimeout(() => {
192
-
193
- const spinner = document.getElementById('loading');
194
-
195
- spinner.classList.add('loaded');
196
-
197
- }, 3000);
198
-
199
- }
200
-
201
-
202
-
203
- $(window).on('load scroll', function (){
204
-
205
- setTimeout(() => {
206
-
207
- var box = $('.box');
208
-
209
- var isPlay= 'isPlay';
210
-
211
- box.each(function () {
212
-
213
- var boxOffset = $(this).offset().top;
214
-
215
- var scrollPos = $(window).scrollTop();
216
-
217
- var wh = $(window).height();
218
-
219
- if(scrollPos > boxOffset - wh + (wh / 10) ){
220
-
221
- $(this).addClass('isPlay');
222
-
223
- }else{
224
-
225
- }
226
-
227
- });
228
-
229
- }, 3000);
230
-
231
- });
232
-
233
- $(window).on('load scroll', function (){
234
-
235
- setTimeout(() => {
236
-
237
- var scrollTop = $(this).scrollTop();
238
-
239
- var scrollBottom = scrollTop + $(this).height();
240
-
241
- $(".box_ .img").each(function (i) {
242
-
243
- var boxOffset = $(this).offset().top;
244
-
245
- var scrollPos = $(window).scrollTop();
246
-
247
- var wh = $(window).height();
248
-
249
- if(scrollPos > boxOffset - wh + (wh / 10) ){
250
-
251
- var target = this;
252
-
253
- setTimeout(function () {
254
-
255
- $(target).addClass("isPlay");
256
-
257
- }, 100 * i);
551
+ window.onload = function () {
552
+
553
+ setTimeout(() => {
554
+
555
+ const spinner = document.getElementById('loading');
556
+
557
+ spinner.classList.add('loaded');
558
+
559
+ boxShow();
560
+
561
+ MovieShow();
562
+
563
+ box1Show();
564
+
565
+ box2Show();
566
+
567
+ box3Show();
568
+
569
+ box4Show();
570
+
571
+ box5Show();
572
+
573
+ $(window).on('scroll', function () { boxShow(); });
574
+
575
+ $(window).on('scroll', function () { MovieShow(); });
576
+
577
+ $(window).on('scroll', function () { box1Show(); });
578
+
579
+ $(window).on('scroll', function () { box2Show(); });
580
+
581
+ $(window).on('scroll', function () { box3Show(); });
582
+
583
+ $(window).on('scroll', function () { box4Show(); });
584
+
585
+ $(window).on('scroll', function () { box5Show(); });
586
+
587
+ }, 3000);
258
588
 
259
589
  }
260
590
 
591
+ function boxShow() {
592
+
593
+ var elem = $('.boxInner');
594
+
595
+ elem.each(function () {
596
+
597
+ var isPlay = 'isPlay';
598
+
599
+ var elemOffset = $(this).offset().top;
600
+
601
+ var scrollPos = $(window).scrollTop();
602
+
603
+ var wh = $(window).height();
604
+
605
+ if(scrollPos > elemOffset - wh + (wh / 10)){
606
+
607
+ $(this).addClass(isPlay);
608
+
609
+ }
610
+
261
- });
611
+ });
612
+
262
-
613
+ }
614
+
615
+
616
+
617
+ function MovieShow() {
618
+
619
+ var elem = $('.isMovie');
620
+
621
+ elem.each(function () {
622
+
623
+ var isMovie = 'isMovie';
624
+
625
+ var elemOffset = $(this).offset().top;
626
+
627
+ var scrollPos = $(window).scrollTop();
628
+
629
+ var wh = $(window).height();
630
+
631
+ if(scrollPos > elemOffset - wh + (wh / 10)){
632
+
633
+ $(this).attr("class", "mask2");
634
+
635
+ new Vivus('move', {
636
+
637
+ type: 'oneByOne',
638
+
639
+ start: 'inViewport',
640
+
263
- }, 3300);
641
+ duration: 180,
642
+
264
-
643
+ forceRender: false,
644
+
645
+ animTimingFunction: Vivus.LINEAR,
646
+
265
- });
647
+ });
648
+
649
+ }
650
+
651
+ });
652
+
653
+ }
654
+
655
+ function box1Show() {
656
+
657
+ setTimeout(() => {
658
+
659
+ var elem = $('.img1');
660
+
661
+ elem.each(function () {
662
+
663
+ var isPlay = 'isPlay';
664
+
665
+ var elemOffset = $(this).offset().top;
666
+
667
+ var scrollPos = $(window).scrollTop();
668
+
669
+ var wh = $(window).height();
670
+
671
+ if(scrollPos > elemOffset - wh + (wh / 10)){
672
+
673
+ $(this).addClass(isPlay);
674
+
675
+ }
676
+
677
+ });
678
+
679
+ }, 2800);
680
+
681
+ }
682
+
683
+ function box2Show() {
684
+
685
+ setTimeout(() => {
686
+
687
+ var elem = $('.img2');
688
+
689
+ elem.each(function () {
690
+
691
+ var isPlay = 'isPlay';
692
+
693
+ var elemOffset = $(this).offset().top;
694
+
695
+ var scrollPos = $(window).scrollTop();
696
+
697
+ var wh = $(window).height();
698
+
699
+ if(scrollPos > elemOffset - wh + (wh / 10)){
700
+
701
+ $(this).addClass(isPlay);
702
+
703
+ }
704
+
705
+ });
706
+
707
+ }, 3000);
708
+
709
+ }
710
+
711
+ function box3Show() {
712
+
713
+ setTimeout(() => {
714
+
715
+ var elem = $('.img3');
716
+
717
+ elem.each(function () {
718
+
719
+ var isPlay = 'isPlay';
720
+
721
+ var elemOffset = $(this).offset().top;
722
+
723
+ var scrollPos = $(window).scrollTop();
724
+
725
+ var wh = $(window).height();
726
+
727
+ if(scrollPos > elemOffset - wh + (wh / 10)){
728
+
729
+ $(this).addClass(isPlay);
730
+
731
+ }
732
+
733
+ });
734
+
735
+ }, 3200);
736
+
737
+ }
738
+
739
+ function box4Show() {
740
+
741
+ setTimeout(() => {
742
+
743
+ var elem = $('.img4');
744
+
745
+ elem.each(function () {
746
+
747
+ var isPlay = 'isPlay';
748
+
749
+ var elemOffset = $(this).offset().top;
750
+
751
+ var scrollPos = $(window).scrollTop();
752
+
753
+ var wh = $(window).height();
754
+
755
+ if(scrollPos > elemOffset - wh + (wh / 10)){
756
+
757
+ $(this).addClass(isPlay);
758
+
759
+ }
760
+
761
+ });
762
+
763
+ }, 3400);
764
+
765
+ }
766
+
767
+ function box5Show() {
768
+
769
+ setTimeout(() => {
770
+
771
+ var elem = $('.img5');
772
+
773
+ elem.each(function () {
774
+
775
+ var isPlay = 'isPlay';
776
+
777
+ var elemOffset = $(this).offset().top;
778
+
779
+ var scrollPos = $(window).scrollTop();
780
+
781
+ var wh = $(window).height();
782
+
783
+ if(scrollPos > elemOffset - wh + (wh / 10)){
784
+
785
+ $(this).addClass(isPlay);
786
+
787
+ }
788
+
789
+ });
790
+
791
+ }, 3600);
792
+
793
+ }
794
+
795
+
796
+
797
+ new Vivus('movie', {
798
+
799
+ type: 'oneByOne',
800
+
801
+ start: 'inViewport',
802
+
803
+ duration: 180,
804
+
805
+ forceRender: false,
806
+
807
+ animTimingFunction: Vivus.LINEAR,
808
+
809
+ });
266
810
 
267
811
  </script>
268
812
 
269
- </main>
813
+
270
814
 
271
815
  </body>
272
816
 

1

追記

2021/06/04 05:39

投稿

wing283
wing283

スコア123

test CHANGED
File without changes
test CHANGED
@@ -38,13 +38,19 @@
38
38
 
39
39
  <section>
40
40
 
41
+ <div id="loading">
42
+
43
+ <div class="spinner"></div>
44
+
45
+ </div>
46
+
41
47
  <div class="box">
42
48
 
43
49
  <img src="http://into-the-program.com/demo/images/sample001.jpg" alt="">
44
50
 
45
51
  </div>
46
52
 
47
-
53
+
48
54
 
49
55
  <div class="box box_">
50
56
 
@@ -60,6 +66,68 @@
60
66
 
61
67
  <style>
62
68
 
69
+ #loading {
70
+
71
+ width: 100vw;
72
+
73
+ height: 100vh;
74
+
75
+ transition: all 1s;
76
+
77
+ background-color: #0bd;
78
+
79
+ position: fixed;
80
+
81
+ top: 0;
82
+
83
+ left: 0;
84
+
85
+ z-index: 9999;
86
+
87
+ }
88
+
89
+ .spinner {
90
+
91
+ width: 100px;
92
+
93
+ height: 100px;
94
+
95
+ margin: 200px auto;
96
+
97
+ background-color: #fff;
98
+
99
+ border-radius: 100%;
100
+
101
+ animation: sk-scaleout 3.0s infinite ease-in-out;
102
+
103
+ }
104
+
105
+ @keyframes sk-scaleout {
106
+
107
+ 0% {
108
+
109
+ transform: scale(0);
110
+
111
+ }
112
+
113
+ 100% {
114
+
115
+ transform: scale(1.0);
116
+
117
+ opacity: 0;
118
+
119
+ }
120
+
121
+ }
122
+
123
+ .loaded {
124
+
125
+ opacity: 0;
126
+
127
+ visibility: hidden;
128
+
129
+ }
130
+
63
131
  img { width: 100%;}
64
132
 
65
133
  .box,
@@ -118,6 +186,20 @@
118
186
 
119
187
 
120
188
 
189
+ window.onload = function() {
190
+
191
+ setTimeout(() => {
192
+
193
+ const spinner = document.getElementById('loading');
194
+
195
+ spinner.classList.add('loaded');
196
+
197
+ }, 3000);
198
+
199
+ }
200
+
201
+
202
+
121
203
  $(window).on('load scroll', function (){
122
204
 
123
205
  setTimeout(() => {
@@ -136,7 +218,7 @@
136
218
 
137
219
  if(scrollPos > boxOffset - wh + (wh / 10) ){
138
220
 
139
- $(this).addClass('isPlay');
221
+ $(this).addClass('isPlay');
140
222
 
141
223
  }else{
142
224