Start fading on scrolling down the page

Question

So i have this issue, where i can't figure out how to start text fading-out and start moving it little bit up as the page scrolls down. You can perfectly see it on Apple's site about Macbook Pro

i've been struggling for 5 hours now and still can't figure it out. Help would be much appreciated.

i'd like to do it in jquery.

Possible duplicate of [Fade In on Scroll Down, Fade Out on Scroll Up - based on element position in window](https://stackoverflow.com/questions/26694385/fade-in-on-scroll-down-fade-out-on-scroll-up-based-on-element-position-in-win) — Vanity Slug - codidact.com, Jul 31 '17 at 14:36
Could you paste in the code that you have and what's the problem? — Richard Housham, Jul 31 '17 at 14:40

score 0 · Answer 1 · answered Jul 31 '17 at 15:01

You can detect the scroll position and then do a little math to set the opacity of the text you want to fade, it could look something like this

$(document).ready(function(){

  $(window).scroll(function(){
    const max = 300;
    var scrolled = $('body').scrollTop();
    $('.textToFade').css('opacity', 1 - (scrolled/max));
  })

})

body, html {
  width: 100%;
  height: 150%;
  background-color: lightblue;
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
 <p class='textToFade'>
 this is text
 </p>
</body>

It might be a little hard to see in the snippet, so here is a fiddle as well https://jsfiddle.net/v75xn742/3/

Farhad Bagherlo · Answer 2 · 2017-07-31T15:35:38.340

please check full page mode

    var p = $(".DivO> span").offset().top;
    $(document).scroll(function () {
        if ((p < $(this).scrollTop()) && ($(".DivO").height() + $(".DivO").offset().top - $(".DivO> span").height()) > $(this).scrollTop())
            $(".DivO> span").fadeIn(2000);
        else 
            $(".DivO> span").fadeOut(500);
    });

.Div {
        width: 100%;
        height: 1000px;
        text-align: center;
    }

    .DivO {
        font-size: 50px;
    }

        .DivO span {
            display: none;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Div"></div>
<div class="Div DivO"><span>It’s razor thin, feather light, and even faster and more powerful than before. It has the brightest, most colorful Mac notebook display ever. And it features the Touch Bar — a Multi-Touch enabled strip of glass built into the keyboard for instant access to the tools you want, right when you want them. MacBook Pro is built on groundbreaking ideas. And it’s ready for yours.</span></div>
<div class="Div"></div>

This will brick Firefox on scroll. It will trigger fadein the div litterly every scrolled pixel. At least add a dethrottle, and I suggest setting a var to `elementIsShown=true` so tou can check if it's allready being shown — Martijn, Jul 31 '17 at 15:13
@Martijn-Thank you for the help. I've made the code a little better. — Farhad Bagherlo, Jul 31 '17 at 15:24

Start fading on scrolling down the page

2 Answers2