How can I change the function in this script from .click to .scroll (and still have the script worki-CodePudding

How can I change the function in this script from .click to .scroll (and still have the script working) so that the action is executed on scrolling instead of clicking?

The js code changes the posititon of 3 icons/images that are initially positioned behind another image/icon. Like this: https://prnt.sc/gCyTQDqS_dtD after a click on the image: https://prnt.sc/CjAbwM1D1Cvw

Thanks for your help :-)

<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>

CodePudding user response：

Sadly I think the best solution is to change the entire approach. One option to react to scrolling is to use an intersection observer https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#result

See the little intersection observer demo below; the 2nd kitten will fade into view only when you scroll down

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  src="//placekitten.com/100/100">
  <img  src="//placekitten.com/200/200">
</div>