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

问题描述

问 题

解决方案

今天终于知道问题所在
以前用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>

这篇关于javascript - fullpage.js的easing参数怎样配置自定义动画或者引入插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！