AnimateScroll 页面滚动动画 jQuery 插件

发布于 2019-06-05 字数 4456 浏览 952 评论 0

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

AnimateScroll 页面滚动动画 jQuery 插件

AnimateScroll是什么?

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

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

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

使用方法

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

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

<script src="jquery.min.js"></script>
<script src="animatescroll.js">

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

<a onclick="$('[jquery selector]').animatescroll([options]);">Go to Element</a>

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

bower install animatescroll

有两个 JS 文件,如果你不想要的各种动画的效果,你可以使用

animatescroll.noeasing.js

可选参数

AnimateScroll 有 6 个可选的参数,他们分别是:

  1. easing
  2. scrollSpeed
  3. padding
  4. element
  5. onScrollStart
  6. 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({
  <optionName> : <optionValue>
});

可选的动画效果

该插件支持超过 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

相关链接

如果你对这篇文章有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助。

扫码二维码加入Web技术交流群

您暂时不能评论!

管理员开启了需要登录才能够评论,你可以免费注册一个本站的账号。

还没有评论!

目前还没有任何评论,快来抢沙发吧!