1

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.

user3550879
  • 3,389
  • 6
  • 33
  • 62

2 Answers2

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>
Aleksandar
  • 460
  • 3
  • 13
  • Your code is similar to those I found, works right when you scroll down the page (they appear) However, I am also looking for the same thing while scrolling up. So as you scroll down they fade in (i'd image a certain amount above the visible divs would fade out) so that when you scroll up, those fade in as well. Basically what your code does, but working in both directions – user3550879 Jan 24 '21 at 08:32
  • I understand what you need. Same problem was discussed here: https://stackoverflow.com/questions/123999/how-can-i-tell-if-a-dom-element-is-visible-in-the-current-viewport – Aleksandar Jan 24 '21 at 18:30
0
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();
    }
});
Mark Rotteveel
  • 100,966
  • 191
  • 140
  • 197
Hamza Riaz
  • 1
  • 1
  • 1
    Please don't post only code as answer, but also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes. – Mark Rotteveel Jan 23 '21 at 16:29