Question

所以我有这个问题，我无法弄清楚如何开始文本淡出并在页面向下滚动时开始移动它。您可以在Apple的网站上完美地看到有关Macbook Pro的信息

我现在已经挣扎了5个小时但仍然无法理解。非常感谢帮助。

我想在jquery中这样做。

Answer 1

您可以检测滚动位置，然后进行一些数学运算来设置您想要淡化的文本的不透明度，它可能看起来像这样

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

Answer 2

请查看整页模式

＆＃13;

    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);
    });

＆＃13;

.Div {
        width: 100%;
        height: 1000px;
        text-align: center;
    }

    .DivO {
        font-size: 50px;
    }

        .DivO span {
            display: none;
        }

＆＃13;

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

＆＃13;

向下滚动页面开始淡出

2 个答案: