Skip to content

Commit 5e7a895

Browse files
zesamerizesameri
committed
Implement hover-based video playback for desktop and fallback color animations for mobile; update crumple styles and JavaScript functionality in index.html and crumple.css.
1 parent b7d3276 commit 5e7a895

File tree

2 files changed

+111
-17
lines changed

2 files changed

+111
-17
lines changed

‎css/crumple.css‎

Lines changed: 77 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -536,58 +536,63 @@
536536
background-color: #210120;
537537
}
538538

539-
body:not(#trash):not(#essays):not(#poems):has(.footer__link--writings:hover) .crumple {
539+
/* Videos for home page only (desktop with hover) */
540+
body.has-hover:not(#trash):not(#essays):not(#poems):has(.footer__link--writings:hover) .crumple {
540541
background: transparent;
541542
z-index: 2;
542543
}
543544

544-
body:not(#trash):not(#essays):not(#poems):has(.footer__link--writings:hover) .crumple-video--writings {
545+
body.has-hover:not(#trash):not(#essays):not(#poems):has(.footer__link--writings:hover) .crumple-video--writings {
545546
opacity: 1;
546547
-webkit-animation: e 1s 0s linear reverse forwards;
547548
animation: e 1s 0s linear reverse forwards;
548549
}
549550

550-
/* Videos for home page only */
551-
body:not(#trash):not(#essays):not(#poems):has(.footer__link--github:hover) .crumple {
551+
body.has-hover:not(#trash):not(#essays):not(#poems):has(.footer__link--github:hover) .crumple {
552552
z-index: 2;
553553
}
554554

555-
body:not(#trash):not(#essays):not(#poems):has(.footer__link--github:hover) .crumple-video--github {
555+
body.has-hover:not(#trash):not(#essays):not(#poems):has(.footer__link--github:hover) .crumple-video--github {
556556
opacity: 1;
557557
-webkit-animation: b 1s .25s linear reverse forwards;
558558
animation: b 1s .25s linear reverse forwards;
559559
}
560560

561-
body:not(#trash):not(#essays):not(#poems):has(.footer__link--playlists:hover) .crumple {
561+
body.has-hover:not(#trash):not(#essays):not(#poems):has(.footer__link--playlists:hover) .crumple {
562562
z-index: 2;
563563
}
564564

565-
body:not(#trash):not(#essays):not(#poems):has(.footer__link--playlists:hover) .crumple-video--playlists {
565+
body.has-hover:not(#trash):not(#essays):not(#poems):has(.footer__link--playlists:hover) .crumple-video--playlists {
566566
opacity: 1;
567567
-webkit-animation: c 1s .25s linear reverse forwards;
568568
animation: c 1s .25s linear reverse forwards;
569569
}
570570

571-
body:not(#trash):not(#essays):not(#poems):has(.footer__link--instagram:hover) .crumple {
571+
body.has-hover:not(#trash):not(#essays):not(#poems):has(.footer__link--instagram:hover) .crumple {
572572
z-index: 2;
573573
}
574574

575-
body:not(#trash):not(#essays):not(#poems):has(.footer__link--instagram:hover) .crumple-video--instagram {
575+
body.has-hover:not(#trash):not(#essays):not(#poems):has(.footer__link--instagram:hover) .crumple-video--instagram {
576576
opacity: 1;
577577
-webkit-animation: f 1s .25s linear reverse forwards;
578578
animation: f 1s .25s linear reverse forwards;
579579
}
580580

581-
body:not(#trash):not(#essays):not(#poems):has(.footer__link--alhambra:hover) .crumple {
581+
body.has-hover:not(#trash):not(#essays):not(#poems):has(.footer__link--alhambra:hover) .crumple {
582582
z-index: 2;
583583
}
584584

585-
body:not(#trash):not(#essays):not(#poems):has(.footer__link--alhambra:hover) .crumple-video--alhambra {
585+
body.has-hover:not(#trash):not(#essays):not(#poems):has(.footer__link--alhambra:hover) .crumple-video--alhambra {
586586
opacity: 1;
587587
-webkit-animation: d 1s .25s linear reverse forwards;
588588
animation: d 1s .25s linear reverse forwards;
589589
}
590590

591+
/* Mobile fallback: hide videos, use colors for home page */
592+
body.no-hover .crumple-video {
593+
display: none;
594+
}
595+
591596
/* Colors for other pages (trash, writings, poems) */
592597
/* First link (blue) - using nth-child(3n+1) */
593598
body#trash:has(.footer > a:nth-child(3n+1):hover) .crumple,
@@ -636,6 +641,67 @@
636641
-webkit-animation: c 1s 0s linear reverse forwards;
637642
animation: c 1s 0s linear reverse forwards;
638643
}
644+
645+
/* Mobile home page: use colors instead of videos */
646+
/* First link (blue) - writing */
647+
body.no-hover:not(#trash):not(#essays):not(#poems):has(.footer__link--writings:hover) .crumple {
648+
z-index: 2;
649+
}
650+
651+
body.no-hover:not(#trash):not(#essays):not(#poems):has(.footer__link--writings:hover) .crumple:after {
652+
background-color: #020121;
653+
opacity: 1;
654+
-webkit-animation: e 1s 0s linear reverse forwards;
655+
animation: e 1s 0s linear reverse forwards;
656+
}
657+
658+
/* Second link (green) - alhambra */
659+
body.no-hover:not(#trash):not(#essays):not(#poems):has(.footer__link--alhambra:hover) .crumple {
660+
z-index: 2;
661+
}
662+
663+
body.no-hover:not(#trash):not(#essays):not(#poems):has(.footer__link--alhambra:hover) .crumple:after {
664+
background-color: #012118;
665+
opacity: 1;
666+
-webkit-animation: b 1s 0s linear reverse forwards;
667+
animation: b 1s 0s linear reverse forwards;
668+
}
669+
670+
/* Third link (purple) - muze */
671+
body.no-hover:not(#trash):not(#essays):not(#poems):has(.footer__link--playlists:hover) .crumple {
672+
z-index: 2;
673+
}
674+
675+
body.no-hover:not(#trash):not(#essays):not(#poems):has(.footer__link--playlists:hover) .crumple:after {
676+
background-color: #210120;
677+
opacity: 1;
678+
-webkit-animation: c 1s 0s linear reverse forwards;
679+
animation: c 1s 0s linear reverse forwards;
680+
}
681+
682+
/* Fourth link (blue) - instagram */
683+
body.no-hover:not(#trash):not(#essays):not(#poems):has(.footer__link--instagram:hover) .crumple {
684+
z-index: 2;
685+
}
686+
687+
body.no-hover:not(#trash):not(#essays):not(#poems):has(.footer__link--instagram:hover) .crumple:after {
688+
background-color: #020121;
689+
opacity: 1;
690+
-webkit-animation: e 1s 0s linear reverse forwards;
691+
animation: e 1s 0s linear reverse forwards;
692+
}
693+
694+
/* Fifth link (green) - github */
695+
body.no-hover:not(#trash):not(#essays):not(#poems):has(.footer__link--github:hover) .crumple {
696+
z-index: 2;
697+
}
698+
699+
body.no-hover:not(#trash):not(#essays):not(#poems):has(.footer__link--github:hover) .crumple:after {
700+
background-color: #012118;
701+
opacity: 1;
702+
-webkit-animation: b 1s 0s linear reverse forwards;
703+
animation: b 1s 0s linear reverse forwards;
704+
}
639705
}
640706

641707
@-webkit-keyframes rectangle-reveal {

‎index.html‎

Lines changed: 34 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -74,21 +74,49 @@ <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-
<video class="crumple-video crumple-video--writings" autoplay muted loop playsinline>
77+
78+
<div class="crumple" aria-hidden="">
79+
<video class="crumple-video crumple-video--writings" muted loop playsinline preload="none">
7880
<source src="./assets/videos/PXL_20220605_192330465.mp4" type="video/mp4">
7981
</video>
80-
<video class="crumple-video crumple-video--alhambra" autoplay muted loop playsinline>
82+
<video class="crumple-video crumple-video--alhambra" muted loop playsinline preload="none">
8183
<source src="./assets/videos/IMG_4943.MOV" type="video/mp4">
8284
</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 class="crumple-video crumple-video--playlists" muted loop playsinline preload="none">
8586
<source src="./assets/videos/20180226_180744.mp4" type="video/mp4">
8687
</video>
87-
<video class="crumple-video crumple-video--instagram" autoplay muted loop playsinline>
88+
<video class="crumple-video crumple-video--instagram" muted loop playsinline preload="none">
8889
<source src="./assets/videos/IMG_1624.MOV" type="video/mp4">
8990
</video>
90-
<video class="crumple-video crumple-video--github" autoplay muted loop playsinline>
91+
<video class="crumple-video crumple-video--github" muted loop playsinline preload="none">
9192
<source src="./assets/videos/IMG_7555.MOV" type="video/mp4">
9293
</video>
94+
</div>
95+
96+
<script>
97+
// Only enable video crumples on devices with hover capability (desktop)
98+
// On mobile/touch devices, fall back to color-based crumples
99+
if (window.matchMedia('(hover: hover)').matches) {
100+
document.body.classList.add('has-hover');
101+
102+
// Play videos on hover to save bandwidth
103+
const footerLinks = document.querySelectorAll('.footer a');
104+
const videos = document.querySelectorAll('.crumple-video');
105+
106+
footerLinks.forEach((link, index) => {
107+
const videoClass = link.className.replace('footer__link--', 'crumple-video--');
108+
const video = document.querySelector('.' + videoClass);
109+
110+
if (video) {
111+
link.addEventListener('mouseenter', () => {
112+
video.play().catch(e => console.log('Video play failed:', e));
113+
});
114+
}
115+
});
116+
} else {
117+
// Mobile: Use color-based crumples instead
118+
document.body.classList.add('no-hover');
119+
}
120+
</script>
93121
</body>
94122
</html>

0 commit comments

Comments
 (0)