Question

我正在创建一个视差网站，但我正在使用我发现的一些很好的教程代码。本教程附带了一些JS来改变一些精灵的滚动速度，使用标签＆＃34;数据 - ＆＃34;但即使我已经拥有与背景相比具有不同滚动速度的精灵，我也无法根据自己的喜好修改此速度。

这是JavaScript代码：

$(document).ready(function(){

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

// Cache the Y offset and the speed of each sprite
$('[data-type]').each(function() {  
    $(this).data('offsetY', parseInt($(this).attr('data-offsetY')));
    $(this).data('Xposition', $(this).attr('data-Xposition'));
    $(this).data('speed', $(this).attr('data-speed'));
});

// For each element that has a data-type attribute
$('section[data-type="background"]').each(function(){


    // Store some variables based on where we are
    var $self = $(this),
        offsetCoords = $self.offset(),
        topOffset = offsetCoords.top;

    // When the window is scrolled...
    $(window).scroll(function() {

        // If this section is in view
        if ( ($window.scrollTop() + $window.height()) > (topOffset) &&
             ( (topOffset + $self.height()) > $window.scrollTop() ) ) {

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

            // If this element has a Y offset then add it on
            if ($self.data('offsetY')) {
                yPos += $self.data('offsetY');
            }

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

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

            // Check for other sprites in this section  
            $('[data-type="sprite"]', $self).each(function() {

                // Cache the sprite
                var $sprite = $(this);

                // Use the same calculation to work out how far to scroll the sprite
                var yPos = -($window.scrollTop() / $sprite.data('speed'));                  
                var coords = $sprite.data('Xposition') + ' ' + (yPos + $sprite.data('offsetY')) + 'px';

                $sprite.css({ backgroundPosition: coords });                                                    

            }); // sprites

            // Check for any Videos that need scrolling
            $('[data-type="video"]', $self).each(function() {

                // Cache the video
                var $video = $(this);

                // There's some repetition going on here, so 
                // feel free to tidy this section up. 
                var yPos = -($window.scrollTop() / $video.data('speed'));                   
                var coords = (yPos + $video.data('offsetY')) + 'px';

                $video.css({ top: coords });                                                    

            }); // video    

        }; // in view

    }); // window scroll

}); // each data-type

}); // document ready

这是单个精灵的HTML标记：

<div class="stars" data-type="sprite" data-speed="10">
    <img class="star1" src="img/cenas/1.PNG">
</div>

我尝试更改数据速度值，但没有任何更改。如果不同的滚动速度有不同的精灵，我该怎么办？

更改精灵滚动速度

0 个答案: