Hello, everyone!
Is there a framework or something else that makes it easy to move text (to the left or right) when the user scrolls (for example near the footer)? So a pure scroll animation.
Thank you in advance!
I tried Scrollmagic, but i cant handle it. :/
You can try gsap , however if you want to make it without a framework using scroll event you can try :
const first = document.getElementById("first")
const second = document.getElementById("second")
const third = document.getElementById("third")
const container = document.getElementById("container")
const rect = container.getBoundingClientRect()
const animate = (element,position) => {
element.style.transform = `translateX(${position}px)`
}
document.addEventListener('scroll', function(e) {
lastKnownScrollPosition = window.scrollY;
window.requestAnimationFrame(function() {
animate(first,lastKnownScrollPosition*.2)
animate(second,lastKnownScrollPosition*-.2)
animate(third,lastKnownScrollPosition*.2)
});
});body{
height: 200vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#container{
max-width: 100vw;
overflow: hidden;
}
h1{
transition: transform 0.2s linear;
}<body>
<div id="container">
<h1 id="first">
this is a text this is a text this is a text
</h1>
<h1 id="second">
this is a text this is a text this is a text
</h1>
<h1 id="third">
this is a text this is a text this is a text
</h1>
</div>
</body>This is a simple exemple to demonstrate the idea using jquery. gasp like @Chakib said before is a good solution.
function isVisible(el, plus, wrapper = window ){
var winFromTop = jQuery(wrapper).scrollTop();
var currentPosition = winFromTop + jQuery(wrapper).height();
var el = jQuery(`${el}`);
var elFromTop = el.length ? jQuery(el[0]).offset().top : jQuery(el).offset().top;
return (currentPosition + plus) > elFromTop
}
jQuery(window).scroll(function(e) {
var idElement = '.anime';
const visible = isVisible(idElement, -20)
if(visible){
console.log('=> ', idElement)
jQuery(idElement).addClass('resetX')
}
else {
jQuery(idElement).removeClass('resetX')
}
});body{
overflow-x: hidden
}
.container{
border: solid 1px red;
max-width: 800px;
margin: auto auto;
padding: 5px;
}
.above-the-fold{
background: linear-gradient(180deg, rgba(163,196,243,1) 27%, rgba(142,236,245,1) 100%);
height: calc(100vh + 300px);
margin-bottom: 30px;
}
.boxes{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.box{
margin: 10px;
height: 200px;
flex: 0 0 calc(50% - 30px);
background-color: #98f5e1;
}
.text{
font-size: 18px;
margin: 10px;
}
.anime{
transition: all .7s ease-in-out;
}
.left{
transform: translateX(220px);
}
.right{
transform: translateX(-220px);
}
.resetX{
transform: translateX(0);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="above-the-fold"></div>
<div class="boxes">
<div class="box anime right"></div>
<div class="box anime left"></div>
<div class="text anime right">Loren Ipsum</div>
<div class="text anime left">Loren Ipsum</div>
</div>
</div>