简单的视差滚动（基于jquery）

视差滚动效果对于一些展示型的网页，再适用不过了。我们可以用这种效果来展示我们的产品，我们的宣传海报，甚至世界上人口迁移的历史等等。视差滚动已被广泛运用，滚动就像动画效果一样，让网页充满3D色彩。乌徒帮在之前的文章中大致介绍过视差滚动的思路，本文则把昨天玩过的一段视差滚动代码贴上分享。

视差滚动代码三部曲：HTML结构、Jquery脚本、CSS布置。

背景图片由自己准备。

一、HTML结构 ↑

为了把header头部的信息也打印出来，否子戈把HTML代码部分的所有都拷贝到这里。其中还包括了头部的脚本部分，这部分原本应该在第二部分讲到。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简单的视差滚动-www.utubon.com</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">window.jQuery || document.write('<script type="text/javascript" src="scripts/jquery.min.js">\x3C/script>')</script>
<script type="text/javascript" src="scripts/jquery.parallax-1.1.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
?? ?//.parallax(xPosition, yPosition, speedFactor, outerHeight) options:
?? ?//xPosition - Horizontal position of the element
?? ?//yPosition - 垂直方向上背景图片的位移。只能填写数字，记住，数字是123，而不是'123'。不带px单位。
?? ?//inertia - speed to move relative to vertical scroll. Example: 0.1 is one tenth the speed of scrolling, 2 is twice the speed of scrolling
?? ?//outerHeight (true/false) - Whether or not jQuery should use it's outerHeight option to determine when a section is in the viewport
?? ?$('#intro').parallax('0',200,0.1);

?? ?$('#second').parallax('50%',0,0.1);

?? ?$('#third').parallax('100%',150,0.1);
?? ?$('#fifth div.bg').parallax('50%',50,0.4);

?? ?$('#nav a').click(function(e){
?? ??? ?e.preventDefault();
?? ??? ?var $to = $($(this).attr('href')),$to_pos = $to.offset().top;
?? ??? ?$('html,body').animate({scrollTop:$to_pos},500);
?? ??? ?$('#nav a').removeClass('current');
?? ??? ?$(this).addClass('current');
?? ?});
?? ?$(window).bind('scroll resize',function(){
?? ??? ?var $pos = $(window).scrollTop(),$slice = $('div.slice'),$len = $slice.length,$top;
?? ??? ?for($i = 0;$i < $len;$i ++){
?? ??? ??? ?$top = $slice.eq($i).offset().top;
?? ??? ??? ?if($pos >= $top){
?? ??? ??? ??? ?$('#nav a').removeClass('current');
?? ??? ??? ??? ?$('#nav a').eq($i).addClass('current');
?? ??? ??? ?}
?? ??? ?}
?? ?}).scroll().resize();
});
</script>
</head>

<body>
?? ?<ul id="nav">
?? ??? ?<li><a href="#intro" title="下一页"></a></li>
?? ???? <li><a href="#second" title="下一页"></a></li>
?? ???? <li><a href="#third" title="下一页"></a></li>
?? ???? <li><a href="#fifth" title="下一页"></a></li>
?? ?</ul>

?? ?<div id="intro">
?? ??? ?<div>
?? ??? ??? ?<div>
?? ??? ??? ??? ?<h2>简介</h2>
?? ??? ??? ??? ?<p>南昌大学档案学生一枚，人在南昌四川人，天生2B型文艺宅男，打死也改不了的自恋狂，爱读书，爱写字，爱咆哮，爱旅行，自称互联网从业者，实际网站建设菜鸟。</p>
?? ??? ??? ??? ?<br>
?? ??? ??? ??? ?<p>E-mail：hongzhang184@163.com</p>
?? ??? ??? ??? ?<p>博&nbsp;&nbsp;客：<a href="http://www.nunubi.com" target="_blank">努努比</a> &nbsp;&nbsp;&nbsp;&nbsp;新浪微博：<a href="http://weibo.com/tsncu" target="_blank">唐霜NCU</a></p>
?? ??? ??? ??? ?<h2>痕迹</h2>
?? ??? ??? ??? ?<p>2008-2009：<a href="http://www.ncuxf.com" target="_blank">南昌大学学生学习服务中心</a></p>
?? ??? ??? ??? ?<p>2009-2012：<a href="http://www.ncudax.com" target="_blank">南昌大学档案学</a></p>
?? ??? ??? ??? ?<p>2009-2012：<a href="http://www.utubon.com" target="_blank">乌徒帮</a> <a href="http://theme.orgfree.com" target="_blank">WP主题</a> <a href="http://plugin.orgfree.com" target="_blank">WP插件</a> <a href="http://wordpress.cn.gp" target="_blank">WP多站点</a></p>
?? ??? ??? ??? ?<p>2010-2012：<a href="http://www.qhzf.net" target="_blank">南昌大学“前湖之风”周末讲坛</a></p>
?? ??? ??? ??? ?<p>2012-2013：<a href="http://www.inncu.com" target="_blank">南昌大学海报墙</a> <a href="http://www.wdjj.cn/" target="_blank">档案教育网</a> <a href="http://www.taoxiaopin.com" target="_blank">淘小品</a></p>
?? ???????? </div>
?? ???? </div><!--.story-->
?? ?</div><!--#intro-->

?? ?<div id="second">
?? ??? ?<div>
?? ??? ??? ?<div>
?? ???????????? <h2>My Interests</h2>
?? ???????????? <p>However, <strong>Coding</strong> is not my most favorite though I spend much time on it. <strong>Reading</strong> and <strong>Writing</strong> is my interest points. I have many blogs or websites width each has its different idea point. I may like <strong>Sports</strong> such as <strong>Basketball</strong>, <strong>Bicycle</strong>, <strong>Swimming</strong> and so on. My dream is <strong>Going Hiking</strong> all over the world one day.</p>
?? ??? ??? ??? ?<h2>我的兴趣</h2>
?? ???????????? <p>实际上，我很多时候喜欢自己写点东西，例如我在自己的一些博客内发布了些小诗、散文、小说。虽然朋友们经常在我的QQ空间看到一些拍摄作品（谈不上吧），但我更多的时候是在电脑前面Coding我的键盘。K歌？哦，我的麦霸称谓要让贤了。骑车出行或许是更好的选择，我想有一天，穿着一双白色的旅行鞋，带上我的相机，去大草原。</p>
?? ???????? </div>
?? ???? </div><!--.story-->
?? ?</div><!--#second-->

?? ?<div id="third">
?? ??? ?<div>
?? ??? ??? ?<div>
?? ???????????? <h2>教育背景</h2>
?? ???????????? <ul>
?? ??? ??? ??? ??? ?<li>2008-2012 : 南昌大学档案学本科、辅修计算机应用基础</li>
?? ??? ??? ??? ??? ?<li>2012-2015 : 南昌大学档案学硕士</li>
?? ??? ??? ??? ?</ul>
?? ??? ??? ??? ?<h2>工作经历</h2>
?? ???????????? <p>没有大公司工作经历</p>
?? ???????? </div>
?? ???? </div><!--.story-->
?? ?</div><!--#third-->

?? ?<div id="fifth">
?? ??? ?<div>
?? ??? ??? ?<div></div>
?? ??? ??? ?<div>

?? ??? ??? ??? ?<h2>和我联系</h2>

?? ??? ??? ??? ?<ul>
?? ??? ??? ??? ??? ?<li><strong>新浪微博</strong>: <a href="http://weibo.com/tsncu" title="关注我的新浪微博">@唐霜NCU</a></li>
?? ??? ??? ??? ??? ?<li><strong>腾讯微博</strong>: <a href="http://t.qq.com/frustigor" title="关注我的腾讯微博">@frustigor</a></li>
?? ??? ??? ??? ??? ?<li><strong>微信号</strong>: <a href="javascript:showWeixin()" title="微信扫描二维码">红幛</a></li>
?? ??? ??? ??? ?</ul>

?? ??? ??? ??? ?<h2>Conect Me</h2>
?? ??? ??? ??? ?<ul>
?? ??? ??? ??? ??? ?<li><strong>Twitter</strong>: <a href="http://www.twitter.com/frustigor" title="Follow me on Twitter" target="_blank">@frustigor</a></li>
?? ??? ??? ??? ??? ?<li><strong>Facebook</strong>: <a href="http://www.facebook.com/" title="Follow me on Facebook" target="_blank">唐霜</a></li>
?? ??? ??? ??? ??? ?<li><strong>Google+</strong>: <a href="http://plus.google.com/" title="Follow me on Google+" target="_blank">红幛</a></li>
?? ??? ??? ??? ??? ?<li><strong>E-mail</strong>: <a href="mailto:hongzhang184@163.com" title="Mail to me" target="_blank">hongzhang184@163.com</a></li>
?? ??? ??? ??? ?</ul>
?? ??? ??? ?</div>
?? ???? </div><!--.story-->
?? ?</div><!--#fifth-->
</body>
</html>

二、Jquery脚本 ↑

1、Jquery库；
2、jquery.parallax-1.1.3.js，一个滚动视差的插件；
3、滑动控制按钮的脚本，在上文中的头部已经给出。

本段贴出jquery.parallax-1.1.3.js的全部代码，其中有部分代码是经过否子戈修改过的，以更实现最终的效果，点击这里下载该插件脚本文件。

/*
Plugin: jQuery Parallax
*/
(function( $ ){
?? ?var $window = $(window),
?? ??? ?windowHeight = $window.height();
?? ?$window.resize(function () {
?? ??? ?windowHeight = $window.height();
?? ?});

?? ?$.fn.parallax = function(xpos, ypos, speedFactor, outerHeight) {
?? ??? ?// setup defaults if arguments aren't specified
?? ??? ?if (arguments.length < 1 || xpos === null) xpos = '50%';
?? ??? ?if (arguments.length < 2 || ypos === null) ypos = 0;
?? ??? ?if (arguments.length < 3 || speedFactor === null) speedFactor = 0.1;
?? ??? ?if (arguments.length < 4 || outerHeight === null) outerHeight = true;

?? ??? ?var $this = $(this);
?? ??? ?var getHeight,
?? ??? ??? ?firstTop,
?? ??? ??? ?paddingTop = 0;

?? ??? ?$this.each(function(){
?? ??? ??? ?firstTop = $this.offset().top + ypos;
?? ??? ?});

?? ??? ?if (outerHeight) {
?? ??? ??? ?getHeight = function(jqo) {
?? ??? ??? ??? ?return jqo.outerHeight(true);
?? ??? ??? ?};
?? ??? ?} else {
?? ??? ??? ?getHeight = function(jqo) {
?? ??? ??? ??? ?return jqo.height();
?? ??? ??? ?};
?? ??? ?}

?? ??? ?function update(){
?? ??? ??? ?var pos = $window.scrollTop();
?? ??? ??? ?$this.each(function(){
?? ??? ??? ??? ?var $element = $(this);
?? ??? ??? ??? ?var top = $element.offset().top,
?? ??? ??? ??? ??? ?height = getHeight($element);
?? ??? ??? ??? ?// 判断这一区域是否已经进入到视线区域内
?? ??? ??? ??? ?if (top + height < pos || top > pos + windowHeight)return;

?? ??? ??? ??? ?$scrollPos = Math.round(ypos + (firstTop - pos) * speedFactor);
?? ??? ??? ??? ?$this.css('backgroundPosition', xpos + ' ' + $scrollPos + 'px');
?? ??? ??? ?});
?? ??? ?}
?? ??? ?$window.bind('scroll resize', update).scroll().resize();
?? ?};
})(jQuery);

在插件的头部有作者的页面，你可以进入看看作者制作的效果。

三、CSS部分 ↑

CSS部分其实和视差没有太多的关系，不过为了让视差表现出来，你必须做好布局。例如每一部分的宽度、高度，文字的样式，背景图片。这里要提醒的是，在插件中我们传递了前两个参数，表示了背景图片的起始位置，因此在css中设置的背景位置会失效。

本文实现的视差滚动非常简单，只能是垂直方向上的视差，没有水平方向上的。在一些大的网页内，不仅有垂直方向上的，还有水平方向上的，同时还有垂直于屏幕方向上的（图片的缩放），再加上一些渐隐渐现，实现更为华丽的3D效果。

四、一些优秀的滚动视差案例欣赏 ↑

Guy Vernes

parallax15

Campaign Monitor is Hiring

parallax01

International Watch Co

parallax03

cultural solutions uk

parallax02

Nike Better World

parallax04

Old Pulteney Row to the Pole

parallax05

parallax06

parallax07

parallax08

parallax09

Drupalcon Denver 2012

parallax11

parallax12

parallax13

通过一个网站，就可以让我们疯狂领略到瑞士的每个角落。跟着警察巡逻车，沿途可以看到最老牌的本土生意、普通的家庭生活、企业家们，还有多彩的鸟儿。视效太震撼了。像这样的作品真的让人感叹 HTML5 太强大了。我个人很喜欢鸣叫声的处理方式，以及他们对本土生意的描述。看完了这一切，脑中立马浮想联翩，激发出了很多灵感。

简单的视差滚动（基于jquery）

一、HTML结构 ↑

二、Jquery脚本 ↑

三、CSS部分 ↑

四、一些优秀的滚动视差案例欣赏 ↑

相关文章