AnimateScroll 页面滚动动画 jQuery 插件

  • Z时代
  • 2024-01-10
  • 分类：IT

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

相关链接

  • Github地址：https://github.com/ramswaroop/animatescroll.js

  • 项目主页：http://plugins.compzets.com/animatescroll/

以上是 AnimateScroll 页面滚动动画 jQuery 插件 的全部内容， 来源链接： utcz.com/p/232158.html

回到顶部