fullpage.js全屏滚动插件使用实例全屏滚动插件使用实例
刚做好公司网站,通过全屏滚动,显著提高了官网的浏览体验。遂总结一下使用fullpage.js的方法。欢迎指正
一一. fullpage.js简介简介
fullpage.js是一套实现浏览器全屏滚动的js插件,很多网站现在都使用了其来实现较好的浏览体验。
可以实现的功能:
•支持前进后退和键盘控制
•多个回调函数
•支持手机、平板触摸事件
•支持 CSS3 动画
•支持窗口缩放
•窗口缩放时自动调整
•可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等
二二.插件下载插件下载
npm|npm install fullpage.js
bower|bower install fullpage.js
github|https://github.com/alvarotrigo/fullPage.js/
cdn|https://cdnjs.com/libraries/fullPage.js
三三.文件引入方式文件引入方式
<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.fullPage.js"></script>
注意:一定要先引入jquery,再引入fullpage。我刚开始写demo的时候,因为顺序错误,导致不能实现效果,浏览器报错fullpage.js
中的jquery未定义。
四四. 写写html代码代码
<div id="fullpage">
<div class="section">section1</div>
<div class="section">section2</div>
<div class="section">section3</div>
<div class="section">section4</div>
</div>
所有的内容包含在ID名为fullpage的div内,不可以给body加此。
评论0
最新资源