码迷,mamicode.com
首页 > Web开发 > 详细

jQuery视差滚动插件,(附原理分析,调用方法)

时间:2015-09-14 22:24:57      阅读:272      评论:0      收藏:0      [点我收藏+]

标签:

演示地址:http://www.jq22.com/jquery-info1799

 

jquery插件,使用验证过可用。

分析源代码后总结原理:设置background样式为fixed,判断浏览器滚动距离,当在视窗范围内时,调用$(window).scroll。并根据所设置的速度比例,进行同步滚动。

调用时,设置三个必要参数:data-speed,data-type,background样式为fixed

<div data-speed="4" data-type="background" style="background:url(...) 50% 0 no-repeat fixed">    

js会根据data-speed来计算滚动速度,越小越快。

可以根据不同的data-type作不同处理,可自定义写代码,很方便。

background必须是fixed。

 

parallax.js源代码(需先引入jQuery)

 

$(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

 

jQuery视差滚动插件,(附原理分析,调用方法)

标签:

原文地址:http://www.cnblogs.com/woodk/p/4808155.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!