常见网页特效整理

用户交互是近几年来兴起的一个词语，其实用户交互一直都有存在，不仅仅限于设计行业，其他领域也是存在的，只是因为设计这一职业更多的承担了这种工作。

用户交互是什么？仅仅是限于网页特效吗？在我个人理解看来，不仅仅限于流程上的严谨，清晰，便捷，在视觉上的友好互动同等重要。随着科技继续进步，还会有新的事物诞生，对于用户交互还会有新的定义补充，谁也不能做一个绝对权威的阐述，这里就不深入去讨论用户交互的定义了。

对于用户交互的研究，常见的一项便是网页特效，

无论是策划人员还是运营人员还是设计师，必须得对常见的交互特效有一定了解能让工作沟通更顺利，从而创造更美妙的作品出来。

下面简单总结一下个人的对于网页交互特效的整理

（曾几何时，在打杂的时期，也负责网页前端上的特效制作，作为对js程序爱莫能助的美工而言，只能从网上去找这些特效代码，然而起初想找网页特效却不知它叫什么名字，后来的工作里逐渐认识了它们，感谢懒人图库，让偷懒更有效率）

在懒人图库里很容易看到js特效栏里有如下的列表

具体的特效是什么样子，不熟悉的同学自己去查你就知道了，不懂就不要懒。

这里面的很多特效都是工作中常常会用到的，随着网页开发技术的日趋成熟，也出现了一些新的特效。

这些特效的常见的两个类型就是，滑动监听，元素缓动

滑动监听顾名思义就是监视鼠标滑动，当鼠标滑动到一定位置的时候执行一些操作（如板块移动，淡入淡出，放大缩小，属性改变）。

常见的滑动导航指示和html背景动画就是运用的这个原理

| 滑动导航指示

在jquery插件里有一个实用的插件叫jquery waypoints，便是最能代表这一特性的。

官方地址：http://imakewebthings.com/jquery-waypoints/#about

这款插件对于导航效果来说无疑是一个神器，可以让用户在浏览内容时知道自己浏览的类别是什么。导航位置是可以自己设定的，这样管理整个页面的内容就高效了。

| html背景动画

Html背景动画原理是根据鼠标滑动位置，替换整个网页或者部分区域的背景，就如同电影胶片一样利用视觉停留造成动画效果。

举个例子（如果专题地址无效了，偶也没办法了）

http://mho.qq.com/act/a20140326tenth/

随着鼠标滑动，整个页面的背景会随着变化，让用户也跟着体验了一回英雄历经艰险与战友会和的经历。这种html背景动画，无疑带来了一种新的用户体验效果，趣味性十足，对于提升品牌印象是有很大帮助的。

Html背景动画在一定程度上可以替代Flash动画，在兼容性方面也没多大问题。但是为了实现一定时间的动画效果，往往需要许多张图片的切换才能达到要求，为了快速加载往往会对图片进行压缩从而会严重影响视觉美感。

html元素缓动

http://www.wisdomfish.com 这是国内著名网页设计师韩雪东的最近的一个项目，整个页面很简洁，科技感和小清新在清新蓝的色调里得到了完美的融合。

这两处都运用到了元素缓动的特效，对于非前端工程师的人来说无需去明白里面的代码怎么编写，需要明白是这种特效能够给人带来什么样的感受

这种特效能够体现什么感受？

层次感：移动的部分相对于背景而言容易给人视觉上造成一种一近一远的错觉，让画面上的元素突破了面的限制。

动感：元素上的缓动在布局上打破传动布局的死板，整个画面不再是静止不动。

趣味感：许多网页界面设计上因为考虑到成本和团队实力的因素并没有采用这种特效，如果能在适当的地方运用上这种缓动的效果，对于客户而言是一种新的体验。

----------------------------------------------------------------------------------------------------------------

以上是简单的整理，希望对从事这一行的朋友能有所帮助。

对于网页特效的理解如果仅仅是限于套用的话，其价值并没完全得到体现。

就像这种简单的焦点图切换，可以把指示部分换一个方式和位置排列

以及把切换部分的内容 由图片换成一个页面，还可以把整个焦点图全屏化

总结到此为止！希望亲们有收获。

（我是不是总结得太精简了？嗯，好像是哦）

抱歉没有大片大片的留白让你们滑动到累觉不爱，尽量在一个较短的版面里展示了。

诶，等等，我还想知道html5和CSS3呢，还有那个鸡哎丝又是什么东西呢？

请自己动手查。