Parallax scrolling

Question

I'm trying to make a parallax effect according to this tutorial https://www.youtube.com/watch?v=D75WTf_Y738

But my function doesn't apply to my objects. Here's the function:

    function parallax() {
    var sphereOne = document.getElementById("sphereOne");
    sphereOne.style.top = window.pageYOffset +'px';
    };

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

I know I can use hundreds of JQ libraries instead to achieve the effect, but want to understand what's wrong. My objects just stuck at the same place when scrolling.

Here's the JSFiddle example:

jsfiddle.net/hkbusbkm

Answer 1

http://jsfiddle.net/BBaughn/eenaa63t/ I just made this for you. And search for Dev Tips on YouTube. He is a fantastic YouTuber, and teaches about everything. And, here is my jQuery code that did the work when you scrolled:

$(window).scroll(function(){
var wScroll = $(this).scrollTop();
$('.logo *** OR WHATEVER IS BEING PARALLAXED**').css({
'translate' : 'transform(0px ' wScroll /2 '%)'
});
});

Answer 2

Another way to do this in pure CSS:

#selector {
    background-image: url('url.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}