有“镜头感”的网页是如何实现的-阿里云开发者社区

开发者社区> 开发与运维> 正文

有“镜头感”的网页是如何实现的

简介:

很早以前,“焦点图”这个名称就出现在了网页制作中,能够完成绚丽的图片切换效果。有很多由flash和jquery制作的焦点图,其特点就是一个比一个炫。其中有一种特效就是有镜头左右摇摆或是拉远拉近的视觉效果,如果你印象不深了,可以点击这里体验一下。随着CSS3的发布,我们可以利用它的变形、渐变、动画属性来代替jquery的动画函数,用更少的代码来实现这种有“镜头感的”效果。本文就将探索一下如何利用CSS3来制作一个有镜头感的网页。

  从最终效果来想想原理,在页面上依次出现的这些内容,其实一开始页面加载的时候就已经都在页面上了,只不过大部分内容都在浏览器窗口“之外”,我们看不到,等到需要显示它的时候,再通过改变它的定位,使它恰好出现了浏览器的可见区域内。如此一来我们需要解决两个问题。第一个,当页面上的内容超出浏览器区域时,会自动出现滚动条,对于浏览器之外的我们暂时不想让用户看到的内容,我们一定得藏好了,不能让用户通过滚动条来看到。解决这个问题比较简单,因为我们有overflow这个神器。只需一行代码:

body{overflow:hidden;}

  这样浏览器之外的部分就会藏的很好了。第二个问题来了,在显示某一块内容时,我们不单单是要改变这个内容区块的定位,因为我们发现在切换的过程中,其它区块的内容也会跟着动,也会时不时“掠过”可视区域,只不过是最终没有停留而已,如下图:

  所以可得出结论:要动的不是将显示的内容,而是整个所有内容,我们需要做的是在所有元素动完后,将显示的内容出现在镜头前。为此,我们需要把所有内容放置在一个大的背景层上。这个背景层与浏览器窗口的关系应该像是这样的:

  我们只需将这个大背景层移动合适的位置,就可以将想要显示的内容恰好出现在浏览器窗口中。那么,接下来就是如何移动它,才能模拟出是镜头移动的感觉。CSS3的transform允许设置元素的缩放(scale)、移动(translate)、旋转(rotate)、扭曲(skew),通过合理得组合利用这些属性,制作成一个keyframe,便可以模拟出不错的效果。以下是我所尝试的一个简单效果。整个页面的代码如下:

复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>有镜头感的网页</title>
<style>
body{overflow:hidden;}
#bg{ width:600px; height:800px; position:absolute;border:1px solid red; -webkit-transition:all 1s ease-out 0s;/*为可能的所有属性加上渐变效果*/
-webkit-animation-name:scale;/*关键帧名称*/
-webkit-animation-duration:1s;/*动画持续时间*/
-webkit-animation-timing-function:ease-out;/*速度变化函数*/
-webkit-animation-iteration-count:1;/*动画循环次数,设为infinite无限循环*/
-webkit-animation-play-state:paused;/*控制动画的播放和暂停。取值为running和paused*/
}
#bg img{width:200px; height:180px; position:relative;}
#img1{ left:10px; top:50px;}
#img2{ left:100px; top:100px;}
#img3{ left:130px; top:400px;}
#win{width:200px; height:180px; border:2px solid; position:absolute; left:800px; top:300px; z-index:2;}
@-webkit-keyframes scale{
         0%{
                   -webkit-transform:scale(1) rotate(0deg);
                   }
         50%{
                   -webkit-transform:scale(0.5) rotate(20deg);
                   }
         100%{
                   -webkit-transform:scale(1) rotate(0deg);
                   }
         }
</style>
<script type="text/javascript" src="../jquery.js"></script>
</head>

<body>
<input id="btn1" type="button" value="第一张" />
<input id="btn2" type="button" value="第二张" />
<input id="btn3" type="button" value="第三张" />
<div id="bg">
    <img id="img1" src="Chrysanthemum.jpg" />
    <img id="img2" src="Desert.jpg" />
    <img id="img3" src="Hydrangeas.jpg" />
</div>
<div id="win">
这是浏览器窗口
</div>
<script>
$(function(){
    var bg = $('#bg');
    var winLeft = $('#win').offset().left;
    var winTop = $('#win').offset().top;

//根据id展示某一张图片
function showImg(imgId){ var imgLeft = $('#'+imgId).position().left; var imgTop = $('#'+imgId).position().top; var newbgLeft = winLeft - imgLeft; var newbgTop = winTop - imgTop; bg.css({left:newbgLeft,top:newbgTop,'-webkit-animation-play-state':'running'}); bg.on('webkitTransitionEnd',function(e){    bg.css('-webkit-animation-play-state','paused'); }); } $('#btn1').click(function(){ showImg('img1'); }); $('#btn2').click(function(){ showImg('img2'); }); $('#btn3').click(function(){ showImg('img3'); }); }); </script> </body> </html>
复制代码

  CSS3动画相关的内容在此处就不做解释了,想要了解可以点击这里查看。简要说一下要点:

  1.为背景层设置-webkit-transition:all 1s ease-out 0s;使其的样式属性在发生变化时带有渐变效果。

  2.定义动画关键帧scale,改变缩放和旋转角度。定义背景层动画属性,初始为暂停。

  3.背景层的定位需要设为absolute,每次用js计算其对应的left值和top值,并修改。

  4.点击按钮时设置动画的属性'-webkit-animation-play-state':'running',即开始动画。

  5.监听webkitTransitionEnd事件,暂停动画。此事件是一次动画结束时触发,具体时间与属性-webkit-animation-duration对应。

  6.我在代码中只加了webkit前缀,所以请使用chrome浏览效果

  就这些要点了,此处只尝试了一个比较简单的动画。有兴趣可以编写更加炫的动画。愿能为大家提供思路~


本文转自吕大豹博客园博客,原文链接:http://www.cnblogs.com/lvdabao/p/3253798.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章