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

question from:https://stackoverflow.com/questions/65858170/wordpress-fade-in-out-on-scroll-up-and-down

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>