Question

所以我试图让图像具有视差滚动效果，但它不起作用。知道它为什么不起作用了吗？

$(function() {

// Cache the Window object
var $window = $(window);

// Parallax Backgrounds
// Tutorial: http://code.tutsplus.com/tutorials/a-simple-parallax-scrolling-technique--net-27641



$('section[data-type="background"]').each(function(){
        var $bgobj = $(this); // assigning the object

        $(window).scroll(function() {

            // Scroll the background at var speed
            // the yPos is a negative value because we're scrolling it UP!                              
            var yPos = -($window.scrollTop() / $bgobj.data('speed'));

            // Put together our final background position
            var coords = '50% '+ yPos + 'px';

            // Move the background
            $bgobj.css({ backgroundPosition: coords });

        }); // end window scroll
    });

});

https://jsfiddle.net/0382k30q/

Answer 1

你需要改变这个：

$('section[data-type="background"]').each(function(){...

到此：

$('div[data-type="background"]').each(function(){...

背景不适用于section元素。它们应用于div元素。

另外，不要忘记在你的小提琴中加入JQuery / JQuery UI。

更新小提琴：https://jsfiddle.net/0382k30q/7/

视差图像滚动不起作用

1 个答案: