jQuery实现的视差滚动教程

开发 前端
作为今年网页设计的热点趋势,越来越多的网站应用了这项技术。现在越来越多的网站采用视差水平滚动来创建绚丽的效果,其实这样的效果使用jquery实现的。

视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。作为今年网页设计的热点趋势,越来越多的网站应用了这项技术。现在越来越多的网站采用视差水平滚动来创建绚丽的效果,其实这样的效果使用jquery实现的,今天就给大家分享一下这样的效果实现原理,下一次在做网站的时候你就可以使用这样的效果作出绚丽的效果

1 – 创建基本的html

首先创建最基本的html文件架构 ,这个就不多说了,代码如下:

  1. <div id="header"> 
  2.             <h1 id="logo">Clouds demo</h1> 
  3.          <ul id="menu"> 
  4.              <li><a href="#box1" class="link">Home</a></li> 
  5.              <li><a href="#box2" class="link">Box 2</a></li> 
  6.              <li><a href="#box3" class="link">Box 3</a></li> 
  7.              <li><a href="#box4" class="link">Box 4</a></li> 
  8.        </ul> 
  9.      </div><!-- end header --> 
  10.      <div id="wrapper"> 
  11.          <ul id="mask"> 
  12.              <li id="box1" class="box"> 
  13.                  <a name="box1"></a> 
  14.                  <div class="content"><div class="inner">主页</div></div> 
  15.              </li><!-- end box1 --> 
  16.              <li id="box2" class="box"> 
  17.                  <a name="box2"></a> 
  18.                  <div class="content"><div class="inner">Box 2</div></div> 
  19.              </li><!-- end box2 --> 
  20.              <li id="box3" class="box"> 
  21.                  <a name="box3"></a> 
  22.                  <div class="content"><div class="inner">Box 3</div></div> 
  23.              </li><!-- end box3 --> 
  24.              <li id="box4" class="box"> 
  25.                  <a name="box4"></a> 
  26.                  <div class="content"><div class="inner">Box 4</div></div> 
  27.              </li><!-- end box4 --> 
  28.          </ul><!-- end mask --> 
  29.      </div><!-- end wrapper --> 

定义一个header的ID标记,然后下面有个四个导航,用于切换的

2 – 一些CSS代码

创建一个新的CSS文件 ,把它定义成layout.css

  1. /*** Style Definitions ***/ 
  2.  html                { background:#67b2fffont-family:ArialHelveticasans-serif; }  
  3.     
  4.  /*** Header ***/ 
  5.  h1#logo                { background:url(../images/Logo.png) top left no-repeatheight:62pxwidth:481px;  
  6.                          text-indent:-9999pxposition:absolute; top:10px; left:10px; }  
  7.     
  8.  #menu                { float:rightposition:absolute; top:20px; right:10pxz-index:10; }  
  9.     
  10.  #menu a                { background:#FFFcolor:#67b2ffborder:#AAA 3px solid;  text-decoration:nonepadding:10px;  
  11.                          margin-right:10px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;}  
  12.     
  13.  #menu a:hover        { background:#67b2ffcolor:#FFFborder:#FFF 3px solidtext-decoration:nonepadding:10px;  
  14.                          margin-right:10px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;}  
  15.     
  16.  #menu li            { float:left; }  
  17.     
  18.  /*** Body Content ***/ 
  19.  #wrapper    { width:100%height:100%position:absolute; top:0; left:0overflow:hidden; }  
  20.     
  21.  #mask        { width:400%height:100%; }  
  22.     
  23.  .box        { width:25%height:100%float:left; }  
  24.     
  25.  .content    { width:960pxheight:400px; top:20%margin0 autoposition:relativebackground:rgba(255,255,2550.3);  
  26.                  border-radius:35px; -moz-border-radius:35px; -webkit-border-radius:35px; }  
  27.     
  28.  .inner        { width:920pxheight:360pxbackground:rgba(2552552550.3); border-radius:30px; -moz-border-radius:30px;  
  29.                      -webkit-border-radius:30pxmargin:5pxpadding:15px; top:5pxposition:relative; } 

这些CSS代码相信你能看到吧,我简单解释一下 ,我们把需要滚动的区域放在id为wrapper的DIV内,无论他在那个地方一定要保证他滚动的固定性。id为mask的标记做为具体的滑动实现,他的宽度是100%,因为这里有4个区域需要全屏滚动,所以他的宽度设置为400。

我们想让每个方形盒子在屏幕的中间,所以给每个方形盒子定义一个li元素哦。然后定义CSS3 border-radius圆角和rgba背景颜色来创建一个半透明的漂亮边框圆角效果,到这里为止创建的效果如下所示。

第3步 - 使用jQuery来创建效果

上面基本的网站架构做好之后并没有使用javascript,现在我们开始使用jquery创建有趣的滚动效果,我们使用ScrollTo的jquery插件来达到我们想要的效果,首先引入jquery文件。

  1. <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>  
  2. <script type="text/javascript" src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js"></script> 

然后打开这个文件看到最基本的jquery语法。

  1. $(document).ready(function() {    
  2.         $('a.link').click(function () {    
  3.             $('#wrapper').scrollTo($(this).attr('href'), 800);  
  4.             return false;    
  5.         });    
  6.     }); 

就这么简单,看看这个代码做个什么。

1,确保整个页面加载之前运行脚本。

2 ,增加了点击监听所有<a>标签。在这种情况下,这是我们的导航菜单中的所有链接,但我们可以添加“链接”类行为的任何页面上的链接。然后,我们指定一个动作,点 击检测功能。

3 呼吁#包装的div的scrollTo插件,并传递给它的目的地,并以毫秒为单位的时间来完成动画。

4取消点击浏览器的默认行为。

现在我们知道如何滚动一个特定的div的内容,让我们在头部背景增加自己的DIV内容

  1. <div id="cloud1" class="clouds"> 
  2. <div id="clouds-small"></div> 
  3. </div><!-- end clouds --> 
  4. <div id="cloud2" class="clouds"> 
  5. <div id="clouds-big"></div> 
  6. </div><!-- end clouds --> 

增加CSS效果代码

  1. /*** Clouds ***/ 
  2. .clouds        { width:100%height:262pxoverflow:hidden; }  
  3. #clouds-small    { width:3000pxheight:100%background:url(../images/bg-clouds-small.png) repeat-x;}  
  4. #cloud2        { position:relative; top:-262px; }  
  5. #clouds-big    { width:4000pxheight:100%background:url(../images/bg-clouds-big.png) repeat-x;} 

上面的代码,我增加了尺寸和背景图片的div,全屏宽度,以适应滚动和定位,效果如下图

第4步 - 完成所有的动作

我们几乎完成了!之前,我使用了scrollTo插件来进行移动,我需要写一个小的辅助功能,将告诉它移动定位到那个DIV。将有4点,我们需要设置,

  1. function setPosition(check, div, p1, p2, p3, p4) {  
  2.      if(check==='#box1')  
  3.          {  
  4.              $(div).scrollTo(p1, 800);  
  5.          }  
  6.      else if(check==='#box2')  
  7.          {  
  8.              $(div).scrollTo(p2, 800);  
  9.          }  
  10.      else if(check==='#box3')  
  11.          {  
  12.              $(div).scrollTo(p3, 800);  
  13.          }  
  14.      else  
  15.          {  
  16.              $(div).scrollTo(p4, 800);  
  17.          }  
  18.  }; 
  1. $(document).ready(function() {    
  2.      $('a.link').click(function () {    
  3.          $('#wrapper').scrollTo($(this).attr('href'), 800);  
  4.          //add this line  
  5.          setPosition($(this).attr('href'), '#cloud1''0px''400px''800px''1200px')  
  6.          //end add this  
  7.          return false;    
  8.      });    
  9.  }); 

到这里每个云将移动400个像素,看他们之间的差异像素大小

  1. $(document).ready(function() {    
  2.         $('a.link').click(function () {    
  3.         $('#wrapper').scrollTo($(this).attr('href'), 800);  
  4.         setPosition($(this).attr('href'), '#cloud1''0px''400px''800px''1200px')  
  5.         //add this line  
  6.         setPosition($(this).attr('href'), '#cloud2''0px''800px''1600px''2400px')  
  7.         //end add this  
  8.         return false;    
  9.     });    
  10. }); 

添加后续的云div,注意这里的div设置成800个像素了,这点需要大家注意

  1. $(document).ready(function() {     
  2.     $('a.link').click(function () {     
  3.         $('#wrapper').scrollTo($(this).attr('href'), 800);   
  4.         setPosition($(this).attr('href'), '#cloud1''0px''400px''800px''1200px')   
  5.         setPosition($(this).attr('href'), '#cloud2''0px''800px''1600px''2400px')   
  6.         //add this   
  7.         $('a.link').removeClass('selected');     
  8.         $(this).addClass('selected');   
  9.         //end add this   
  10.         return false;     
  11.     });     
  12. }); 
  1. #menu a.selected {   
  2. background:#AAA;   
  3. color:#FFF;   
  4. border:#67b2ff 3px solid;   
  5. text-decoration:none;   
  6. padding:10px;  
  7. margin-right:10px;   
  8. border-radius:10px;  
  9.  -moz-border-radius:10px;   
  10. -webkit-border-radius:10px;  

这个是css边框圆角效果 ,下面是演示效果。 Demo

原文链接:http://www.cnblogs.com/web8cn/archive/2012/08/09/effect_using_jquery.html

【编辑推荐】

责任编辑:张伟 来源: 创想中国的博客
相关推荐

2014-12-31 13:49:34

ScrollViewScroll ViewParallax

2012-09-27 09:33:30

WebJSjQuery

2011-09-02 10:14:10

JQuery滚动Xslider

2012-05-10 14:02:46

jQuery

2011-09-02 10:03:40

jQuery滚动图片

2011-09-02 09:49:29

JQuery图片滚动

2013-04-02 13:04:07

ListView平滑滚

2011-09-01 13:17:46

JQuery滚动

2022-04-12 07:37:08

CSS滚动视差效果前端

2011-05-11 15:10:21

jQueryCSS导航栏

2012-05-10 10:36:53

jQuery

2023-11-22 07:47:34

2012-05-28 13:38:41

HTML5

2015-09-09 11:05:52

3d视差引导页

2024-01-22 09:28:23

CSS前端滚动驱动

2009-06-24 10:58:21

jQuery插件教程

2012-06-23 20:06:21

jQuery

2021-08-16 14:45:38

鸿蒙HarmonyOS应用

2011-09-02 10:41:51

2011-07-22 13:30:52

JavaScript
点赞
收藏

51CTO技术栈公众号