Skip to content

Commit a765cbf

Browse files
zesamerizesameri
committed
Add videos to homepage
1 parent 110a485 commit a765cbf

File tree

10 files changed

+167
-56
lines changed

10 files changed

+167
-56
lines changed

‎alhambra.html‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -58,16 +58,6 @@ <h1 class="header">
5858
</footer>
5959
</div>
6060

61-
<div class="crumple" aria-hidden="">
62-
<div class="crumple__rect"></div>
63-
<div class="shapes-container">
64-
<div class="circle-one"></div>
65-
<div class="circle-two"></div>
66-
<div class="circle-three"></div>
67-
<div class="circle-four"></div>
68-
</div>
69-
</div>
70-
7161
<script>
7262
// Pattern controller for alhambra page
7363
const footerLinks = document.querySelectorAll('.footer a[data-pattern]');

‎assets/videos/IMG_1624.MOV‎

14.3 MB
Binary file not shown.

‎assets/videos/IMG_4017.MOV‎

37.3 MB
Binary file not shown.

‎assets/videos/IMG_4943.MOV‎

26 MB
Binary file not shown.

‎assets/videos/IMG_7555.mov‎

55.7 MB
Binary file not shown.

‎assets/videos/PXL_20220605_192330465.mp4‎

7.49 MB
Binary file not shown.

‎css/crumple.css‎

Lines changed: 152 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -362,6 +362,38 @@
362362
z-index: 2;
363363
}
364364

365+
.crumple-video {
366+
position: absolute;
367+
top: 0;
368+
left: 0;
369+
width: 100%;
370+
height: 100%;
371+
object-fit: cover;
372+
opacity: 0;
373+
z-index: 0;
374+
clip-path: polygon(0 100%, 0 100%, 0 100%, 0 100%, 0 100%, 0 100%);
375+
}
376+
377+
.crumple-video--writings {
378+
z-index: 1;
379+
}
380+
381+
.crumple-video--alhambra {
382+
z-index: 1;
383+
}
384+
385+
.crumple-video--playlists {
386+
z-index: 1;
387+
}
388+
389+
.crumple-video--instagram {
390+
z-index: 1;
391+
}
392+
393+
.crumple-video--github {
394+
z-index: 1;
395+
}
396+
365397
@-webkit-keyframes circle-one {
366398
0% {
367399
-webkit-clip-path: circle(12.5vh at -12.5vh 12.5vh);
@@ -509,35 +541,78 @@
509541
z-index: 2;
510542
}
511543

512-
body:has(.footer__link--writings:hover) .crumple:after {
513-
background-color: #020121;
514-
-webkit-animation: e 1s 0s linear reverse forwards; /* Changed .25s to 0s */
544+
body:has(.footer__link--writings:hover) .crumple-video--writings {
545+
opacity: 1;
546+
-webkit-animation: e 1s 0s linear reverse forwards;
515547
animation: e 1s 0s linear reverse forwards;
516548
}
517549

518-
body:has(.footer__link--github:hover) .crumple:after {
550+
/* Videos for home page only */
551+
body:not(#trash):not(#essays):has(.footer__link--github:hover) .crumple-video--github {
552+
opacity: 1;
553+
-webkit-animation: b 1s .25s linear reverse forwards;
554+
animation: b 1s .25s linear reverse forwards;
555+
}
556+
557+
body:not(#trash):not(#essays):has(.footer__link--playlists:hover) .crumple-video--playlists {
558+
opacity: 1;
559+
-webkit-animation: c 1s .25s linear reverse forwards;
560+
animation: c 1s .25s linear reverse forwards;
561+
}
562+
563+
body:not(#trash):not(#essays):has(.footer__link--instagram:hover) .crumple-video--instagram {
564+
opacity: 1;
565+
-webkit-animation: f 1s .25s linear reverse forwards;
566+
animation: f 1s .25s linear reverse forwards;
567+
}
568+
569+
body:not(#trash):not(#essays):has(.footer__link--alhambra:hover) .crumple-video--alhambra {
570+
opacity: 1;
571+
-webkit-animation: d 1s .25s linear reverse forwards;
572+
animation: d 1s .25s linear reverse forwards;
573+
}
574+
575+
/* Colors for other pages (trash, writings) */
576+
body#trash:has(.footer__link--github:hover) .crumple:after,
577+
body#essays:has(.footer__link--github:hover) .crumple:after {
519578
background-color: #012118;
520579
-webkit-animation: b 1s .25s linear reverse forwards;
521580
animation: b 1s .25s linear reverse forwards;
522581
}
523582

524-
body:has(.footer__link--playlists:hover) .crumple:after {
583+
body#trash:has(.footer__link--playlists:hover) .crumple:after,
584+
body#essays:has(.footer__link--playlists:hover) .crumple:after {
525585
background-color: #210120;
526586
-webkit-animation: c 1s .25s linear reverse forwards;
527587
animation: c 1s .25s linear reverse forwards;
528588
}
529589

530-
body:has(.footer__link--instagram:hover) .crumple:after {
590+
body#trash:has(.footer__link--instagram:hover) .crumple:after,
591+
body#essays:has(.footer__link--instagram:hover) .crumple:after {
531592
background-color: #210120;
532593
-webkit-animation: f 1s .25s linear reverse forwards;
533594
animation: f 1s .25s linear reverse forwards;
534595
}
535596

536-
body:has(.footer__link--alhambra:hover) .crumple:after {
597+
body#trash:has(.footer__link--alhambra:hover) .crumple:after,
598+
body#essays:has(.footer__link--alhambra:hover) .crumple:after {
537599
background-color: #020121;
538600
-webkit-animation: d 1s .25s linear reverse forwards;
539601
animation: d 1s .25s linear reverse forwards;
540602
}
603+
604+
body#trash:has(.footer__link--home:hover) .crumple:after,
605+
body#essays:has(.footer__link--home:hover) .crumple:after {
606+
background-color: #020121;
607+
-webkit-animation: a 1s .25s linear reverse forwards;
608+
animation: a 1s .25s linear reverse forwards;
609+
}
610+
611+
/* Z-index for non-home pages */
612+
body#trash:has(.footer > a:hover) .crumple,
613+
body#essays:has(.footer > a:hover) .crumple {
614+
z-index: 2;
615+
}
541616
}
542617

543618
@-webkit-keyframes rectangle-reveal {
@@ -589,54 +664,79 @@ body:has(.footer__link--home:hover) .crumple:after {
589664
}
590665

591666
body:has(.footer__link--writings:active) .crumple {
592-
background: #020121;
667+
background: transparent;
593668
z-index: 0;
594669
}
595670

596-
body:has(.footer__link--writings:active) .crumple:after {
671+
body:has(.footer__link--writings:active) .crumple-video--writings {
672+
opacity: 1;
597673
-webkit-animation: e 1s .25s linear forwards;
598674
animation: e 1s .25s linear forwards;
599675
}
600676

677+
body:has(.footer__link--writings:active) .crumple:after {
678+
background-image: none;
679+
}
680+
601681
body:has(.footer__link--github:active) .crumple {
602-
background: #012118;
682+
background: transparent;
603683
z-index: 0;
604684
}
605685

606-
body:has(.footer__link--github:active) .crumple:after {
686+
body:has(.footer__link--github:active) .crumple-video--github {
687+
opacity: 1;
607688
-webkit-animation: b 1s .25s linear forwards;
608689
animation: b 1s .25s linear forwards;
609690
}
610691

692+
body:has(.footer__link--github:active) .crumple:after {
693+
background-image: none;
694+
}
695+
611696
body:has(.footer__link--playlists:active) .crumple {
612-
background: #210120;
697+
background: transparent;
613698
z-index: 0;
614699
}
615700

616-
body:has(.footer__link--playlists:active) .crumple:after {
701+
body:has(.footer__link--playlists:active) .crumple-video--playlists {
702+
opacity: 1;
617703
-webkit-animation: c 1s .25s linear forwards;
618704
animation: c 1s .25s linear forwards;
619705
}
620706

707+
body:has(.footer__link--playlists:active) .crumple:after {
708+
background-image: none;
709+
}
710+
621711
body:has(.footer__link--instagram:active) .crumple {
622-
background: #210120;
712+
background: transparent;
623713
z-index: 0;
624714
}
625715

626-
body:has(.footer__link--instagram:active) .crumple:after {
716+
body:has(.footer__link--instagram:active) .crumple-video--instagram {
717+
opacity: 1;
627718
-webkit-animation: f 1s .25s linear forwards;
628719
animation: f 1s .25s linear forwards;
629720
}
630721

722+
body:has(.footer__link--instagram:active) .crumple:after {
723+
background-image: none;
724+
}
725+
631726
body:has(.footer__link--alhambra:active) .crumple {
632-
background: #020121;
727+
background: transparent;
633728
z-index: 0;
634729
}
635730

636-
body:has(.footer__link--alhambra:active) .crumple:after {
731+
body:has(.footer__link--alhambra:active) .crumple-video--alhambra {
732+
opacity: 1;
637733
-webkit-animation: d 1s .25s linear forwards;
638734
animation: d 1s .25s linear forwards;
639735
}
736+
737+
body:has(.footer__link--alhambra:active) .crumple:after {
738+
background-image: none;
739+
}
640740
}
641741

642742
@media (hover: none) and (pointer: coarse) {
@@ -651,52 +751,77 @@ body:has(.footer__link--home:hover) .crumple:after {
651751
}
652752

653753
body:has(.footer__link--writings.mobile-trigger) .crumple {
654-
background: #020121;
754+
background: transparent;
655755
z-index: 0;
656756
}
657757

658-
body:has(.footer__link--writings.mobile-trigger) .crumple:after {
758+
body:has(.footer__link--writings.mobile-trigger) .crumple-video--writings {
759+
opacity: 1;
659760
-webkit-animation: e 1s .25s linear forwards;
660761
animation: e 1s .25s linear forwards;
661762
}
662763

764+
body:has(.footer__link--writings.mobile-trigger) .crumple:after {
765+
background-image: none;
766+
}
767+
663768
body:has(.footer__link--github.mobile-trigger) .crumple {
664-
background: #012118;
769+
background: transparent;
665770
z-index: 0;
666771
}
667772

668-
body:has(.footer__link--github.mobile-trigger) .crumple:after {
773+
body:has(.footer__link--github.mobile-trigger) .crumple-video--github {
774+
opacity: 1;
669775
-webkit-animation: b 1s .25s linear forwards;
670776
animation: b 1s .25s linear forwards;
671777
}
672778

779+
body:has(.footer__link--github.mobile-trigger) .crumple:after {
780+
background-image: none;
781+
}
782+
673783
body:has(.footer__link--playlists.mobile-trigger) .crumple {
674-
background: #210120;
784+
background: transparent;
675785
z-index: 0;
676786
}
677787

678-
body:has(.footer__link--playlists.mobile-trigger) .crumple:after {
788+
body:has(.footer__link--playlists.mobile-trigger) .crumple-video--playlists {
789+
opacity: 1;
679790
-webkit-animation: c 1s .25s linear forwards;
680791
animation: c 1s .25s linear forwards;
681792
}
682793

794+
body:has(.footer__link--playlists.mobile-trigger) .crumple:after {
795+
background-image: none;
796+
}
797+
683798
body:has(.footer__link--instagram.mobile-trigger) .crumple {
684-
background: #210120;
799+
background: transparent;
685800
z-index: 0;
686801
}
687802

688-
body:has(.footer__link--instagram.mobile-trigger) .crumple:after {
803+
body:has(.footer__link--instagram.mobile-trigger) .crumple-video--instagram {
804+
opacity: 1;
689805
-webkit-animation: f 1s .25s linear forwards;
690806
animation: f 1s .25s linear forwards;
691807
}
692808

809+
body:has(.footer__link--instagram.mobile-trigger) .crumple:after {
810+
background-image: none;
811+
}
812+
693813
body:has(.footer__link--alhambra.mobile-trigger) .crumple {
694-
background: #020121;
814+
background: transparent;
695815
z-index: 0;
696816
}
697817

698-
body:has(.footer__link--alhambra.mobile-trigger) .crumple:after {
818+
body:has(.footer__link--alhambra.mobile-trigger) .crumple-video--alhambra {
819+
opacity: 1;
699820
-webkit-animation: d 1s .25s linear forwards;
700821
animation: d 1s .25s linear forwards;
701822
}
823+
824+
body:has(.footer__link--alhambra.mobile-trigger) .crumple:after {
825+
background-image: none;
826+
}
702827
}

‎index.html‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -74,14 +74,20 @@ <h1 class="header">
7474
<a class="footer__link--github" href="https://github.com/zesameri" target="_blank" rel="noopener noreferrer">code</a>
7575
</footer>
7676
</div>
77-
<div class="crumple" aria-hidden="">
78-
<div class="crumple__rect"></div>
79-
<div class="shapes-container">
80-
<div class="circle-one"></div>
81-
<div class="circle-two"></div>
82-
<div class="circle-three"></div>
83-
<div class="circle-four"></div>
84-
</div>
85-
</div>
77+
<video class="crumple-video crumple-video--writings" autoplay muted loop playsinline>
78+
<source src="./assets/videos/PXL_20220605_192330465.mp4" type="video/mp4">
79+
</video>
80+
<video class="crumple-video crumple-video--alhambra" autoplay muted loop playsinline>
81+
<source src="./assets/videos/IMG_4943.MOV" type="video/mp4">
82+
</video>
83+
<video class="crumple-video crumple-video--playlists" autoplay muted loop playsinline>
84+
<source src="./assets/videos/IMG_7555.mov" type="video/mp4">
85+
</video>
86+
<video class="crumple-video crumple-video--instagram" autoplay muted loop playsinline>
87+
<source src="./assets/videos/IMG_1624.MOV" type="video/mp4">
88+
</video>
89+
<video class="crumple-video crumple-video--github" autoplay muted loop playsinline>
90+
<source src="./assets/videos/IMG_4017.MOV" type="video/mp4">
91+
</video>
8692
</body>
8793
</html>

‎poems.html‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -110,15 +110,6 @@ <h1 class="header">
110110
</footer>
111111
</div>
112112

113-
<div class="crumple" aria-hidden="">
114-
<div class="crumple__rect"></div>
115-
<div class="shapes-container">
116-
<div class="circle-one"></div>
117-
<div class="circle-two"></div>
118-
<div class="circle-three"></div>
119-
<div class="circle-four"></div>
120-
</div>
121-
</div>
122113

123114
</body>
124115
</html>

‎writings.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,6 @@ <h1 class="header">
128128

129129
<footer class="footer" id="footer">
130130
<a class="footer__link--home" href=".">home</a>
131-
<a class="footer__link--writings" href="./writings.html">writing</a>
132131
<a class="footer__link--alhambra" href="./alhambra.html">alhambra</a>
133132
<a class="footer__link--playlists" href="https://open.spotify.com/user/1286649958" target="_blank" rel="noopener noreferrer">muze</a>
134133
<a class="footer__link--instagram" href="https://www.instagram.com/eww.york/" target="_blank" rel="noopener noreferrer">trash</a>

0 commit comments

Comments
 (0)