Parallax scrolling

问题:

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

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

回答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;
}