20 个用于处理页面滚动效果的 jQuery 插件

 对设计和开发一个网站来讲,web开发者不能低估了网站滚动效果的重要性。现在,设计者们都视为一大挑战了,在网站中设计出吸引眼球的高效视觉滚动效果。幸运的是有各类各样的jquery 滚动插件可供他们使用,有了这些插件,他们能够根据页面滚动的位置作出不少吸引眼球的效果,像背景变换、动画等等。css

  本文中我收集了20款能够帮你实现很绚效果的Jquery滚动插件。 有了下面的这些jQuery滚动插件,你能够随意的让网站中的任何元素滚动, 使网站变得更加绚丽、吸引眼球。html

  1. One Page scroll

one-page-scroll

  One Page Scroll,一个jQuery插件,简化了相似网站的建立。它须要不多的设置,只须要建立HTML结构,调用函数就能够了。jquery

  可选的,easing功能,它的速度和循环行为也能够设置。并且,它已经支持对每一个页面SEO友好的URL。git

  2. Scrolld

scrolld

  Scrolld.js是一个jQuery的独特开源插件。Scrolld.js提供了一种完美的高精度的布局方法,且使用实时更新的数据值生成导航。使用Scrolld.js滚动到项目将永远精准且将提供最好的用户体验。Scrolld.js是专门为支持响应式布局而设计的,能够将页面长导航变成一个简单的任务栏。Scrolld.js设计初衷是为能方便使用,并可以在几分钟内快速部署。github

  3. Animate Scroll

animatescroll

  AnimateScroll 是一个简单的jQuery插件,它用来为滚动增长延迟效果. 能够自定义滚动样式(30多种滚动效果)和滚动速度. 还有一个能够操纵"滚动结束位置"的"padding"选项. 这个插件不局限于整个页面,某个特定的包裹元素也能够做为其目标.web

  4. JInvertScroll

jInvertScroll

  jInvertScroll 是一个操纵默认滚动行为和强制水平滚动的jQuery插件.它经过onScroll回调函数简化了视察效果的建立,咱们能够在onScroll回调函数中为任意元素增长动画效果.该插件很小,只有不到1KB大小,并且几乎不须要任何配置就能够工做. 为某个包裹元素添加一个特定的样式类而后调用一个JS方法就足够了.windows

  5. Smint

smint

  Smint 是一个帮助开发者在单页面风格的网站中建立导航. 它有两个主要的元素, 一个是不动的导航条,当你向下滚动页面的时候它会停留在页面的顶部,另外一个是菜单按钮,当你点击的时候会自动将页面滚动到相应的区域.浏览器

  SMINT插件很简单,因此只有一个控制页面滚动速度的选项. 默认的速度是500毫秒 (半秒钟),但你能够将它设置为任意你喜欢的值. 下载的文件中包含一个demo,因此你能够轻松地将它做为你本身单页面网站的模板.框架

  6. jQuery Arbitrary Anchor Plugin

arbitrary-anchors

  jQuery Arbitrary Anchor Plugin 容许页面滚动到页面中任意的基于jQuery/CSS选择器的对象上. 你能够经过在页面URL的#后面添加一个jQuery/CSS选择器来建立一个有用而且整洁的动态锚点滚动效果. 该插件继承了普通锚点的功能,也就是说,一个拥有名值属性的锚点标签仍然能够被正常地滚动到. 一个具备与锚点相同值的ID属性的元素也具备一样的效果. 这个小小的插件能够被应用到任何元素上.函数

  7. ScrollUp

scroll-up-jquery

  ScrollUp 是一个轻量级的jQuery插件,它用来轻松实现自定义能够在任意网站使用的"滚动到顶部"效果.若是想建立一个可见的线条来帮助肯定距离顶端的理想滚动距离,你须要为activeOverlay设置项制定一个有效的CSS颜色.ScrollUp能够经过CSS实现彻底可定制,这使得它能够被很容易的应用到你的项目中. 只须要在你的CSS文件中scrollUp生成的ID设置你的样式便可. 它是基于MIT协议发布的.

  8. jQuery Stick ‘em

jquery-stick-them

  jQuery Stick ‘em 可使内容在滚动的时候固定在某个点上.有时候,咱们有一些很高的图片. 因此当你滚动到图片的底部以后,你将不得不滚回到描述你刚才看的图片的文字处.

  解决办法就是当你滚动页面的时候把内容固定. 坑爹的是,咱们不能仅仅把文字的位置设置为:fixed,一旦滚动到页面底部就玩完了.因为有时候页面上会有不少部分,咱们不得不在某个点将内容"取消固定". 那么让咱们来解决这个问题,jQuery Stick'em就可以实现该功能.

  9. Infinity.js

Infinity

  Infinity.js是用于web的表格视图UI库:它可以加速长列表的滚动而且保证你的无限的数据流畅和稳定。它体积小,久经测试并且性能很好。这是Github上最火的代码,而且以BSD协议分发。被注释的源代码做为演示Infinity关闭与开启是可用的。

  Infinity.js是Airbnd公司开发的,除了流行许愿列表和朋友订阅部门,如今已经子啊平常的生产中使用。它只依赖于jQuery。

  10. jQuery Scroll Path

jQuery Scroll Path

  11. Mobiscroll

mobile-scroll

  Mobiscroll 是一个为移动设备(Android手机,iPhone,iPad,Galaxy Tab)准备的轮式滚动日期和时间的选择器.它能够被自定义来支持任意自定义的数值,也能够被用做对于本土选择控制的一个直观的替换. 它的样式是能够改变的.

  12. Page Scroller

page-scroller

  Page Scroller 是一个基于JavaScript的强大的流畅滚动导航系统,它使用强大的jQuery库. 该插件能够在任何网站上轻松建立.你能够选择导航菜单的位置,也能够轻松地改变滚动速度.滚动插件须要依赖jQuery1.3以上的版本.

  13. WayPoints

waypoints

  Waypoints是一个比较小的jQuery框架,经过它能够轻松的在任何滚动元素滚动状况下执行函数。Waypoints可根据用户在页面滚动的位置生成一个比较稳定的流行UI模式。Waypoints遵循MIT和GPL双重协议。 据测试,在jQuery 1.4版本以上兼容IE6+, FF3+, Safari 4+, 和 6+浏览器。

  14. 自定义滚动条插件

jquery-custom-content-scroller

  自定义滚动条插件充分利用了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

  Windows是一个轻量级屏幕滚动jQuery插件。 他提供有简单便利的API接口,让你很轻松的就能管理页面/内容的位置从而给网站带来更好的浏览体验。这个插件能够分析某定义的内容是否在视点,分析在视点的多少,而后能够触发任何事件,好比:经过滚动把页面调整到内容上。

  16. Perfect Scrollbar

perfect scrollbar

  Perfect Scrollbar(完美滚动条)是一个少于14kb的轻量级jQuery插件。它不会破坏原来的布局或者是必要的Css。本插对任何大小的元素容器都适用,如果某个容器大小变化了它能够从新调整排列位置。并且彻底能够自定义滚动条的样式,若是有须要你还能够外加jquery-mousewheel插件。

  17. Any List Scroller

any-list-scroller

  Any List Scroller 是一个很是方便的jQuery插件,它可以为任意列表在任意维度提供滚动.列表元素的大小是任意的, 它能够在第一个或者最后一个元素上中止,也能够无休止工做, 还有自动滚动,展现的元素的数量也是能够设置的.

  18. SuperScrollorama

SuperScrollOrama

  它使用了功能丰富的TweenMax 和the Greensock Tweening 引擎(在你使用以前请先查看它的协议)来完成效果. 与动画应用相似, 它容许咱们在元素出如今视角中或者某个特定的滚动点的时候为其添加tweens和时间轴.

  19. Scroll Follow

scroll-follow

  Scroll Follow 是一个容许DOM对象跟随用户滚动页面移动的jQuery插件. 这意味着它能够容许元素随着用户滚动页面的时候往下移动. Scroll Follow 已经成功的,尽管不普遍的,在IE6,IE7,FF2,FF3,Safari3和Opera9在Windows上经过了测试.你也能够设置滑动动画的延迟时间.

  20. Sly

Sly

  Sly 是一个能够经过不少有用的选项来提供基于物件(好比图片或者内容的galleries)的滚动效果的jQuery插件.在一个定义的容器元素内,里面的部件能够在滚动器或者它提供的方法,好比next,nextPage,toStart,toEnd,5 toStart等,的帮助下被浏览.

  原文地址:http://codegeekz.com/20-jquery-plugins-for-scrolling-effects/

相关文章
相关标签/搜索