• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

290
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>
about 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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>

about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error