Parallax Scrolling with Pure CSS

Question

I have used parallax scrolling before, but only with plugins. I have run into a problem with the plugin and decided to figure out how to do it in pure css.

However I thing I am missing something obvious because it is not working. Here is my CodePen. I want the div to 'stick' and the div below to scroll up over it. But the way I am doing it a). does not really achieve this effect and b). causes the divs at the top to move at a drastically different speed than the later divs.

#port00{
    background-color: #394E72;
    width: 100%;
    height: 450px;


    -webkit-transform: translateZ(90px) scale(.7);
    transform: translateZ(-32px) scale(33);
    z-index: 1;

}   
#port01{
    background-color: #6BA5A5;
    width: 100%;
    height: 450px;
    margin-top: calc(450px * 16);

    -webkit-transform: translateZ(90px) scale(.7);
    transform: translateZ(-16px) scale(17);
    z-index: 2;
    }
#port02{
    background-color: #333;
    width: 100%;
    height: 450px;
    margin-top: calc(450px * 8);


    -webkit-transform: translateZ(0);
    transform: translateZ(-8px) scale(9);
    z-index: 3;
    }
#port03{
    background-color: #394E72;
    width: 100%;
    height: 450px;
    margin-top: calc(450px * 4);

    -webkit-transform: translateZ(-300px) scale(2);
    transform: translateZ(-4px) scale(5);
    z-index: 4;
    }
#port04{
    background-color: #6BA5A5;
    width: 100%;
    height: 450px;
    margin-top: calc(450px * 2);

    -webkit-transform: translateZ(-600px) scale(3);
    transform: translateZ(-2px) scale(3);
    z-index: 5;
    }
#port05{
    background-color: #333;
    width: 100%;
    height: 450px;
    margin-top: calc(450px * 1);

    -webkit-transform: translateZ(-600px) scale(3);
    transform: translateZ(-1px) scale(2);
    z-index: 6;
    }
#port06{
    width: 100%;
    height: 450px;
    background-color: #394E72;

    -webkit-transform: translateZ(0);
    transform: translateZ(-0px) scale(1);
    z-index: 7;
    }

[Duplicate] have you search for this? First result: http://stackoverflow.com/questions/20021846/parallax-scrolling-with-css-only — MMachinegun, Nov 13 '15 at 17:05
Yes i did. That is where I started a couple days ago. But I was not able to make sense of it enough to translate it to what I want to do. — Kay, Nov 13 '15 at 17:17
The problem there is, fixed background does not work on mobile and pads, never , ever. If you want parallax on these devices, you absoutely need JS. Let me know if you want an example of that. — damiano celent, Nov 13 '15 at 20:09

score -1 · Answer 1 · answered Nov 14 '15 at 15:55

This is all the jQuery you need for this.

$(window).scroll(function(e){
parallax();
});
function parallax(){
var scrolled = $(window).scrollTop();
$('.bg').css('top',-(scrolled*0.1)+'px');
$('.bg2').css('top',-(scrolled*0.2)+'px');
}

http://codepen.io/damianocel/pen/yYKyaN

Parallax Scrolling with Pure CSS

1 Answers1