Javascript 如何制作视差效果

我试图在我的网站上产生响应视差效果。 我有这样的结构：

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

Js:

---

我希望有一个固定的文本类，直到这个类的底部不接触到第二个类的顶部。它在大型桌面上运行良好，但当我调整到较低的分辨率时，它会变得一团糟。

在其最基本的形式中，视差函数只是绑定到滚动条上的一个二者之间的函数。您可以使用下面的函数扩展几乎任何tweening库

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

}

如果您想制作自己的tweening对象：那么值得一看Gsap或TweenJS的源代码

TweenJS：

---

GSAP：我个人最喜欢的

我们无法用这么少的资源复制您的示例。你不能把它弄得乱七八糟吗？当然：这是全屏，它是如何工作的：问题是什么？把窗口调整到小分辨率，这个脚本就不能工作了。我希望在宽度>768的所有分辨率上都具有此视差效果。仅供参考，必须将normalizer用作所有Tween的持续时间参数：在视差函数和Tween对象中使用它可以使输入值和输出值匹配。

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

    });

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

}

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;