视差滚动

Question

我试图根据本教程制作视差效果 https://www.youtube.com/watch?v=D75WTf_Y738

但我的功能并不适用于我的对象。 这是功能：

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

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

我知道我可以使用数百个JQ库来实现这个效果，但想要了解错误。 滚动时我的物体卡在同一个地方。

这是JSFiddle示例：

jsfiddle.net/hkbusbkm

Answer 1

http://jsfiddle.net/BBaughn/eenaa63t/我刚刚为你做了这个。并在YouTube上搜索Dev Tips。他是一个出色的YouTuber，并教授一切。而且，这是我滚动时执行工作的jQuery代码：

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

Answer 2

在纯CSS中执行此操作的另一种方法：

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