¡Hola a todos!
¿Existe un marco u otra cosa que facilite mover el texto (hacia la izquierda o hacia la derecha) cuando el usuario se desplaza (por ejemplo, cerca del pie de página)? Entonces, una animación de desplazamiento pura.
¡Gracias de antemano!
Probé Scrollmagic, pero no puedo manejarlo. :/
Puede probar gsap , sin embargo, si desea hacerlo sin un marco utilizando el evento de desplazamiento , puede intentar:
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>Este es un ejemplo simple para demostrar la idea usando jquery. jadear como @Chakib dijo antes es una buena solución.
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>