<main>
<div class="intro">
Scroll down :) <br />
Till the end for victory
</div>
</main>
<section class="chicky-run-container">
<svg class="chick-in-shell" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 108.49 153.93" aria-hidden="true">
<g fill="#010101">
<path d="m108.39 84.79-.35-8.01L97.1 87.32l-7.67-7.39c-.93-4.48-2.03-8.67-3.1-12.42-1.12-3.93-2.2-7.39-2.99-10.13 1.15-1.51 2.18-3.11 3.09-4.79 2.13-.7 11.99-3.92 16.38-4.8-2.73-7.27-10.87-11.19-12.17-11.78v-.26c0-4.93-1-9.64-2.81-13.92A35.817 35.817 0 0 0 74.88 6.11C69.2 2.25 62.3 0 54.91 0c-4.93 0-9.64 1-13.92 2.81a35.817 35.817 0 0 0-15.72 12.95 35.65 35.65 0 0 0-6.11 19.99c0 6.48 1.74 12.57 4.76 17.81l-7.13 28.85-5.1 4.91-11.2-10.8-.37 7.98C.05 86.1 0 87.71 0 89.35c0 11.21 1.67 20.87 4.64 29.07 2.23 6.15 5.19 11.47 8.71 15.98 5.28 6.76 11.79 11.68 18.84 14.86 7.05 3.19 14.61 4.67 22.06 4.67 6.63 0 13.34-1.17 19.7-3.67 4.77-1.88 9.34-4.5 13.49-7.93 6.24-5.14 11.54-12.09 15.24-20.9 3.7-8.81 5.81-19.47 5.81-32.07 0-1.54-.04-3.06-.1-4.57ZM30.84 51.03a28.367 28.367 0 0 1-4.45-15.28c0-3.95.8-7.69 2.24-11.1 2.16-5.11 5.78-9.47 10.33-12.55A28.396 28.396 0 0 1 54.9 7.23c3.95 0 7.69.8 11.1 2.24 5.11 2.16 9.47 5.78 12.55 10.34a28.318 28.318 0 0 1 4.87 15.94c0 7.06-2.56 13.49-6.81 18.48l-1.23 1.45.49 1.84c.87 3.23 2.17 7.28 3.51 11.98.54 1.88 1.07 3.86 1.59 5.92l-12.35 11.9-14.24-13.73-14.24 13.73L26.3 73.98l5.35-21.64-.83-1.31Zm66.21 64.92c-1.98 5.48-4.58 10.11-7.61 13.99-4.55 5.82-10.08 9.99-16.12 12.72-6.04 2.74-12.58 4.03-19.08 4.03-5.77 0-11.59-1.02-17.05-3.17a42.56 42.56 0 0 1-11.54-6.78c-5.32-4.4-9.89-10.33-13.17-18.12-2.92-6.94-4.8-15.38-5.18-25.48l4.38 4.22 9.6-9.26 1.45.36.57-2.3 2.62-2.53 14.24 13.73L54.4 83.63l14.24 13.73 14.18-13.67c.09.46.18.93.26 1.4l1.1-.19 12.93 12.47 2.51-2.42 1.56-1.51c-.35 8.72-1.83 16.19-4.12 22.52Z" />
<path class="chicky-eye" d="M57.1 40.86c3.63 0 6.57-2.94 6.57-6.57s-2.94-6.57-6.57-6.57-6.57 2.94-6.57 6.57 2.94 6.57 6.57 6.57Z" />
</g>
<path fill="#fff" d="M97.1 97.36 84.17 84.89s-1.28-.74-1.36-1.2L68.63 97.36 54.39 83.63 40.15 97.36 25.91 83.63l-2.62 2.53-2.01 1.94-9.6 9.26-4.38-4.22c.38 10.1 2.26 18.54 5.18 25.48 3.28 7.79 7.85 13.73 13.17 18.12a42.56 42.56 0 0 0 11.54 6.78c5.46 2.15 11.28 3.17 17.05 3.17 6.49 0 13.04-1.3 19.08-4.03 6.04-2.74 11.57-6.9 16.12-12.72 3.03-3.88 5.63-8.52 7.61-13.99 2.3-6.33 3.77-13.8 4.12-22.52l-1.56 1.51-2.51 2.42Z" />
<path fill="#f3bd19" d="M40.16 87.32 54.4 73.59l14.24 13.73 12.35-11.9c-.52-2.06-1.06-4.04-1.59-5.92-1.34-4.7-2.64-8.75-3.51-11.98l-.49-1.84 1.23-1.45c4.25-4.99 6.8-11.42 6.81-18.48 0-5.92-1.79-11.38-4.87-15.94A28.767 28.767 0 0 0 66.02 9.47a28.428 28.428 0 0 0-11.1-2.24c-5.92 0-11.39 1.79-15.94 4.87a28.677 28.677 0 0 0-10.33 12.55 28.428 28.428 0 0 0-2.24 11.1c0 5.64 1.63 10.86 4.45 15.28l.83 1.31-5.35 21.64 13.84 13.34Zm16.94-59.6c3.63 0 6.57 2.94 6.57 6.57s-2.94 6.57-6.57 6.57-6.57-2.94-6.57-6.57 2.94-6.57 6.57-6.57Z" />
</svg>
<svg class="eggshell" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 108.11 80.54" aria-hidden="true">
<path d="M99.91,20.7l-15.3-15.61-15.17,15.61-15.23-15.68-15.23,15.68L23.73,5.02l-2.8,2.88-2.16,2.22-10.27,10.58L3.82,15.88c.41,11.54,2.42,21.17,5.54,29.1,3.51,8.9,8.4,15.68,14.09,20.7,3.8,3.34,7.97,5.9,12.35,7.75,5.84,2.45,12.07,3.62,18.24,3.62,6.95,0,13.96-1.48,20.41-4.6,6.46-3.13,12.38-7.88,17.25-14.53,3.24-4.43,6.02-9.72,8.14-15.98,2.46-7.23,4.04-15.76,4.41-25.71l-1.67,1.72-2.69,2.76Z" fill="#fff" stroke="#010101" stroke-miterlimit="10" stroke-width="7" />
</svg>
<svg class="chicky-walk" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 139.99 154.26" aria-hidden="true">
<path d="M122.94,41.18c.97-51.24-76.27-39-52.67,17.75,.1,3.97-4.34,6.12-7.81,6.05-26.67-2.87-75.9-3.69-42.67,32.57,9.5,4.29,20.33,6.37,27.5,6.09,1.15,0,2.25,.62,2.71,1.68,2.72,9.08-23,2.14-28.55,.36,17.75,43.95,80.13,30.39,81.02-15.67-2.86-34.97-1.12-16.09,16.37-37.33,2.68-.02,6.03-.1,8.3-.33,1.19-.11,2.23-.24,3.09-.39-1.53-3.94-3.9-7.79-7.27-10.76Z" fill="#f3bd19" />
<g>
<path d="M139.99,52.63c-1.87-5.05-3.42-9.49-8.12-15C126.86-24.51,38.76-3.7,61.38,56.5c-37.75-4.81-85.58,3.38-47.28,47.49,5.52,9.8,11.13,21.31,20.75,27.61,31.03,22.67,77.14-3.12,76.19-41.35h0c.3-5.98-1.76-13.74-.97-19.5,5.28-2.39,9.87-5.96,13.47-10.38,6.33-.69,16.62,.5,16.45-7.74Zm-12.86-.29c-2.27,.22-5.61,.31-8.3,.33-17.51,21.27-19.23,2.31-16.35,37.46v-.44c-.62,46.31-63.25,60.03-81.04,15.98,5.56,1.78,31.27,8.72,28.55-.36-.45-1.05-1.56-1.68-2.71-1.68-7.16,.29-18-1.8-27.5-6.09C-13.43,61.29,35.8,62.1,62.47,64.98c3.47,.07,7.91-2.08,7.81-6.05C46.68,2.17,123.92-10.07,122.95,41.18c3.37,2.97,5.74,6.82,7.27,10.76-.86,.15-1.9,.29-3.08,.39Z" fill="#010101" />
<path class="chicky-eye" d="M101.97,33.37c-2.56,0-4.63,2.07-4.63,4.63s2.07,4.63,4.63,4.63,4.63-2.08,4.63-4.63c0-2.56-2.07-4.63-4.63-4.63Z" fill="#010101" />
<path class="leg-left" d="M57.05,138.3l-7.62,15.96h23.05v-7h-11.95l3.7-7.76" fill="#010101" />
<path class="leg-right" d="M80.76,134.62l9.58,15.06,18.72-6.61-2.31-6.55-13.52,4.77-6.39-10.03" fill="#010101" />
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 146.96 148.25" class="victory-chicky" aria-hidden="true">
<g fill="#010101">
<path d="M136.41 45.34c-2.2.51-7.09 4.3-10.1 6.63-7.02 5.44-14.27 11.07-20.95 8.19-6.15-2.65-6.95-10.72-7.21-13.38-.05-.53-.02-1.06.09-1.58 2.77-13.06-.3-23.62-8.64-29.73-8.72-6.4-21.74-6.95-31.66-1.35-9.63 5.44-14.3 15.44-13.16 28.17.01.14.02.28.02.43.09 12.3-10.77 14.16-14.85 14.86-.64.11-1.5.26-1.82.36-.43.19-.89.32-1.36.39-5.06.72-10.22-1.22-14.38-2.78-.48-.18-1.05-.39-1.61-.6.11.47.25 1.01.43 1.63 3.42 11.93 13.69 13.85 18.07 14.67 1.86.35 4.17.78 5.39 3.24.43.87.61 1.85.51 2.82-2.71 26.77 11.84 39.09 18.23 43.15 11.23 7.13 24.79 7.62 35.38 1.27 7.74-4.64 20.36-17.09 18-48.37-.21-2.85 1.92-5.33 4.76-5.54 1.19-.09 2.31.23 3.23.84 1.05.24 2.03.8 2.78 1.68 1.21 1.41 2.31 1.96 4.67.84 7.22-3.43 15.34-17.96 14.32-25.44-.06-.16-.12-.29-.17-.39Zm-74.57-4.06a5.17 5.17 0 0 1-5.17-5.17v-3.45c0-2.85 2.31-5.17 5.17-5.17s5.17 2.31 5.17 5.17v3.45a5.17 5.17 0 0 1-5.17 5.17Zm15.51 12.06c0 2.85-2.31 5.17-5.17 5.17s-5.17-2.31-5.17-5.17v-2.3c0-2.85 2.31-5.17 5.17-5.17s5.17 2.31 5.17 5.17v2.3Zm11.49-17.23c0 2.85-2.31 5.17-5.17 5.17s-5.17-2.31-5.17-5.17v-3.45c0-2.85 2.31-5.17 5.17-5.17s5.17 2.31 5.17 5.17v3.45Z" />
<path d="M146.52 42.88c-1.61-4.97-4.59-6.83-6.82-7.51-6.32-1.95-12.84 3.1-19.73 8.44-2.92 2.27-8.22 6.37-10.43 6.77-.25-.47-.72-1.61-1.03-4.05 3.28-16.66-1.36-30.98-12.81-39.38C83.81-1.57 66.19-2.4 52.85 5.13c-13.12 7.41-19.82 21.2-18.39 37.86-.02 2.66-.84 3.47-6.26 4.4-1.18.2-2.31.4-3.36.74-2.43.12-5.96-1.19-8.82-2.27-4.81-1.81-9.78-3.67-13.55-.2-3.59 3.31-2.62 8.82-1.2 13.76 4.45 15.49 16.66 19.87 23.31 21.41-.76 20.63 7.75 38.48 23.29 48.35 1.75 1.11 3.55 2.08 5.39 2.94l-.33-.7 8.19-1.36 2.65 5.55c2.91.59 5.85.91 8.78.91 3.12 0 6.21-.36 9.24-1.03l2.59-5.43 8.19 1.36-.02.04c.53-.28 1.05-.56 1.57-.87 8.92-5.35 23-18.56 23.31-48.75 2.91.61 6.07.18 9.26-1.33 11.48-5.46 22.14-25.14 20-36.96-.04-.23-.1-.45-.17-.67ZM28.22 57.9s-.02 0-.03.01c.01 0 .02 0 .03-.01Zm94.03 13.28c-2.36 1.12-3.46.57-4.67-.84a5.134 5.134 0 0 0-2.78-1.68c-.92-.61-2.04-.93-3.23-.84-2.85.21-4.98 2.7-4.76 5.54 2.36 31.28-10.27 43.73-18 48.37-10.59 6.35-24.15 5.86-35.38-1.27-6.38-4.06-20.94-16.38-18.23-43.15.1-.97-.08-1.95-.51-2.82-1.22-2.46-3.54-2.89-5.39-3.24-4.38-.82-14.65-2.74-18.07-14.67-.18-.61-.32-1.15-.43-1.63.57.2 1.13.42 1.61.6 4.15 1.56 9.32 3.5 14.38 2.78.47-.07.92-.2 1.36-.39.32-.1 1.18-.25 1.82-.36 4.09-.7 14.94-2.56 14.85-14.86 0-.14 0-.28-.02-.43-1.15-12.73 3.53-22.73 13.16-28.17 9.92-5.6 22.94-5.05 31.66 1.35 8.34 6.11 11.4 16.67 8.64 29.73-.11.52-.14 1.05-.09 1.58.26 2.65 1.06 10.73 7.21 13.38 6.67 2.87 13.93-2.76 20.95-8.19 3.01-2.33 7.9-6.13 10.1-6.63.05.1.11.23.17.39 1.02 7.47-7.11 22.01-14.32 25.44Z" />
<path d="M75.69 148.25h26.27v-7.98H88.34l4.2-8.81c-3.42 1.85-7.04 3.2-10.76 4.02l-6.09 12.77Z" />
<path d="m84.37 130.06-2.59 5.43c3.73-.83 7.34-2.17 10.76-4.02l.02-.04-8.19-1.36ZM57.15 140.28H43.53v7.98H69.8l-6.03-12.64c-3.57-.72-7.09-1.88-10.51-3.49l3.89 8.15Z" />
<path d="m52.93 131.43.33.7c3.41 1.6 6.94 2.76 10.51 3.49l-2.65-5.55-8.19 1.36Z" />
</g>
<path fill="#f3bd19" d="M135.84 45.38c-2.2.51-7.09 4.3-10.1 6.63-7.02 5.44-14.27 11.07-20.95 8.19-6.15-2.65-6.95-10.72-7.21-13.38-.05-.53-.02-1.06.09-1.58 2.77-13.06-.3-23.62-8.64-29.73-8.72-6.4-21.74-6.95-31.66-1.35-9.63 5.44-14.3 15.44-13.16 28.17.01.14.02.28.02.43.09 12.3-10.77 14.16-14.85 14.86-.64.11-1.5.26-1.82.36-.43.19-.89.32-1.36.39-5.06.72-10.22-1.22-14.38-2.78-.48-.18-1.05-.39-1.61-.6.11.47.25 1.01.43 1.63 3.42 11.93 13.69 13.85 18.07 14.67 1.86.35 4.17.78 5.39 3.24.43.87.61 1.85.51 2.82-2.71 26.77 11.84 39.09 18.23 43.15 11.23 7.13 24.79 7.62 35.38 1.27 7.74-4.64 20.36-17.09 18-48.37-.21-2.85 1.92-5.33 4.76-5.54 1.19-.09 2.31.23 3.23.84 1.05.24 2.03.8 2.78 1.68 1.21 1.41 2.31 1.96 4.67.84 7.22-3.43 15.34-17.96 14.32-25.44-.06-.16-.12-.29-.17-.39Z" />
<path fill="#010101" d="M66.43 30.95c0-2.85-2.31-5.17-5.17-5.17s-5.17 2.31-5.17 5.17v3.45c0 2.85 2.31 5.17 5.17 5.17s5.17-2.31 5.17-5.17v-3.45ZM83.09 25.78a5.17 5.17 0 0 0-5.17 5.17v3.45c0 2.85 2.31 5.17 5.17 5.17s5.17-2.31 5.17-5.17v-3.45a5.17 5.17 0 0 0-5.17-5.17ZM66.43 49.04l5.74 6.7 4.77-6.7H66.43z" />
</svg>
</section>
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
.chicky-in-egg {
display: none;
}
.chicky-run-container {
position: fixed;
width: 100%;
height: 90px;
bottom: 0;
background: #EDF2F4;
}
.chicky-walk {
display: block;
height: 80px;
position: relative;
top: 10px;
margin-left: -80px;
@supports (animation-timeline: view()) {
animation-direction: alternate;
animation-timing-function: linear;
animation-name: moveChicky;
animation-timeline: scroll(root);
}
}
.leg-left {
transform-origin: top center;
animation-duration: 1s;
animation-direction: normal;
animation-timing-function: linear;
animation-name: moveLegLeft;
animation-timeline: scroll(root);
}
.leg-right {
transform-origin: top center;
animation-duration: 1s;
animation-direction: normal;
animation-timing-function: linear;
animation-name: moveLegRight;
animation-timeline: scroll(root);
}
.eggshell {
display: none;
@supports (scroll-timeline: works) {
display: block;
position: fixed;
left: 0;
bottom: 0;
display: block;
height: 50px;
animation-duration: 1s;
animation-direction: normal;
animation-name: eggShell;
animation-timeline: scroll(root);
z-index: 10;
}
}
.chick-in-shell {
position: fixed;
left: 5px;
bottom: 0;
display: block;
height: 85px;
z-index: 10;
animation-duration: 1s;
animation-direction: normal;
animation-name: shellChicky;
animation-timeline: scroll(root);
}
.victory-chicky {
position: fixed;
right: 0;
bottom: 0;
display: block;
height: 80px;
opacity: 0;
animation-duration: 1s;
animation-direction: normal;
animation-name: victoryChicky;
animation-timeline: scroll(root);
}
.chicky-eye {
transform-origin: center;
animation: blink 8s infinite;
@media (prefers-reduced-motion) {
animation: none;
}
}
@keyframes moveChicky {
0%,
2% {
opacity: 0;
transform: translateX(80px);
}
3% {
opacity: 1;
transform: translateX(80px);
}
92% {
opacity: 1;
transform: translateX(100vw);
}
93%,
100% {
opacity: 0;
transform: translateX(100vw);
}
}
@keyframes shellChicky {
0%,
2% {
opacity: 1;
}
3%,
100% {
opacity: 0;
}
}
@keyframes eggShell {
0%,
2% {
opacity: 0;
}
3%,
100% {
opacity: 1;
}
8%,
100% {
transform: translateY(100%);
opacity: 1;
}
}
@keyframes victoryChicky {
0%,
93% {
opacity: 0;
}
94%,
100% {
opacity: 1;
}
}
@keyframes blink {
0%,
7.5%,
12.5%,
100% {
opacity: 1;
}
5%,
10% {
opacity: 0.2;
}
}
@keyframes moveLegRight {
0%,
10%,
20%,
30%,
40%,
50%,
60%,
70%,
80%,
90%,
100% {
transform: translate(0) rotate(0);
}
2.5%,
12.5%,
22.5%,
32.5%,
42.5%,
52.5%,
62.5%,
72.5%,
82.5%,
92.5% {
transform: translate(-4px, 2px) rotate(0);
}
5%,
15%,
25%,
35%,
45%,
55%,
65%,
75%,
85%,
95% {
transform: translate(-15px, 5px) rotate(4deg);
}
7.5%,
17.5%,
27.5%,
37.5%,
47.5%,
57.5%,
67.5%,
77.5%,
87.5%,
97.5% {
transform: translate(-4px, 2px) rotate(0);
}
}
@keyframes moveLegLeft {
0%,
10%,
20%,
30%,
40%,
50%,
60%,
70%,
80%,
90%,
100% {
transform: rotate(0);
}
2.5%,
12.5%,
22.5%,
32.5%,
42.5%,
52.5%,
62.5%,
72.5%,
82.5%,
92.5% {
transform: rotate(5deg);
}
5%,
15%,
25%,
35%,
45%,
55%,
65%,
75%,
85%,
95% {
transform: rotate(0);
}
7.5%,
17.5%,
27.5%,
37.5%,
47.5%,
57.5%,
67.5%,
77.5%,
87.5%,
97.5% {
transform: rotate(-5deg);
}
}
@media (prefers-reduced-motion) {
.chicky-run-container * {
animation: none;
}
}
/* general styling */
body {
margin: 0;
padding: 0;
height: 2500px;
font-family: "Poppins", sans-serif;
background: #8D99AE;
}
main {
text-align: center;
padding-top: 50px;
font-size: 2rem;
}
.intro {
display: inline-block;
padding: 30px;
border-radius: 10px;
background: #EDF2F4;
}