¿Cómo puedo cambiar la función en este script de .click a .scroll (y aún tener el script funcionando) para que la acción se ejecute al desplazarme en lugar de hacer clic?
El código js cambia la posición de 3 iconos/imágenes que se colocan inicialmente detrás de otra imagen/icono. Así: https://prnt.sc/gCyTQDqS_dtD después de hacer clic en la imagen: https://prnt.sc/CjAbwM1D1Cvw
Gracias por tu ayuda :-)
<style> .has-transform, .transform_target .et-pb-icon { transition: all 400ms ease-in-out; } .toggle-transform-animation { transform: none !important; } .transform_target { cursor: pointer; } .toggle-active-target.et_pb_blurb .et-pb-icon { background-color: transparent; } </style> <script> (function($) { $(document).ready(function(){ $('.transform_target').click(function(){ $(this).toggleClass('toggle-active-target'); $('.has-transform').toggleClass('toggle-transform-animation'); }); }); })( jQuery ); </script>Lamentablemente, creo que la mejor solución es cambiar todo el enfoque. Una opción para reaccionar al desplazamiento es usar un observador de intersección https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#result
Vea la pequeña demostración del observador de intersección a continuación; el segundo gatito se desvanecerá a la vista solo cuando te desplaces hacia abajo
const one = document.querySelector(".one"); const two = document.querySelector(".two"); function handler(entries, observer) { for (entry of entries) { if (entry.isIntersecting) { two.classList.add("show") } else { two.classList.remove("show") } } } let observer = new IntersectionObserver(handler); observer.observe(two); .kitten { width: 100px; height: 100px; border-radius: 50%; } .two { opacity: 0; } .two.show{ animation: fadeIn 5s; animation-fill-mode: forwards; } @keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } #wrapper { padding-top: 100vh; padding-bottom: 100vh; } scroll me <div id="wrapper"> <img class="kitten one" src="//placekitten.com/100/100"> <img class="kitten two" src="//placekitten.com/200/200"> </div>