Skip to content

Commit 072df66

Browse files
zesamerizesameri
committed
Add shapes container with 4 synchronized circles and fix rectangle animation
- Add shapes-container with 4 circles (blue, red, yellow, teal) positioned at 12.5vh, 37.5vh, 62.5vh, 87.5vh - Circles are evenly spaced with circumferences touching (25vh diameter spacing) - Fix rectangle animation to sync with smaller circle timing and positioning - Update crumple__rect positioning from -25vh to -12.5vh to match circle movement - Maintain blue gradient background and fuschia rectangle reveal for writings link - Use body:has() selectors for proper animation targeting - All animations use 1.5s cubic-bezier(0.4, 0, 0.2, 1) timing for smooth movement
1 parent 8becda9 commit 072df66

File tree

2 files changed

+116
-23
lines changed

2 files changed

+116
-23
lines changed

‎css/crumple.css‎

Lines changed: 110 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -363,48 +363,113 @@
363363

364364
@-webkit-keyframes circle-one {
365365
0% {
366-
-webkit-clip-path: circle(25vh at -25vh 25%);
367-
clip-path: circle(25vh at -25vh 25%);
366+
-webkit-clip-path: circle(12.5vh at -12.5vh 12.5vh);
367+
clip-path: circle(12.5vh at -12.5vh 12.5vh);
368368
}
369369
100% {
370-
-webkit-clip-path: circle(25vh at calc(100vw + 25vh) 25%);
371-
clip-path: circle(25vh at calc(100vw + 25vh) 25%);
370+
-webkit-clip-path: circle(12.5vh at calc(100vw + 12.5vh) 12.5vh);
371+
clip-path: circle(12.5vh at calc(100vw + 12.5vh) 12.5vh);
372372
}
373373
}
374374

375375
@keyframes circle-one {
376376
0% {
377-
-webkit-clip-path: circle(25vh at -25vh 25%);
378-
clip-path: circle(25vh at -25vh 25%);
377+
-webkit-clip-path: circle(12.5vh at -12.5vh 12.5vh);
378+
clip-path: circle(12.5vh at -12.5vh 12.5vh);
379379
}
380380
100% {
381-
-webkit-clip-path: circle(25vh at calc(100vw + 25vh) 25%);
382-
clip-path: circle(25vh at calc(100vw + 25vh) 25%);
381+
-webkit-clip-path: circle(12.5vh at calc(100vw + 12.5vh) 12.5vh);
382+
clip-path: circle(12.5vh at calc(100vw + 12.5vh) 12.5vh);
383383
}
384384
}
385385

386386
@-webkit-keyframes circle-two {
387387
0% {
388-
-webkit-clip-path: circle(25vh at -25vh 75%);
389-
clip-path: circle(25vh at -25vh 75%);
388+
-webkit-clip-path: circle(12.5vh at -12.5vh 37.5vh);
389+
clip-path: circle(12.5vh at -12.5vh 37.5vh);
390390
}
391391
100% {
392-
-webkit-clip-path: circle(25vh at calc(100vw + 25vh) 75%);
393-
clip-path: circle(25vh at calc(100vw + 25vh) 75%);
392+
-webkit-clip-path: circle(12.5vh at calc(100vw + 12.5vh) 37.5vh);
393+
clip-path: circle(12.5vh at calc(100vw + 12.5vh) 37.5vh);
394394
}
395395
}
396396

397397
@keyframes circle-two {
398398
0% {
399-
-webkit-clip-path: circle(25vh at -25vh 75%);
400-
clip-path: circle(25vh at -25vh 75%);
399+
-webkit-clip-path: circle(12.5vh at -12.5vh 37.5vh);
400+
clip-path: circle(12.5vh at -12.5vh 37.5vh);
401401
}
402402
100% {
403-
-webkit-clip-path: circle(25vh at calc(100vw + 25vh) 75%);
404-
clip-path: circle(25vh at calc(100vw + 25vh) 75%);
403+
-webkit-clip-path: circle(12.5vh at calc(100vw + 12.5vh) 37.5vh);
404+
clip-path: circle(12.5vh at calc(100vw + 12.5vh) 37.5vh);
405405
}
406406
}
407407

408+
@-webkit-keyframes circle-three {
409+
0% {
410+
-webkit-clip-path: circle(12.5vh at -12.5vh 62.5vh);
411+
clip-path: circle(12.5vh at -12.5vh 62.5vh);
412+
}
413+
100% {
414+
-webkit-clip-path: circle(12.5vh at calc(100vw + 12.5vh) 62.5vh);
415+
clip-path: circle(12.5vh at calc(100vw + 12.5vh) 62.5vh);
416+
}
417+
}
418+
419+
@keyframes circle-three {
420+
0% {
421+
-webkit-clip-path: circle(12.5vh at -12.5vh 62.5vh);
422+
clip-path: circle(12.5vh at -12.5vh 62.5vh);
423+
}
424+
100% {
425+
-webkit-clip-path: circle(12.5vh at calc(100vw + 12.5vh) 62.5vh);
426+
clip-path: circle(12.5vh at calc(100vw + 12.5vh) 62.5vh);
427+
}
428+
}
429+
430+
@-webkit-keyframes circle-four {
431+
0% {
432+
-webkit-clip-path: circle(12.5vh at -12.5vh 87.5vh);
433+
clip-path: circle(12.5vh at -12.5vh 87.5vh);
434+
}
435+
100% {
436+
-webkit-clip-path: circle(12.5vh at calc(100vw + 12.5vh) 87.5vh);
437+
clip-path: circle(12.5vh at calc(100vw + 12.5vh) 87.5vh);
438+
}
439+
}
440+
441+
@keyframes circle-four {
442+
0% {
443+
-webkit-clip-path: circle(12.5vh at -12.5vh 87.5vh);
444+
clip-path: circle(12.5vh at -12.5vh 87.5vh);
445+
}
446+
100% {
447+
-webkit-clip-path: circle(12.5vh at calc(100vw + 12.5vh) 87.5vh);
448+
clip-path: circle(12.5vh at calc(100vw + 12.5vh) 87.5vh);
449+
}
450+
}
451+
452+
.shapes-container {
453+
content: "";
454+
position: absolute;
455+
top: 0;
456+
left: 0;
457+
display: block;
458+
width: 100%;
459+
height: 100%;
460+
z-index: 2;
461+
}
462+
463+
.circle-one, .circle-two, .circle-three, .circle-four {
464+
content: "";
465+
position: absolute;
466+
top: 0;
467+
left: 0;
468+
display: block;
469+
width: 100%;
470+
height: 100%;
471+
}
472+
408473
@media (hover: hover) {
409474
.footer:hover ~ .crumple {
410475
z-index: 0;
@@ -440,24 +505,46 @@
440505
animation: gradient 30s ease infinite;
441506
}
442507

508+
body:has(.footer__link--writings:hover) .crumple {
509+
background: #1E90FF;
510+
background: -webkit-linear-gradient(45deg, #1E90FF, #00BFFF);
511+
background: linear-gradient(45deg, #1E90FF, #00BFFF);
512+
background-size: 400% 400%;
513+
z-index: 0;
514+
}
515+
516+
body:has(.footer__link--writings:hover) .crumple:after {
517+
background-color: transparent;
518+
}
519+
443520
body:has(.footer__link--writings:hover) .crumple .crumple__rect {
444521
-webkit-animation: rectangle-reveal 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
445522
animation: rectangle-reveal 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
446523
background-color: #e619c4;
447524
}
448525

449-
body:has(.footer__link--writings:hover) .crumple:after {
526+
body:has(.footer__link--writings:hover) .crumple .shapes-container .circle-one {
450527
-webkit-animation: circle-one 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
451528
animation: circle-one 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
452-
background-color: #222;
453-
z-index: 2;
529+
background-color: #1E90FF;
454530
}
455531

456-
body:has(.footer__link--writings:hover) .crumple:before {
532+
body:has(.footer__link--writings:hover) .crumple .shapes-container .circle-two {
457533
-webkit-animation: circle-two 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
458534
animation: circle-two 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
459535
background-color: #ff6347;
460-
z-index: 2;
536+
}
537+
538+
body:has(.footer__link--writings:hover) .crumple .shapes-container .circle-three {
539+
-webkit-animation: circle-three 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
540+
animation: circle-three 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
541+
background-color: #eaff47;
542+
}
543+
544+
body:has(.footer__link--writings:hover) .crumple .shapes-container .circle-four {
545+
-webkit-animation: circle-four 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
546+
animation: circle-four 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
547+
background-color: #19e6a1;
461548
}
462549

463550
body:has(.footer__link--github:hover) .crumple:after {
@@ -509,9 +596,9 @@
509596
.crumple__rect {
510597
content: "";
511598
position: absolute;
512-
left: calc(-25vh);
599+
left: calc(-12.5vh);
513600
display: block;
514-
width: calc(100vw + 50vh);
601+
width: calc(100vw + 25vh);
515602
height: 100%;
516603
background-color: transparent;
517604
z-index: 0;

‎index.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,12 @@ <h1 class="header">
6464
</div>
6565
<div class="crumple" aria-hidden="">
6666
<div class="crumple__rect"></div>
67+
<div class="shapes-container">
68+
<div class="circle-one"></div>
69+
<div class="circle-two"></div>
70+
<div class="circle-three"></div>
71+
<div class="circle-four"></div>
72+
</div>
6773
</div>
6874
</body>
6975
</html>

0 commit comments

Comments
 (0)