开始淡出页面向下滚动

所以我有这个问题，我无法弄清楚如何开始淡出文本，并开始移动它一点点，当页面向下滚动。你可以完美地看到它在苹果的网站关于Macbook Pro开始淡出页面向下滚动

我一直在挣扎5个小时，现在仍然无法弄清楚。帮助将不胜感激。

我想在jQuery中做到这一点。

2017-07-31 Tomas Krcal

的可能的复制[淡入上向下滚动，淡出上向上滚动 - 基于在窗元件位置（https://stackoverflow.com/questions/26694385/淡入淡出 - 淡出 - 淡出 - 基于元素 - 位置 - 赢 - 赢） –

您能否粘贴您拥有的代码并存在什么问题？ –

您可以检测滚动位置，然后做一些数学来设置要淡出文本的不透明度，这可能是这个样子

$(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>

这可能是有点难以看到的片段，所以这里是一个小提琴以及https://jsfiddle.net/v75xn742/3/

来源

2017-07-31 15:01:06 CumminUp07

请检查整个页面模式

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>

来源

2017-07-31 15:11:00

这将滚动Firefox砖。它会触发每个滚动像素的淡入淡出。至少添加一个dethrottle，并且我建议将var设置为'elementIsShown = true'，这样tou就可以检查它是否已被显示。 – Martijn

@ Martijn-感谢您的帮助。我已经使代码更好一点。 –

开始淡出页面向下滚动

回答

相关问题