Question

0

55

Views

How can I change the function in this script from .click to .scroll (and still have the script working)

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>

8 months ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-06-25T21:42:03.241Z

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