Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
473 views
in Technique[技术] by (71.8m points)

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

图片描述


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...