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

猜你喜欢

转载自blog.csdn.net/qq_41170620/article/details/89703405