如何制作视差效果

Question

我正在尝试在我的网站上制作响应式视差效果。 我有这个结构：

<section id="first">
    <div class="text fixed" >
        <h1><b>aSs</b> lorem ipsum dolor sit amet</h1>
        <p>Ogólnie znana teza głosi, iż użytkownika moze rozpraszać zrozumiała zawartośc strony, kiedy ten <span class="blue"> chce zobaczyć sam jej wygląd.</span></p>
        <a class="btn btn-orange" href="#">Zobacz naszych <b>pracowników</b> ></a>
    </div>
</section>
<section id="second"></section>

CSS：

    #first{
    background: url(../images/tlo1.jpg) no-repeat;
    width: 100%;
    background-size: cover;
    background-position: 50%;
    height: 699px;
    text-align: center;
    position: relative;
    white-space: nowrap;
}
.fixed{
   position:fixed;
   top: 300px;
   left: 0;
}
.static{
    position: absolute;
    left:0;
    bottom: 0;
}

.text{
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
    background: #fff;
    padding: 30px 0;
    width: 100%;
    color: #7B7878;
    font-size: 16px;
    font-weight: 300;
}

Js：

pozycjaBlueBox = $("#first").offset().top + $('#first').height();
    $(document).scroll(function(){

        if($(window).width() <=1024){
            pozycjaScrolla = $(window).scrollTop() + $("#first .text").offset().top+$("#first .text").height();
        }else{
            pozycjaScrolla = $(window).scrollTop() + $("#first .text").offset().top-60;
        }

        if($(window).width() > 768){
            if(pozycjaScrolla >= pozycjaBlueBox){
                $("#first .text").removeClass('fixed').addClass('static');
            }else{
                $("#first .text").removeClass('static').addClass('fixed');
            }
        }

    });

我想要固定文本类，直到该类的底部不与#second 的顶部接触。它在大型桌面上运行良好，但是当我调整到较低的分辨率时，它就变得一团糟了。

Answer 1

在最基本的形式中，视差函数只是绑定到滚动条的补间。您可以使用以下函数扩展几乎任何补间库，

$(window).scroll(Parallax(1, 10, obj.paralaxUpdate));

// normalizes the animation times : this value can be really any positive number 
var normalizer = 1000; 

Parallax = function(start, stop, tweenUpdateer){
    //scrollTop() returns the distance to top of page
    var topVert = $(this).scrollTop();

    topVert <= start ? var progressNum = 0 : 
    topVert >= stop ? var progressNum = normalizer : 
    var progressNum =  (topVert - start) * (normalizer / (stop - start) || 0);   
    // progressNum is now a value from 0 to 1000 (0 to *normalizer* )
    tweenUpdateer(progressNum);

}

这现在可以与任何补间对象一起使用，例如 Gsap 的 TweenLite 或 TweenJS 的 Tween

id = document.getElementById("SomeID");
//Gsap syntax
var obj = new TweenLite.to(id, normalizer, {css:{top:"-20px" },paused:true});
obj.paralaxUpdate = obj.progress;
//TweenJS syntax
var obj = Tween.get(id, {paused:true}).to(top:"-20px"}, normalizer);
obj.paralaxUpdate = obj.setPosition;

如果您想制作自己的补间对象：值得看看 Gsap 或 TweenJS 的源代码。

TweenJS：http://www.createjs.com/#!/TweenJS/documentation

GSAP：https://greensock.com/docs/#/HTML5/GSAP/（我个人最喜欢的）