视差滚动效果对于一些展示型的网页,再适用不过了。我们可以用这种效果来展示我们的产品,我们的宣传海报,甚至世界上人口迁移的历史等等。视差滚动已被广泛运用,滚动就像动画效果一样,让网页充满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>博 客:<a href="http://www.nunubi.com" target="_blank">努努比</a> 新浪微博:<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效果。
四、一些优秀的滚动视差案例欣赏 ↑
通过一个网站,就可以让我们疯狂领略到瑞士的每个角落。跟着警察巡逻车,沿途可以看到最老牌的本土生意、普通的家庭生活、企业家们,还有多彩的鸟儿。视效太震撼了。像这样的作品真的让人感叹 HTML5 太强大了。我个人很喜欢鸣叫声的处理方式,以及他们对本土生意的描述。看完了这一切,脑中立马浮想联翩,激发出了很多灵感。
所谓的视差滚动(Parallax Scrolling)就是很多重叠的图片的移动速度不同,带来的类似3d体验。 是2013年以来即响应式web设计,扁平化设计等体验后的又一视觉体验。能够给用户强烈的人与网页互动的感觉。是网站提升用户体验的几个革命性技术,可切网络专注web前端技术,推出scrollax.js视差滚动js解决方案,并面向所有人提供视差滚动开发服务。 http://shicha.keqie.com