jquery的fullpage.js插件的使用

https://alvarotrigo.com/fullPage/#3rdPage   官网

https://github.com/alvarotrigo/fullPage.js   github源码

http://www.jq22.com/jquery-info1124  使用

https://zhidao.baidu.com/question/2011521041627168428.html  子页面滚动

http://lib.csdn.net/article/css3/37060  fullpage.js的API

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  6.         <title>ART000</title>
  7.         <link rel="stylesheet" href="css/base.css" />
  8.         <link rel="stylesheet" href="css/animate.min.css" />
  9.         <link rel="stylesheet" href="css/jquery.fullpage.css" />
  10.     </head>
  11.     <body>
  12.         <div id="fullpage">
  13.             <div class="section">
  14.             <div class="logo1">
  15.                 还好
  16.             </div>
  17.             <div class="logo2 animated fadeInDown">
  18.                 还好哈
  19.             </div>
  20.             </div>
  21.             <div class="section">
  22.                         第二屏
  23.             </div>
  24.             <div class="section">
  25.                 <div class="slide">第三屏的第一屏</div>
  26.                 <div class="slide">第三屏的第二屏</div>
  27.                 <div class="slide">第三屏的第三屏</div>
  28.                 <div class="slide">第三屏的第四屏</div>
  29.             </div>
  30.             <div class="section">第四屏</div>
  31.         </div>
  32.  
  33.         <script src="https://cdn.bootcss.com/jquery/2.0.1/jquery.min.js"></script>
  34.         <script src="js/jquery.fullpage.js"></script>
  35.         <script src="js/scrolloverflow.js"></script>
  36.         <script>
  37.             $(function(){
  38.                 $('#fullpage').fullpage({
  39.                     //单个屏幕内可滚动
  40.                     scrollOverflow: true,
  41.                     /**
  42.                      * 滚动前的回调函数
  43.                      * @param {Object} index   index 是离开的“页面”的序号，从1开始计算；
  44.                      * @param {Object} nextIndex   nextIndex 是滚动到的“页面”的序号，从1开始计算；
  45.                      */
  46.                     onLeave: function (index, nextIndex) {
  47.                         if(index==1){
  48.                             $('.logo1').removeClass('rollIn animated');
  49.                             $('.logo1').addClass('animated fadeOut');
  50.                         }
  51.                   },
  52.                    /**
  53.                     * 滚动到某一屏后的回调函数
  54.                     * @param {Object} anchorLink    锚链接的名称
  55.                     * @param {Object} index   index 是序号，从1开始计算
  56.                     */
  57.                    afterLoad: function(anchorLink,index){
  58.                            if(index==1){
  59.                                $('.logo1').removeClass('animated fadeOut');
  60.                             　　$('.logo1').addClass('rollIn animated');
  61.                        　　}
  62.                    }
  63.                 });
  64.             });
  65.         </script>
  66.  
  67.     </body>
  68. </html>
  69.

fullpage.js与animate.css搭配使用的更多相关文章

  1. 关于fullpage.js 和animate.css制作全屏简单大方的首页

    附上源码: html <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  2. 麦子学院bootstrap实战项目官网，后台，jquery.singlePageNav.min.js ，wow.min.js，animate.css使用

    1.源码笔记 我的源码+笔记(很重要):链接: https://pan.baidu.com/s/1eSxgLV0 密码: 2pi2 感谢麦子学院项目相关视频:链接: https://pan.baidu ...

  3. WOW.js和animate.css让页面滚动时显示动画

    官网:http://mynameismatthieu.com/WOW/ bootstrap CDN服务:http://www.bootcdn.cn/wow/ 1.wow.js 实现了在网页滚动时的动画 ...

  4. WOW.js 和 animate.css 使用

    animate.css 动画样式,用户也可以非常容易修改设置喜欢的动画库. Wow.js 允许用户滚动页面的时候展示 CSS 动画.配合animate.css ,做出很棒的效果,它支持 animate ...

  5. animate.css配合wow.min.js实现各种页面滚动效果

    有的页面在向下滚动的时候,有些元素会产生细小的动画效果.虽然动画比较小,但却能吸引你的注意.比如刚刚发布的 iPhone 6 的页面(查看).如果你希望你的页面也更加有趣,那么你可以试试 WOW.js ...

  6. vue项目中引入animate.css和wow.js

    本文转自:https://blog.csdn.net/liyunkun888/article/details/85003152 https://www.zhuimengzhu.com/content/ ...

  7. Animate.css 教程

    animate.css 是一个有趣,酷炫的,跨浏览器的动画库,你可以将它用于你的项目中.不管是主页,滑动切换,又或者是其它方面,你都可以通过它来制作出惊人的效果. 基本用法 引入CSS文件 这个对你来 ...

  8. fullpage.js的easing参数怎样配置自定义动画

    首先看非官方文档 并没有详细的说明怎样去使用easing.js,所以我加的运动属性根本就不起作用, 再看,官方文档 Optionally, when using css3:false, you can ...

  9. 动画库animate.css的用法

    简介 animate.css是一个来自国外的 CSS3 动画库,它预设了引起弹跳(bounce).摇摆(swing).颤抖(wobble).抖动(shake).闪烁(flash).翻转(flip).旋 ...

随机推荐

  1. echarts 使用配置模式（含事件）

    <!-- 引入echarts UMD 环境--> <script src="js/echarts/build/dist/echarts.js"></s ...

  2. 2018.10.08 NOIP模拟 栅栏（树状数组+rand）

    传送门 今天的送分题. 首先考虑每次给要围上栅栏的矩阵里的整体加上1,如果栅栏被撤销就整体减1,最后比较两个点的值是否相同来进行判断. 然而这样的效果并不理想,很容易卡掉. 进一步思考,我们第iii次 ...

  3. 2018.09.15 hdu3018Ant Trip（欧拉路）

    传送门 显然答案等于各个连通分量的笔画数之和. 因此我们dfs每个连通分量计算对答案的贡献. 对于一个连通分量,如果本来就有欧拉回路那么只需要一笔. 否则需要寄点数/2那么多笔才能画完. 知道这个结论 ...

  4. PyCharm2017破解版安装

    PyCharm2017破解版安装步骤: 1.右击软件压缩包选择解压到pycharm2017. 2.在解压文件夹里面找到pycharm-professional-171.3780.47,右击打开. 3. ...

  5. dev ChartControl 备忘

    一个chartControl 里包括以个diagram(图表) diagram里可以设置 x-axis与y-axis ,另外还可以设置SecondaryXAxis与SecondaryYAxis,在Se ...

  6. k8s容器挂载配置文件

    1.新建ConfigMap apiVersion: v1 kind: ConfigMap metadata: name: test-conf namespace: default labels: na ...

  7. IntelliJ IDEA 2017版 spring-boot使用Spring Data JPA搭建基础版的三层架构

    1.配置环境pom <?xml version="1.0" encoding="UTF-8"?> <project xmlns="h ...

  8. （并查集） Wireless Network --POJ --2236

    链接: http://poj.org/problem?id=2236 http://acm.hust.edu.cn/vjudge/contest/view.action?cid=82830#probl ...

  9. C++中的关键字用法---typename

    1. typename 关键字 "typename"是一个C++程序设计语言中的关键字.当用于泛型编程时是另一术语"class"的同义词.这个关键字用于指出模板 ...

  10. 【TypeScript】TypeScript 学习 4——模块

    前端数据验证在改善用户体验上有很大作用,在学了之前的知识的时候,我们很可能会写出以下代码: interface StringValidator { isAcceptable(s: string): b ...