fullpage.js的easing参数怎样配置自定义动画或者引入插件

发布于 2022-09-04 14:40:24 字数 126 浏览 32 评论 0

图片描述

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

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

发布评论

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

评论(1

朮生 2022-09-11 14:40:25

今天终于知道问题所在
以前用fullpage的时候看文档都不是官方的上面并没有说明怎么用使用easing.js
图片描述
今天突发奇想去看看GitHub的文档结果神奇的发现这句话

Optionally, when using css3:false, you can add the jQuery UI library in case you want to use other easing effects apart from the ones included in the jQuery library (linear and swing ) or the one included by default in fullPage.js (easeInOutCubic).

译文:

可选地,当使用时css3:false,您可以添加jQuery UI库,以防您希望使用除jQuery库(linear和swing)中包含的其他缓动效果或默认情况下在fullPage.js(easeInOutCubic)中包含的其他效果)。

所以只需要像下面一样就行了
页头引入

<link href="https://cdn.bootcss.com/fullPage.js/2.9.4/jquery.fullpage.min.css" rel="stylesheet">

页尾引入

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-easing/1.4.1/jquery.easing.js"></script>
<script src="https://cdn.bootcss.com/fullPage.js/2.9.4/jquery.fullpage.min.js"></script>

重点

<script>
    $('.main').fullpage({
        css3:false,//需要把这个值设置为false
        easing:'easeOutBounce'//之后你就可以随意选择easing.js里面的动画效果名称了
    })
</script>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文