当前位置:首页 > 资源 > 效果代码 > 正文

滚动视差含义及相关js插件介绍
栏目分类:效果代码   发布日期:2016-04-03   来源:   浏览次数:

什么是滚动视差?视差(Parallax)是指从不同的点看一个物体时形成的视觉差异,这个名词是源自希腊文的παράλλαξις (parallaxis),意思是改变。视差滚动(...
什么是滚动视差?

视差(Parallax)是指从不同的点看一个物体时形成的视觉差异,这个名词是源自希腊文的παράλλαξις (parallaxis),意思是”改变”。

视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。

视差效果,原本是一个天文学术语,当我们观察星空时,离我们远的星星移动速度较慢,离我们近的星星移动速度则较快。当我们坐在车上向车窗外 看时,也会有这样的感觉,远处的群山似乎没有在动,而近处的稻田却在飞速掠过。许多游戏中都使用视差效果来增加场景的立体感。

说的简单点就是网页内的元素在滚动屏幕时发生的位置的变化,然而各个不同的元素位置变化的速度不同,导致网页内的元素有层次错落的错觉,这和我们人体的眼球效果很像。我看到多家产品商用视差滚动效果来展示产品,从不同的空间角度和用户体验,起到了非常不错的效果。

收集的一些js插件:

1、ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果,帮助你的网站增加吸引力。只需要给元素增加 data-scrollreveal 属性,当元素进入可视区域的时候会自动被触发设置好的动画。 http://julianlloyd.me/scrollreveal/

2、Headroom.js – 快速响应用户的页面滚动操作http://wicky.nillia.ms/headroom.js/ 
摘要: Headroom.js 是一个轻量级,高性能的JS插件(无依赖性!),允许你响应用户的滚动行为。Headroom.js 使您能够在适当的时候把元素融入视图,而其它时候让内容成为焦点。Headroom.js 简单易用,它有一个纯 JS API,以及可选的 jQuery、Zepto 和 AngularJS 兼容的插件。

3、Parallax.js – 自适应智能设备方向的视差效果插件https://github.com/wagerfield/parallax/ 
Parallax.js 是一个简单的,轻量级的的视差引擎,能够对智能设备的方向作出反应。在没有没有陀螺仪或运动检测硬件可用的时候,使用光标的位置来代替。有很多的行为,你就可以设置为任何给定的视差实例。这些行为既可以通过在标记中指定的数据属性或通过构造函数 和 JavaScript API 调用。

4、Owl Carousel – 支持触摸的 jQuery 响应式传送带插件http://owlgraphic.com/owlcarousel/ 
Owl Carousel 是一个 jQuery 插件,使我们能够迅速地创建响应式传送带滑块。这个插件是触摸友好的,能与几乎任何的 HTML 内容兼容使用。另外,强大的选项设置支持分页/滑动速度,启用/禁用自动播放,显示子弹导航等等。

5、jQuery localscroll (文章之间顺差滚动插件)http://www.flesler.blogspot.com/2007/10/jquerylocalscroll-10.html

6、jQuery scrollTo (最主要的平滑滚动)http://www.flesler.blogspot.com/2007/10/jqueryscrollto.html

7、jQuery Inview (判断一篇文章是否在浏览)http://remysharp.com/2009/01/26/element-in-view-event-plugin/

8、jScrollPane 跨浏览器设置样式的滚动条与jQuery和CSShttp://jscrollpane.kelvinluck.com/index.html

相关热词:视差插件含义

最后一页:下一篇
Copyright © 2014 聚合分享 版权所有   京ICP备14037269号-1  关于聚合分享 | 广告合作 | 版权声明 | 意见反馈 | 联系方式 | 原创投稿 | 网站地图 | 友情链接
常用软件效果代码设计理论技术文章