20 个用于处理页面滚动效果的 jQuery 插件
对设计和开发一个网站来说,web开发者不能低估了网站滚动效果的重要性。如今,设计者们都视为一大挑战了,在网站中设计出吸引眼球的高效视觉滚动效果。幸运的是有各种各样的jquery 滚动插件可供他们使用,有了这些插件,他们可以根据页面滚动的位置做出很多吸引眼球的效果,像背景变换、动画等等。
本文中我收集了20款可以帮你实现很绚效果的Jquery滚动插件。 有了下面的这些jQuery滚动插件,你可以随意的让网站中的任何元素滚动, 使网站变得更加绚丽、吸引眼球。
1. One Page scroll
One Page Scroll,一个jQuery插件,简化了类似网站的创建。它需要很少的设置,只需要创建HTML结构,调用函数就可以了。
可选的,easing功能,它的速度和循环行为也可以设置。而且,它已经支持对每个页面SEO友好的URL。
2. Scrolld
Scrolld.js是一个jQuery的独特开源插件。Scrolld.js提供了一种完美的高精度的布局方法,且使用实时更新的数据值生成导航。使用Scrolld.js滚动到项目将永远精准且将提供最好的用户体验。Scrolld.js是专门为支持响应式布局而设计的,可以将页面长导航变成一个简单的任务栏。Scrolld.js设计初衷是为能方便使用,并能够在几分钟内快速部署。
3. Animate Scroll
AnimateScroll 是一个简单的jQuery插件,它用来为滚动增加延迟效果. 可以自定义滚动样式(30多种滚动效果)和滚动速度. 还有一个可以操纵"滚动结束位置"的"padding"选项. 这个插件不局限于整个页面,某个特定的包裹元素也可以作为其目标.
4. JInvertScroll
jInvertScroll 是一个操纵默认滚动行为和强制水平滚动的jQuery插件.它通过onScroll回调函数简化了视察效果的创建,我们可以在onScroll回调函数中为任意元素增加动画效果.该插件很小,只有不到1KB大小,而且几乎不需要任何配置就可以工作. 为某个包裹元素添加一个特定的样式类然后调用一个JS方法就足够了.
5. Smint
Smint 是一个帮助开发者在单页面风格的网站中创建导航. 它有两个主要的元素, 一个是不动的导航条,当你向下滚动页面的时候它会停留在页面的顶部,另一个是菜单按钮,当你点击的时候会自动将页面滚动到相应的区域.
SMINT插件很简单,所以只有一个控制页面滚动速度的选项. 默认的速度是500毫秒 (半秒钟),但你可以将它设置为任意你喜欢的值. 下载的文件中包含一个demo,所以你可以轻松地将它作为你自己单页面网站的模板.
6. jQuery Arbitrary Anchor Plugin
jQuery Arbitrary Anchor Plugin 允许页面滚动到页面中任意的基于jQuery/CSS选择器的对象上. 你可以通过在页面URL的#后面添加一个jQuery/CSS选择器来创建一个有用并且整洁的动态锚点滚动效果. 该插件继承了普通锚点的功能,也就是说,一个拥有名值属性的锚点标签仍然可以被正常地滚动到. 一个具有与锚点相同值的ID属性的元素也具有同样的效果. 这个小小的插件可以被应用到任何元素上.
7. ScrollUp
ScrollUp 是一个轻量级的jQuery插件,它用来轻松实现自定义可以在任意网站使用的"滚动到顶部"效果.如果想创建一个可见的线条来帮助确定距离顶端的理想滚动距离,你需要为activeOverlay设置项制定一个有效的CSS颜色.ScrollUp可以通过CSS实现完全可定制,这使得它可以被很容易的应用到你的项目中. 只需要在你的CSS文件中scrollUp生成的ID设置你的样式即可. 它是基于MIT协议发布的.
8. jQuery Stick ‘em
jQuery Stick ‘em 可以使内容在滚动的时候固定在某个点上.有时候,我们有一些很高的图片. 所以当你滚动到图片的底部之后,你将不得不滚回到描述你刚才看的图片的文字处.
解决办法就是当你滚动页面的时候把内容固定. 坑爹的是,我们不能仅仅把文字的位置设置为:fixed,一旦滚动到页面底部就玩完了.由于有时候页面上会有很多部分,我们不得不在某个点将内容"取消固定". 那么让我们来解决这个问题,jQuery Stick'em就能够实现该功能.
9. Infinity.js
Infinity.js是用于web的表格视图UI库:它能够加速长列表的滚动并且保证你的无限的数据流畅和稳定。它体积小,久经测试而且性能很好。这是Github上最火的代码,并且以BSD协议分发。被注释的源代码作为演示Infinity关闭与开启是可用的。
Infinity.js是Airbnd公司开发的,除了流行许愿列表和朋友订阅部门,现在已经子啊日常的生产中使用。它只依赖于jQuery。
10. jQuery Scroll Path
11. Mobiscroll
Mobiscroll 是一个为移动设备(Android手机,iPhone,iPad,Galaxy Tab)准备的轮式滚动日期和时间的选择器.它可以被自定义来支持任意自定义的数值,也可以被用作对于本土选择控制的一个直观的替换. 它的样式是可以改变的.
12. Page Scroller
Page Scroller 是一个基于JavaScript的强大的流畅滚动导航系统,它使用强大的jQuery库. 该插件可以在任何网站上轻松创建.你可以选择导航菜单的位置,也可以轻松地改变滚动速度.滚动插件需要依赖jQuery1.3以上的版本.
13. WayPoints
Waypoints是一个比较小的jQuery框架,通过它可以轻松的在任何滚动元素滚动情况下执行函数。Waypoints可根据用户在页面滚动的位置生成一个比较稳定的流行UI模式。Waypoints遵循MIT和GPL双重协议。 据测试,在jQuery 1.4版本以上兼容IE6+, FF3+, Safari 4+, 和 6+浏览器。
14. 自定义滚动条插件
自定义滚动条插件充分利用了jQuery的自带的强大自定义功能。它的特点是支持水平和垂直滚动、鼠标滚轮滚动(借助Brandon Aaron jquery mouse-wheel插件的功能)、易滚动和自适应滚动条高度和宽度。
你只需要简单的包含一下jquery.min.js 、jquery-ui.min.js,、the jquery.easing.1.3.js (处理动画的插件), jquery.mousewheel.min.js (为了让插件支持鼠标滚轮滚动)和 query.mCustomScrollbar.css(自定义内容和滚动条文件)
15. Windows
Windows是一个轻量级屏幕滚动jQuery插件。 他提供有简单便利的API接口,让你很轻松的就能管理页面/内容的位置从而给网站带来更好的浏览体验。这个插件可以分析某定义的内容是否在视点,分析在视点的多少,然后可以触发任何事件,比如:通过滚动把页面调整到内容上。
16. Perfect Scrollbar
Perfect Scrollbar(完美滚动条)是一个少于14kb的轻量级jQuery插件。它不会破坏原来的布局或者是必要的Css。本插对任何大小的元素容器都适用,若是某个容器大小变化了它可以重新调整排列位置。而且完全可以自定义滚动条的样式,如果有需要你还可以外加jquery-mousewheel插件。
17. Any List Scroller
Any List Scroller 是一个非常方便的jQuery插件,它能够为任意列表在任意维度提供滚动.列表元素的大小是任意的, 它可以在第一个或者最后一个元素上停止,也可以无休止工作, 还有自动滚动,展示的元素的数量也是可以设置的.
18. SuperScrollorama
它使用了功能丰富的TweenMax 和the Greensock Tweening 引擎(在你使用之前请先查看它的协议)来完成效果. 与动画应用类似, 它允许我们在元素出现在视角中或者某个特定的滚动点的时候为其添加tweens和时间轴.
19. Scroll Follow
Scroll Follow 是一个允许DOM对象跟随用户滚动页面移动的jQuery插件. 这意味着它可以允许元素随着用户滚动页面的时候往下移动. Scroll Follow 已经成功的,尽管不广泛的,在IE6,IE7,FF2,FF3,Safari3和Opera9在Windows上通过了测试.你也可以设置滑动动画的延迟时间.
20. Sly
Sly 是一个可以通过很多有用的选项来提供基于物件(比如图片或者内容的galleries)的滚动效果的jQuery插件.在一个定义的容器元素内,里面的部件可以在滚动器或者它提供的方法,比如next,nextPage,toStart,toEnd,5 toStart等,的帮助下被浏览.
原文地址:http://codegeekz.com/20-jquery-plugins-for-scrolling-effects/
20 个用于处理页面滚动效果的 jQuery 插件的更多相关文章
- 分享七款视差滚动效果的jQuery 插件
视差(Parallax)是指从不同的点看一个物体时形成的视觉差异,这个名词是源自希腊文的παράλλαξις (parallaxis),意思是”改变”.在网页设计中,视差滚动(Parallax Scr ...
- Page Scroll Effects - 简单的页面滚动效果
Codyhouse 收集了一组页面滚动效果,就是目前大家很常见的用户在浏览网页的时候.一些效果虽然极端,但如果你的目标是创建一个身临其境的用户体验,他们是非常有用的.所有的动画都使用 Velocity ...
- 用jquery实现平滑的页面滚动效果
通过几句jquery代码实现页面平滑滚动到某一锚点的效果.实现代码来源于https://css-tricks.com/snippets/jquery/smooth-scrolling 实现的jquer ...
- Scroll Depth – 衡量页面滚动的 Google 分析插件
Scroll Depth 是一个小型的 Google Analytics(谷歌分析)插件,可以让你衡量用户在页面上滚动了多远.它可以监控 25%.50%.75% 和 100% 四个滚动点,并发送谷歌分 ...
- aos.js超赞页面滚动元素动画jQuery动画库
插件描述:aos.js 是一款效果超赞的页面滚动元素动画jQuery动画库插件.该动画库可以在页面滚动时提供28种不同的元素动画效果,以及多种easing效果.在页面往回滚动时,元素会恢复到原来的状态 ...
- Permit.js – 用于构建多状态原型的 jQuery 插件
Permit.js 是一个 jQuery 插件,用于构建交互的,多态的网站原型和应用程序原型.也许你的网站有的功能仅适用于登录的成员,只有管理员才能使用或者你的应用程序会根据线上或离线有不同的功能,这 ...
- Stickup – 轻松实现元素固定效果的 jQuery 插件
粘贴是一个简单的 jQuery 插件,在页面滚动的时候固定一个元素到浏览器窗口的顶部,让其总是保持在视图中可见.这个插件作用于多页的网站,但是对于单页的布局有额外的功能.借助 CSS,还可以实现当前视 ...
- javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)
类似于幻灯片的切换效果,有时需要在网页中完成一些图片的自动切换效果,比如广告,宣传,产品介绍之类的,那么单纯的切就没意思了,需要在切换的时候通过一些效果使得切换生动些. 比较常用之一的就是窗帘切换了. ...
- 跨浏览器实现placeholder效果的jQuery插件
曾经遇到这样一个问题,处理IE8密码框placeholder属性兼容性.几经周折,这个方案是可以解决问题的. 1.jsp页面引入js插件 <script type="text/java ...
随机推荐
- 理解Mysql的索引与优化
转自:http://www.cnblogs.com/hustcat/archive/2009/10/28/1591648.html 写在前面:索引对查询的速度有着至关重要的影响,理解索引也是进行数据库 ...
- YII 配置文件
用YIIFramework的库开发 .... Yii::createWebApplication($config); //没有run Yii::import(class1,true),在将class1 ...
- APP测试时不可忽视搭建代理服务器抓包测试的必要性
这几天测的一个app,后台从已有服务器搬迁到了阿里云,接口api之类的都没有变化,但测试时发现客户端始终无法使用,每次点击都无法获得服务器反馈 用python编写脚本调接口,没问题,返回数据一切正常, ...
- 句柄(handle)
< Back 句柄,在windows编程中用来标识: *.模块(module) *.任务(task) *.实例(instance) *.文件(file) *.内存块(block of memor ...
- First step of using junit---------Software Testing Lab 1---2016.03.18
1. Install junit a) Download “junit.jar” b) In eclipse, Windows->Preferences->Java-& ...
- web前端笔试题
1, 判断字符串是否是这样组成的,第一个必须是字母,后面可以是字母.数字.下划线,总长度为5-20 var reg = /^[a-zA-Z][a-zA-Z_0-9]{4,19}$/; reg.test ...
- Mysql explain分析SQL语句之字段属性说明
在 explain的帮助下,您就知道什么时候该给表添加索引,以使用索引来查找记录从而让select 运行更快.如果由于不恰当使用索引而引起一些问题的话,可以运行 analyze table来更新该表的 ...
- [WebService]之DTD
文档类型定义(DTD)可定义合法的XML文档构建模块.它使用一系列合法的元素来定义文档的结构. DTD 可被成行地声明于 XML 文档中,也可作为一个外部引用. <?xml version=& ...
- mysql 的 GROUP_CONCAT
GROUP_CONCAT 通常跟 group by 一起用,但也可以不用.例:select GROUP_CONCAT(pct_id) as pct_ids from (select max(pct_i ...
- leetcode oj s_06
public class Solution { public static void main(String[] args) { String s = "PAYPALISHIRING&quo ...