1

I have this page https://wearehomefolks.com/index.php/home/ I am trying to get the titles on the top 5/6 images to fade in as the page scrolls down as it enters the middle of teh viewport, and then fade out, to be visible only in the central 25% of the viewport, as is on https://www.celine.com/fr-fr/home (only visible on a mobile).

I have tried (images 1, 2-6) https://jsfiddle.net/eLwex993/5/ which gets something working. As found Fade In on Scroll Down, Fade Out on Scroll Up - based on element position in window

$(window).on("load",function() {
  function fade(pageLoad) {
    var windowTop=$(window).scrollTop(), windowBottom=windowTop+$(window).innerHeight();
    var min=0.3, max=0.7, threshold=0.01;
    
    $(".fade").each(function() {
      /* Check the location of each desired element */
      var objectHeight=$(this).outerHeight(), objectTop=$(this).offset().top, objectBottom=$(this).offset().top+objectHeight;
      
      /* Fade element in/out based on its visible percentage */
      if (objectTop < windowTop) {
        if (objectBottom > windowTop) {$(this).fadeTo(0,min+((max-min)*((objectBottom-windowTop)/objectHeight)));}
        else if ($(this).css("opacity")>=min+threshold || pageLoad) {$(this).fadeTo(0,min);}
      } else if (objectBottom > windowBottom) {
        if (objectTop < windowBottom) {$(this).fadeTo(0,min+((max-min)*((windowBottom-objectTop)/objectHeight)));}
        else if ($(this).css("opacity")>=min+threshold || pageLoad) {$(this).fadeTo(0,min);}
      } else if ($(this).css("opacity")<=max-threshold || pageLoad) {$(this).fadeTo(0,max);}
    });
  } fade(true); //fade elements on page-load
  $(window).scroll(function(){fade(false);}); //fade elements on scroll
});

Some similar ones I have tried are Fade-in and Fade-out divs while scrolling page which is applied to the 2nd image from the top.

I have read (Java Scroll up Fade In, Stay While scrolling, Scroll Up Fade Out) that ScrollMagic could be of interest, but I don't know where to begin there.

Others I have seen: Fade in and fade out a UIView while it is moving Fade In on Scroll Down, Fade Out on Scroll Up - based on element position in window

Thanks in advance.

mattlc
  • 13
  • 4
  • Welcome to Stack Overflow! Please edit your question with YOUR code. The fiddle link you provided does not reflect the jQuery you've posted here. Use the Stack Snippet to add a minimal working example. – disinfor Jul 07 '21 at 15:53
  • I have edited my initial post, it is based on jsfiddle.net/eLwex993/5 which is the closest that i can see that may produce the results desired. I feel like it is fading items and not unfading them as they move out of teh viewport. As per the example at the bottom of the page. – mattlc Jul 09 '21 at 17:04

0 Answers0