Geek Answers Handbook

Parallax scrolling is a bit overloaded

I have a little parallax on the site I'm working on, it works almost fine, but the front divs are a bit overloaded when I view the page.

At the top of the page, I have a div called # top-banner, it has a fixed background image, sitting inside this div is two more in a row, in the div / column fisrt there is an image of the model and the second div has only text.

Below the # top-banner div is the div with the background image of the waterline, the desired effect should be to have the waterline cover # the top banner when the user scrolls down so that it looks like the model, text and background are covered with water.

I have work using jQuery to change the css bottom property so that it looks like two columns of divs are moving down the page below the waterline at the same speed as the scroll when the user scrolls down the page. I set the speeds / increments to be slightly different to create a parallax effect.

It works very well, but a little nervous, I also tried using the jQuery animation function, but this is even more inconvenient.

HTML

<section id="top-banner">
    <div class="row">
        <div class="col-2 prlx-1">
            <img src="model.png"/>
        </div>
        <div class="r-col-2 prlx-2">
            <h3>Lorem Ipsum</h1> 
            <p>More Ipsum</p>
        </div>                            
</section>   

<section id="hp-water-line"></section>

CSS

#hp-top-banner {
  background: url(bg.png);
  height: 600px;
  background-attachment: fixed;
  background-origin: initial;
  background-clip: initial;
  background-size: cover;
  overflow: hidden;
  width: 100%;
  position: relative;
}

#hp-water-line {
  background: url(water-line.png) no-repeat transparent;
  min-height: 92px;
  margin: 0 auto;
  width: 100%;
  position: relative;
  top: -15px;
  background-size: cover;
}

Js

$(document).ready(function(){

    function parallax(){
        var prlx_effect_1= -((window.pageYOffset / 4) *2.25 );
        $('.prlx-1').css({"position": "relative","bottom":prlx_effect_1, "transition": "0s ease-in-out"});
           // jQ('.prlx-1').css({"position": "relative"});
           // jQ('.prlx-1').animate({"bottom":prlx_effect_1},"fast");

        var prlx_effect_2= -(window.pageYOffset / 5 );
        $('.prlx-2').css({"position": "relative","bottom":prlx_effect_2, "transition": "0s ease-in-out"});

    }

    window.addEventListener("scroll", parallax, false);

});

Updated JS based on Prinzhorn comment

var requestAnimationFrame = window.requestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    window.oRequestAnimationFrame;

function onScroll() {
    requestAnimationFrame(parallax);
}

function parallax(){
    var prlx_effect_1= +(window.pageYOffset *.7).toFixed(2); // .55 is a good speed but slow
    var prlx_str_1 = "translate3d(0, "+prlx_effect_1+"px, 0)";
    jQ('.prlx-1').css({
        "transform":prlx_str_1,
        "-ms-transform":prlx_str_1,
        "-webkit-transform":prlx_str_1
    });

    var prlx_effect_2= +(window.pageYOffset * 1 ).toFixed(2); // .33 is a good speed but slow
    var prlx_str_2 = "translate3d(0, "+prlx_effect_2+"px, 0)";
    jQ('.prlx-2').css({
        "transform":prlx_str_2,
        "-ms-transform":prlx_str_2,
        "-webkit-transform":prlx_str_2
    });

    requestAnimationFrame(parallax);

}

window.addEventListener("scroll", onScroll, false);
+4
source share
1 answer

parallax- , jquery , , , .

CSS translateZ perspective "" parralax. , . , .

..

.parallax {
    perspective: 1px;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
}
.parallax__layer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.parallax__layer--base {
    transform: translateZ(0);
}
.parallax__layer--back {
    transform: translateZ(-1px);
}

, 3D- , Z-Index, , .

, 3D-, , z. "debug" .

http://keithclark.co.uk/articles/pure-css-parallax-websites/

+2

More articles:


All Articles