Tengo 2 elementos <hr> que están animados y se acercan entre sí. Quiero que la animación tenga lugar una vez que los elementos <hr> estén en la ventana gráfica, en lugar de que ocurra justo cuando se carga la página. Incluí mi código JavaScript pero este código no funcionó; no estoy seguro si estoy usando el evento correcto.
'use strict'; const linebreak = document.querySelector('#hero--one'); const symbolContainer = document.querySelector('.header__container-symbol') linebreak.addEventListener('scroll', function(e) { e.preventDefault(); const containerCoords = symbolContainer.getBoundingClientRect(); symbolContainer.scrollIntoView({ behavior: 'smooth' }); linebreak.classList.remove('hidden'); }) /* Lines and Diamond above title */ .header__container-symbol { display: flex; justify-content: center; align-content: center; background-color: rgba(25, 25, 25, 1); } .span-D { align-self: center; } .hr-symbol { width: 60rem; display: inline-block; height: 0.3rem; background-color: #eee; } #hero--one { margin-right: 3px; animation: moveInLeftHr; animation-duration: 2s; } #symbol { font-size: 3rem; } #hero--two { margin-left: 3px; animation: moveInRightHr; animation-duration: 2s; } #symbol { color: #eee; margin-right: 2rem; margin-left: 2rem; } .hidden { display: none; } /* End Diamon and Lines above title */ /* KeyFrames Animations */ @keyframes moveInLeftHr { 0% { opacity: 0; transform: translateX(-100px); } 100% { opacity: 1; transform: translate(0); } } @keyframes moveInRightHr { 0% { opacity: 0; transform: translateX(100px); } 100% { opacity: 1; transform: translate(0); } } <div class="header__container-symbol"> <span class="span-D"><hr class="hidden hr-symbol" id="hero--one"/></span> <span id="symbol"> ⬙ </span> <span class="span-D"><hr class="hidden hr-symbol" id="hero--two"/></span> </div>Puede usar la API Intersection Observer para detectar cuándo el elemento se cruza con la ventana gráfica.
La opción de threshold se establece en 1 , lo que significa que verificará cuándo el elemento está completamente dentro de la ventana gráfica.
Se ha insertado un div de prueba en la parte superior del html para demostrar el comportamiento.
'use strict'; const linebreak1 = document.querySelector('#hero--one'); const linebreak2 = document.querySelector('#hero--two'); const symbolContainer = document.querySelector('.header__container-symbol') const observer = new IntersectionObserver((entries, observer) => { if (!entries[0].isIntersecting) return; linebreak1.classList.remove('hidden'); linebreak2.classList.remove('hidden'); }, { threshold: 1 }); observer.observe(symbolContainer); /* Lines and Diamond above title */ .header__container-symbol { display: flex; justify-content: center; align-content: center; background-color: rgba(25, 25, 25, 1); } .span-D { align-self: center; } .hr-symbol { width: 60rem; display: inline-block; height: 0.3rem; background-color: #eee; } #hero--one { margin-right: 3px; animation: moveInLeftHr; animation-duration: 2s; } #symbol { font-size: 3rem; } #hero--two { margin-left: 3px; animation: moveInRightHr; animation-duration: 2s; } #symbol { color: #eee; margin-right: 2rem; margin-left: 2rem; } .hidden { display: none; } /* End Diamon and Lines above title */ /* KeyFrames Animations */ @keyframes moveInLeftHr { 0% { opacity: 0; transform: translateX(-100px); } 100% { opacity: 1; transform: translate(0); } } @keyframes moveInRightHr { 0% { opacity: 0; transform: translateX(100px); } 100% { opacity: 1; transform: translate(0); } } <div style="height: 500px;"></div> <div class="header__container-symbol"> <span class="span-D"><hr class="hidden hr-symbol" id="hero--one"/></span> <span id="symbol"> ⬙ </span> <span class="span-D"><hr class="hidden hr-symbol" id="hero--two"/></span> </div>