Skip to content

Commit 8becda9

Browse files
zesamerizesameri
committed
Fix crumple animation visibility and z-index hierarchy
- Move crumple element outside content-wrapper for proper background positioning - Update CSS selectors to use :has() pseudo-class for better targeting - Adjust z-index values to ensure text content remains visible - Fix hero section and footer visibility while maintaining animation effects
1 parent 615cfbe commit 8becda9

File tree

3 files changed

+85
-55
lines changed

3 files changed

+85
-55
lines changed

‎css/crumple.css‎

Lines changed: 42 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -334,7 +334,8 @@
334334
left: 0;
335335
width: 100vw;
336336
height: 100vh;
337-
pointer-events: none
337+
pointer-events: none;
338+
background: transparent;
338339
}
339340
.crumple:after {
340341
content: "";
@@ -345,6 +346,7 @@
345346
width: 100%;
346347
height: 100%;
347348
background-color: #222;
349+
z-index: 1;
348350
}
349351

350352
.crumple:before {
@@ -356,7 +358,7 @@
356358
width: 100%;
357359
height: 100%;
358360
background-color: transparent;
359-
z-index: 1;
361+
z-index: 2;
360362
}
361363

362364
@-webkit-keyframes circle-one {
@@ -404,64 +406,81 @@
404406
}
405407

406408
@media (hover: hover) {
407-
.footer > a:nth-child(odd):hover~.crumple {
408-
background: #1E90FF; /* fallback for old browsers */
409-
background: -webkit-linear-gradient(45deg, #1E90FF, #00BFFF); /* Chrome 10-25, Safari 5.1-6 */
410-
background: linear-gradient(45deg, #1E90FF, #00BFFF);
409+
.footer:hover ~ .crumple {
410+
z-index: 0;
411+
}
412+
413+
/* Use body-level selectors to target crumple */
414+
body:has(.footer > a:nth-child(odd):hover) .crumple {
415+
background: #1E90FF;
416+
background: -webkit-linear-gradient(45deg, #1E90FF, #00BFFF);
417+
background: linear-gradient(45deg, #1E90FF, #00BFFF);
411418
background-size: 400% 400%;
419+
z-index: 0;
412420
}
413-
.footer > a:nth-child(2n):hover~.crumple {
414-
background: #66CDAA; /* fallback for old browsers */
415-
background: -webkit-linear-gradient(45deg, #66CDAA, #20B2AA); /* Chrome 10-25, Safari 5.1-6 */
421+
422+
body:has(.footer > a:nth-child(2n):hover) .crumple {
423+
background: #66CDAA;
424+
background: -webkit-linear-gradient(45deg, #66CDAA, #20B2AA);
416425
background: linear-gradient(45deg, #19e6a1, #00d1c7);
417426
background-size: 400% 400%;
427+
z-index: 0;
418428
}
419-
.footer > a:nth-child(3n):hover~.crumple {
420-
background: #66CDAA; /* fallback for old browsers */
421-
background: -webkit-linear-gradient(45deg, #66CDAA, #20B2AA); /* Chrome 10-25, Safari 5.1-6 */
429+
430+
body:has(.footer > a:nth-child(3n):hover) .crumple {
431+
background: #66CDAA;
432+
background: -webkit-linear-gradient(45deg, #66CDAA, #20B2AA);
422433
background: linear-gradient(45deg, #ff6347, #ff4747);
423434
background-size: 400% 400%;
435+
z-index: 0;
424436
}
425-
.footer > a:hover~.crumple {
437+
438+
body:has(.footer > a:hover) .crumple {
426439
-webkit-animation: gradient 30s ease infinite;
427440
animation: gradient 30s ease infinite;
428441
}
429442

430-
.footer__link--writings:hover~.crumple .crumple__rect {
443+
body:has(.footer__link--writings:hover) .crumple .crumple__rect {
431444
-webkit-animation: rectangle-reveal 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
432445
animation: rectangle-reveal 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
446+
background-color: #e619c4;
433447
}
434448

435-
.footer__link--writings:hover~.crumple:after {
449+
body:has(.footer__link--writings:hover) .crumple:after {
436450
-webkit-animation: circle-one 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
437451
animation: circle-one 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
438452
background-color: #222;
439453
z-index: 2;
440454
}
441455

442-
.footer__link--writings:hover~.crumple:before {
456+
body:has(.footer__link--writings:hover) .crumple:before {
443457
-webkit-animation: circle-two 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
444458
animation: circle-two 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
445459
background-color: #ff6347;
446460
z-index: 2;
447461
}
448-
.footer__link--github:hover~.crumple:after {
462+
463+
body:has(.footer__link--github:hover) .crumple:after {
449464
-webkit-animation: b 1s .25s linear forwards;
450465
animation: b 1s .25s linear forwards
451466
}
452-
.footer__link--playlists:hover~.crumple:after {
467+
468+
body:has(.footer__link--playlists:hover) .crumple:after {
453469
-webkit-animation: c 1s .25s linear forwards;
454470
animation: c 1s .25s linear forwards
455471
}
456-
.footer__link--linkedin:hover~.crumple:after {
472+
473+
body:has(.footer__link--linkedin:hover) .crumple:after {
457474
-webkit-animation: e 1s .25s linear forwards;
458475
animation: e 1s .25s linear forwards
459476
}
460-
.footer__link--twitter:hover~.crumple:after {
477+
478+
body:has(.footer__link--twitter:hover) .crumple:after {
461479
-webkit-animation: e 1s .25s linear forwards;
462480
animation: e 1s .25s linear forwards
463481
}
464-
.footer__link--instagram:hover~.crumple:after {
482+
483+
body:has(.footer__link--instagram:hover) .crumple:after {
465484
-webkit-animation: f 1s .25s linear forwards;
466485
animation: f 1s .25s linear forwards
467486
}
@@ -494,12 +513,12 @@
494513
display: block;
495514
width: calc(100vw + 50vh);
496515
height: 100%;
497-
background-color: #19e6a1;
516+
background-color: transparent;
498517
z-index: 0;
499518
}
500519

501520
/* Crumple Animation */
502-
.footer__link--home:hover~.crumple:after {
521+
body:has(.footer__link--home:hover) .crumple:after {
503522
-webkit-animation: a 1s .25s linear forwards;
504523
animation: a 1s .25s linear forwards
505524
}

‎css/main.css‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,20 @@ body {
1515
display: block;
1616
}
1717

18+
.content-wrapper {
19+
position: relative;
20+
z-index: 3;
21+
min-height: 100vh;
22+
display: flex;
23+
flex-direction: column;
24+
}
25+
1826
section {
19-
z-index: 1;
27+
flex: 1;
2028
position: relative;
2129
display: flex;
2230
flex-direction: column;
2331
justify-content: space-between;
24-
min-height: 100vh;
2532
padding-top: 6vh;
2633
padding-left: 6vw;
2734
}
@@ -75,6 +82,7 @@ section {
7582
flex-direction: column;
7683
justify-content: flex-end;
7784
align-items: flex-end;
85+
z-index: 4;
7886
}
7987

8088
.footer > a {
@@ -89,6 +97,7 @@ section {
8997
flex-direction: column;
9098
justify-content: flex-end;
9199
align-items: flex-end;
100+
z-index: 4;
92101
}
93102

94103
.hero-footer > a {

‎index.html‎

Lines changed: 32 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -33,35 +33,37 @@
3333
<!-- <script src="./js/main.js" defer></script> -->
3434
</head>
3535
<body>
36-
<section class="hero">
37-
<div class="top-bar">
38-
<h1 class="header">
39-
<a class="simple-link" href="./index.html"> zesameri </a>
40-
<a class="simple-link" href="./secrets.html"> <img class="header-img" src="assets/images/flower.svg" alt="Flower"></a>
41-
</h1>
42-
</div>
43-
<div class="bio">
44-
<p>
45-
I felt intrigued to express a piece of me to the abyss of the Internet.
46-
To embrace expression, criticism, and the potential for a community for thoughts.
47-
Enjoy your stay, it is always under development.
48-
</p>
49-
<p class="signoff">
50-
love,
51-
<br>
52-
kvitka
53-
</p>
54-
</div>
55-
</section>
56-
<footer class="footer hero-footer" id="footer">
57-
<a class="footer__link--github" href="https://github.com/zesameri" target="_blank" rel="noopener noreferrer">code</a>
58-
<a class="footer__link--playlists" href="https://open.spotify.com/user/1286649958" target="_blank" rel="noopener noreferrer">muze</a>
59-
<a class="footer__link--linkedin" href="https://www.linkedin.com/in/merhoo/" target="_blank" rel="noopener noreferrer">work</a>
60-
<a class="footer__link--instagram" href="https://www.instagram.com/eww.york/" target="_blank" rel="noopener noreferrer">trash</a>
61-
<a class="footer__link--writings" href="./writings.html">writing</a>
62-
<div class="crumple" aria-hidden="">
63-
<div class="crumple__rect"></div>
64-
</div>
65-
</footer>
36+
<div class="content-wrapper">
37+
<section class="hero">
38+
<div class="top-bar">
39+
<h1 class="header">
40+
<a class="simple-link" href="./index.html"> zesameri </a>
41+
<a class="simple-link" href="./secrets.html"> <img class="header-img" src="assets/images/flower.svg" alt="Flower"></a>
42+
</h1>
43+
</div>
44+
<div class="bio">
45+
<p>
46+
I felt intrigued to express a piece of me to the abyss of the Internet.
47+
To embrace expression, criticism, and the potential for a community for thoughts.
48+
Enjoy your stay, it is always under development.
49+
</p>
50+
<p class="signoff">
51+
love,
52+
<br>
53+
kvitka
54+
</p>
55+
</div>
56+
</section>
57+
<footer class="footer hero-footer" id="footer">
58+
<a class="footer__link--github" href="https://github.com/zesameri" target="_blank" rel="noopener noreferrer">code</a>
59+
<a class="footer__link--playlists" href="https://open.spotify.com/user/1286649958" target="_blank" rel="noopener noreferrer">muze</a>
60+
<a class="footer__link--linkedin" href="https://www.linkedin.com/in/merhoo/" target="_blank" rel="noopener noreferrer">work</a>
61+
<a class="footer__link--instagram" href="https://www.instagram.com/eww.york/" target="_blank" rel="noopener noreferrer">trash</a>
62+
<a class="footer__link--writings" href="./writings.html">writing</a>
63+
</footer>
64+
</div>
65+
<div class="crumple" aria-hidden="">
66+
<div class="crumple__rect"></div>
67+
</div>
6668
</body>
6769
</html>

0 commit comments

Comments
 (0)