Wordpress Fade in/out on scroll (up and down)

Question

I am looking to have divs fade in/out when you scroll up/down on my Wordpress site. Variations of this have been found online but not quite what I am looking for.

The code I have managed so far

css

.fade-in-section {
  opacity: 0;
  transform: translateY(20vh);
  visibility: hidden;
  transition: opacity 0.6s ease-out, transform 1.2s ease-out;
  will-change: opacity, visibility;
}
 .fade-in-section.is-visible {
  opacity: 1;
  transform: none;
  visibility: visible;
 }

java (although not Wordpress written):

function FadeInSection(props) {
 const [isVisible, setVisible] = React.useState(true);
 const domRef = React.useRef();
React.useEffect(() => {
 const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => setVisible(entry.isIntersecting));
 });
 observer.observe(domRef.current);
 return () => observer.unobserve(domRef.current);
}, []);
return (
 <div
  className={`fade-in-section ${isVisible ? 'is-visible' : ''}`}
  ref={domRef}
 >
  {props.children}
 </div>
);
}

( sandbox code and original author here: https://codesandbox.io/s/beautiful-wiles-k23w5?from-embed )

This works perfectly scrolling down, but I would like the same animation/transitioning scrolling up (only 2/3 divs would be visible in the middle of the screen)

Looking for the right approach, help looking for resources to accomplish this.

Answer 1

Try using my solution. Give fade class to elements you want wo fade in/out and apply this:

 $(document).ready(function() { $(window).scroll(function() { var windowBottom = $(this).scrollTop() + $(this).innerHeight(); $(".fade").each(function() { /* Check the location of each desired element */ var objectBottom = $(this).offset().top + $(this).outerHeight(); /* If the element is completely within bounds of the window, fade it in */ if (objectBottom < windowBottom) { //object comes into view (scrolling down) if ($(this).css("opacity")==0) { $(this).fadeTo(500,1); } }else{ if ($(this).css("opacity")==1) { $(this).fadeTo(500,0); } } }); }); });

 .fade { margin: 50px; padding: 50px; background-color: red; opacity: 0; width: 150px; height: 150px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="fade"></div> <div class="fade"></div> <div class="fade"></div> <div class="fade"></div> <div class="fade"></div> <div class="fade"></div> <div class="fade"></div>

Answer 2

jQuery(window).scroll(function () {
    var y = jQuery(this).scrollTop();
    if (y > 500) {
        jQuery('.a2a_floating_style.a2a_vertical_style').show();
    } else {
        jQuery('.a2a_floating_style.a2a_vertical_style').fadeOut();
    }
});