Currently, I am working on creating an animation that involves text resizing based on scrolling direction. The idea is that when scrolling down, the text decreases in size, and when scrolling up, it increases. Additionally, as the user scrolls down, the text should remain fixed in its position. However, I have encountered a problem where zooming in and out causes the text to become unlinked from its intended point. To better illustrate this issue, I have created a GIF which you can view here.
To showcase what is actually happening with the animation, please refer to this example image: Click here.
Here is the code snippet for achieving this effect:
<div class="main__logo">
<h1 id="logo">
Fashion
</h1>
</div>
And here is the corresponding CSS code:
.main__logo {
font-size: 200px;
position: fixed;
margin-top: 0;
}
.main__logo .logo__sticky {
position: fixed;
font-size: 24px;
margin-top: -80px;
}
#logo {
-webkit-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
Lastly, the jQuery script used for controlling the text resizing based on scroll direction:
$(window).scroll(function () {
if ($(this).scrollTop() > 80) {
$("#logo").addClass("logo__sticky");
} else {
$("#logo").removeClass("logo__sticky");
}
});