AnimateScroll页面滚动动画jQuery插件

AnimateScroll 是一个简单的jQuery插件，它用来为滚动增加延迟效果。可以自定义滚动样式（30多种滚动效果）和滚动速度，还有一个可以操纵”滚动结束位置”的”padding”选项，这个插件不局限于整个页面，某个特定的包裹元素也可以作为其目标。
AnimateScroll是什么？

AnimateScroll是一个简单的滚动动画插件，项目地址：http://plugins.compzets.com/animatescroll。

AnimateScroll可以滚动到页面的任何部分，只需要调用animatescroll()方法，通过给他传递一个ID或者Class选择器，你就定位到你想要到达的地方。

它给用户提供了多种选择，可以以自定义滚动的方式，滚动的速度和更多的自定义选项。支持超过30种独特的滚动样式。
使用方法

要使用这个插件，你需要引入jQuery插件和animatescroll.js文件，注意需要将AnimateScroll文件放置到jQuery库的后面，这样准备工作就完成了。

注意：此插件工作的唯一依赖jQuery库。

在引入插件以后，调用插件即可，为了便捷操作，我们可以直接在元素上绑定AnimateScroll事件。
Go to Element

你可以通过下载源文件或者通过Bower包管理器安装AnimateScroll
bower install animatescroll

有两个JS文件，如果你不想要的各种动画的效果，你可以使用
animatescroll.noeasing.js
可选参数

AnimateScroll有6个可选的参数，他们分别是：

easing
scrollSpeed
padding
element
onScrollStart
onScrollEnd

easing (default: easing)

此选项定义了滚动样式。支持各种easy的动画效果，可以看到www.easings.net（只接受字符串）
scrollSpeed (default: 400)

控制滚动的速度，更高的是速度慢的是滚动速度（只接受数字）
padding (default: 0)

调整滚动的起伏。假定一个小的填充量被应用到一个特定的元素，由于该滚动没有结束在正确的位置，所以这个选项可以帮助您纠正（只接受数字，可以负）
element (default: html, body)

Added in v1.0.5. 你想要这个插件来工作的元素。默认是“body”。（接受任何jQuery/CSS选择器）
onScrollStart

Added in v1.0.7. 在滚动启动前要调用的函数
onScrollEnd

Added in v1.0.7. 一个在滚动结束后被称为动画的函数

添加自定义参数的方法
$(’[jquery selector]’).animatescroll({ : });
可选的动画效果

该插件支持超过30种不同的滚动风格。esay的选项让您选择一个特定的风格，根据您的选择。

不同的缓和效果是：
swing, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic,easeOutCubic, easeInOutCubic, easeInQuart,easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint,easeInOutQuint, easeInSine, easeOutSine, easeInOutSine,easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc,easeOutCirc, easeInOutCirc, easeInElastic, easeOutElastic,easeInOutElastic, easeInBack, easeOutBack, easeInOutBack,easeInBounce, easeOutBounce, easeInOutBounce
相关链接

问说网AnimateScroll示例地址
Github地址：https://github.com/ramswaroop/animatescroll.js
项目主页：http://plugins.compzets.com/animatescroll/

本文系作者 问说网 授权问说网发表，并经问说网编辑，转载请注明出处和 本文链接。
本站文章除注明转载外，均为本站原创或翻译，欢迎任何形式的转载，但请务必注明出处，尊重他人劳动。
转载请注明：文章转载自：问说网 » AnimateScroll页面滚动动画jQuery插件
本文标题：AnimateScroll页面滚动动画jQuery插件
本文地址：http://www.uedsc.com/animatescroll.html