如何制作视差效果

Question

Im trying to make responsive parallax effect on my website. I have this structure:

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

    });

I want to have fixed text class until the bottom of this class doesn't comes into contact with the top of #second. It works well on large desktops but when I resize to lower resolution it's mess.

Answer 1

In its most basic form a parallax function is just a tween bound to the scroll bar. You can extend pretty much any tweening library with the function below,

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

}

This can now be used with any tweening object, for example Gsap's TweenLite or TweenJS's 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;

If you want to make your own tweening objects : its worth taking a look at the source of Gsap or TweenJS.

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

GSAP : https://greensock.com/docs/#/HTML5/GSAP/ (My personal favorite)