HTML5视差教程:青蛙,蝴蝶,草丛,池塘

我相信视差效果是一种能让你的读者在浏览网页时发出“哇塞”声的效果。所以,在这里,我将要向大家展示一个用jQuery实现的视差效果的例子。在本教程中,我将详细介绍如何用jQuery来移动景图达到具有动画视觉效果的内容。你可以把它放到网页的头部。

先看一下演示效果:

需要的背景图片

视差效果是利用图片的移动速度差实现的。这里我们使用了4张图片。下面是这四张图片的基本效果。

  1. 图层1:主背景图片,绿色池塘
  2. 图层2:重叠层,青蛙
  3. 图层3: 重叠层,草丛
  4. 图层4: 重叠层,蝴蝶

注意: 这第2,3,4张图片是具有透明效果的png图片。

jquery-parallax-instruction2

下面是一些可以获得免费背景图片的网站:

http://www.freevectordownload.com/Free_Vector_Banners.asp

http://www.vectorportal.com/

http://www.vectorjungle.com/

http://www.vectorjunky.com/

http://www.vecteezy.com/

提示:想编辑矢量图,你需要使用像Adobe Illustrator/Photoshop这样的软件。

实现代码

我们需要使用这个jparallax plugin,以及jquery.event.frame和最新的jQuery。把它们放到你的源代码里。

<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js/jquery.jparallax.min.js"></script>
<script type="text/javascript" src="js/jquery.event.frame.js"></script>

下面的代码是我们放置背景图的各个div元素,你需要把这些代码放到html页的body标记内。

<div id="parallax" class="clear">
	<div class="parallax-layer" style="width:1200px; height:250px;">
		<img src="images/grass.png" />
	</div>
	<div class="parallax-layer" style="width:500px; height:250px;">
		<img src="images/frog2.png" />
	</div>
   <div class="parallax-layer" style="width:1200px; height:300px;">
		<img src="images/butterflies3.png" />
   </div>
</div>

然后,在head标记内初始化你的视差jQuery插件:

<script type="text/javascript">
jQuery(document).ready(function() 
{
	$('#parallax .parallax-layer')
	.parallax({
		mouseport: $('#parallax')
	});
});
</script>  

下面是需要的CSS代码:

#parallax {
   position:relative; overflow:hidden; width:950px; height:250px;
   background-image:url('background.jpg');
}
.parallax-viewport {
    position: relative;     /* relative, absolute, fixed */
    overflow: hidden;
}
.parallax-layer {
    position: absolute;
}

完工

jquery-parallax-instruction1

视差运动的元素分成了几层,它们的CSS属性使用了绝对定位position:absolute;,这样才能通过调整它们的位置移动它们。而大背景是使用了相对定位position:relative; ,前景的移动是相对背景的。对于超出了视差之外的部分,我们使用overflow:hidden; 将其隐藏。而它们的高度和宽度应当和可视窗口保持配合。

技巧:调整图片的高度和宽度,你可以得到不同的速度。图片越小,当你移动鼠标时,相对于背景来说,会显得运动的越快。青蛙会左右移动,这是因为它的高度和窗口一样,但宽度较小。当你的鼠标上下移动时,蝴蝶的逆向运行的。

非常的漂亮吧。希望你能喜欢这个具有视差效果的横幅!

阅读余下内容
 

《“HTML5视差教程:青蛙,蝴蝶,草丛,池塘”》 有 7 条评论

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注


京ICP备12002735号