简单实现视差滚动

视差滚动是一个有趣的技术,当你滚动页面时背景移动的速度慢于内容(前景内容),造成一种3D效果。

接下来我将使用最简单的代码实现视差效果。

页面结构

这个技术的要点在于控制背景的移动速度,所以开始我们先创建HTML结构:

<section id="home" data-type="background" data-speed="10">                            
</section>   

<section id="about" data-type="background" data-speed="10">
</section>

我们使用 data-type=”background”data-speed=”10”作为关键值来实现效果。

接下来添加内容到结构:

<section id="home" data-type="background" data-speed="10" class="pages">     
         <article>I am absolute positioned</article>
    </section>   

<section id="about" data-type="background" data-speed="10" class="pages">
         <article>Simple Parallax Scroll</article>
</section>

我们所要实现的就是使背景的移动速度慢于内容,这就会产生一种视觉上的差别。紧接着我们要添加背景图片:

#home { 
    background: url(home-bg.jpg) 50% 0 repeat fixed; min-height: 1000px;
}

#about { 
    background: url(about-bg.jpg) 50% 0 no-repeat min-height: 1000px;  
}

我们再美化一下页面:

#home { 
  background: url(home-bg.jpg) 50% 0 repeat fixed; min-height: 1000px; 
  height: 1000px; 
  margin: 0 auto; 
  width: 100%; 
  max-width: 1920px; 
  position: relative; 
}

#home article { 
  height: 458px; 
  position: absolute; 
  text-align: center; 
  top: 150px; 
  width: 100%; 
}

#about { 
  background: url(about-bg.jpg) 50% 0 repeat fixed; min-height: 1000px; 
  height: 1000px; 
  margin: 0 auto; 
  width: 100%; 
  max-width: 1920px; 
  position: relative; 
  -webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8);
  box-shadow: 0 0 50px rgba(0,0,0,0.8);
}

#about article { 
  height: 458px; 
  position: absolute; 
  text-align: center; 
  top: 150px; 
  width: 100%; 
}

神奇的代码

我们引入来jQuery来简化DOM的操作,所以要按照它的标准用法:

$(document).ready(function(){

});

接下来请注意:我们遍历页面上带有data-type=”background”

标签。

$(document).ready(function(){

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

});

each()方法中添加scroll()方法,当用户滚动页面时做出反应。

$(window).scroll(function() {

});

我们需要知道用户滚动来多少距离,然后把它以data-speed平分:

var yPos = -($(window).scrollTop() / $bgobj.data('speed');

$(window).scrollTop()表示滚动条距离页面顶部的距离,因为背景要朝着页面滚动方法的相反方向移动,所以需要使用负值。

让我们来使用图片演示一下:

parallax

接着我们算出位移然后赋值给背景图片:

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

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

最后你的代码应该像这样:

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

        $(window).scroll(function() {
            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 });
        }); 
    });    
});

原文:simple parallax

分享到: