Tengo algo de código HTML
<div class="mission" id="mission_block"> <div class="mission__img"> <img src="img/phone90.png" alt=""> </div> <div class="mission__text"> <h1>Our mission and vision</h1> <p>While technology is our sweet spot, we've developed our vision alongside our customers to ensure your everyday problems are solved through simplistic tools. And as your business grows, we'll grow right alongside with you. </p> </div> </div> Necesito animar estos bloques cuando la ventana esté en medio de la mission del bloque. ¿Cómo puedo crear un disparador para esto?
Ya tengo tal código JS:
((window, document) => { window.onload = () => { const missionBlock = document.getElementById('mission_block'); const sizes = missionBlock.getBoundingClientRect(); const {height, top} = sizes const scrollTriggerHeigth = top + height / 2 } })(window, document, undefined)Puede hacerlo fácilmente con la API Intersection Observer.
P.ej
const missionBlock = document.getElementById("mission_block"); let observer = new IntersectionObserver( (entries) => { // Take the first entry const entry = entries[0]; if (entry.isIntersecting) { // do here whatever you need to do console.log("instersecting", entry); doWhatever(); } }, { threshold: 0.5 } ); observer.observe(missionBlock);