/* Select the text element that you want to stretch */
.stretch-text {
transform: scaleX(1);
transition: transform 0.4s ease-in-out;
}
/* On scroll, increase the scaleX value to stretch the text */
@media (min-width: 600px) {
body::before {
content: "";
height: 100vh;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: -1;
}
body::before {
animation: stretch-text 0.8s ease-in-out forwards;
}
@keyframes stretch-text {
0% {
transform: scaleX(1);
}
100% {
transform: scaleX(1.05);
}
}
}Portfolio