fullpage.js插件实现全屏滚动
来源:互联网 发布:怎样通过网络挣钱 编辑:程序博客网 时间:2024/06/14 04:47
现在很多官方网站都会采用全屏滚动的设计方式,全屏滚动加上简单的描述就能营造出高端大气的效果,实现全屏滚动的插件有很多,例如iscroll,fullpage等,今天着重学习一下fullpage.js插件
参考文章:http://blog.csdn.net/qianqianyixiao1/article/details/47148329
一.fullpage.js介绍
以下来自官网说明:
支持鼠标滚动
支持前进后退和键盘控制
多个回调函数
支持手机、平板触摸事件
支持 CSS3 动画
支持窗口缩放
窗口缩放时自动调整
可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等
二.fullpage.js兼容性
以下来自官网说明:
fullPage.js 支持 IE8+ 及其他现代浏览器。
三.使用方法
1.首先下载相关插件:
css部分:
js部分:
2.html部分
//注:每一个分页面的class一定要包含section,否则fullpage.css无法识别样式<div id="indexList"> <div class="section active"> <h1 id="page1_h1">第一屏</h1> </div> <div class="section"> <h1 id="page2_h1">第二屏</h1> </div> <div class="section"> <h1 id="page3_h1">第三屏</h1> </div> <div class="section"> <h1 id="page4_h1">第四屏</h1> </div></div>
3.实现页面切换和动画效果
注:此处动画采用animate.css处理
$(function(){ $("#indexList").fullpage({ sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'rgb(156, 206, 139)'], afterLoad:function(anchorLink, index){//index从1开始 if(index == 1){ $("#page1_h1").addClass("animated fadeInLeft"); } if(index == 2){ $("#page2_h1").addClass("animated bounce"); } if(index == 3){ $("#page3_h1").addClass("animated fadeIn"); } if(index == 4){ $("#page4_h1").addClass("animated fadeInLeft"); } }, onLeave:function(index, direction){ if(index == 1){ $("#page1_h1").addClass("animated fadeInLeft"); } } }); });
完整代码如下:fullpage.js的demo
附:
注:本图截取自http://blog.csdn.net/qianqianyixiao1/article/details/47148329文章
0 0
- 利用FullPage.js实现全屏滚动插件
- 利用fullpage.js插件实现全屏滚动
- fullpage.js插件实现全屏滚动
- FullPage.js全屏滚动插件
- fullpage.js---全屏滚动插件
- fullPage.js全屏滚动插件
- 全屏滚动插件fullPage.js
- 全屏滚动插件fullPage.js
- 全屏滚动实现:fullPage.js和fullPage
- jQuery全屏滚动插件fullPage.js
- jQuery全屏滚动插件fullPage.js
- jQuery全屏滚动插件fullPage.js
- jQuery全屏滚动插件fullPage.js演示
- jQuery全屏滚动插件fullPage.js
- jQuery全屏滚动插件fullPage.js
- jQuery全屏滚动插件fullPage.js
- jQuery全屏滚动插件fullPage.js
- jQuery全屏滚动插件fullPage.js
- Leetcode501. Find Mode in Binary Search Tree大道至简
- spring声明式事务【使用AOP】
- 【JAVA】SSH—Struts2常用标签
- 20170206(计算机网络词汇)
- python修改文件名
- fullpage.js插件实现全屏滚动
- Gradle 'Demo' project refresh failed
- 正交基
- 构造函数 定义,作用,分类
- 构造函数作用
- 蓝桥杯——2011 吉大计算机研究生机试真题(节选,2017.2.6)
- C/C++信息隐写术(三)之txt文件藏入BMP文件
- HTML鼠标滑过特效教程
- HTML渲染过程详解