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

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

        <title>ART000</title>

        <link rel="stylesheet" href="css/base.css" />

        <link rel="stylesheet" href="css/animate.min.css" />

        <link rel="stylesheet" href="css/jquery.fullpage.css" />

    </head>

    <body>

        <div id="fullpage">

            <div class="section">

            <div class="logo1">

                还好

            </div>

            <div class="logo2 animated fadeInDown">

                还好哈

            </div>

            </div>

            <div class="section">

                        第二屏

            </div>

            <div class="section">

                <div class="slide">第三屏的第一屏</div>

                <div class="slide">第三屏的第二屏</div>

                <div class="slide">第三屏的第三屏</div>

                <div class="slide">第三屏的第四屏</div>

            </div>

            <div class="section">第四屏</div>

        </div>

        <script src="https://cdn.bootcss.com/jquery/2.0.1/jquery.min.js"></script>

        <script src="js/jquery.fullpage.js"></script>

        <script src="js/scrolloverflow.js"></script>

        <script>

            $(function(){

                $('#fullpage').fullpage({

                    //单个屏幕内可滚动

                    scrollOverflow: true,

                    /**

                     * 滚动前的回调函数

                     * @param {Object} index   index 是离开的“页面”的序号，从1开始计算；

                     * @param {Object} nextIndex   nextIndex 是滚动到的“页面”的序号，从1开始计算；

                     */

                    onLeave: function (index, nextIndex) {

                        if(index==1){

                            $('.logo1').removeClass('rollIn animated');

                            $('.logo1').addClass('animated fadeOut');

                        }

                  },

                   /**

                    * 滚动到某一屏后的回调函数

                    * @param {Object} anchorLink    锚链接的名称

                    * @param {Object} index   index 是序号，从1开始计算

                    */

                   afterLoad: function(anchorLink,index){

                           if(index==1){

                               $('.logo1').removeClass('animated fadeOut');

                            　　$('.logo1').addClass('rollIn animated');

                       　　}

                   }

                });

            });

        </script>

    </body>

</html>

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. 【JS】点击页面判断是否安装app并打开,否则跳转下载的方法

    应用场景 App产品在运营推广上有一个需求,就是要求可以让用户在访问我们的推广网页时,就可以判断出这个用户手机上是否安装了我们的App,如果安装了则可以直接在网页上打开,否则就引导用户前往下载.从而形 ...

  2. 2018.07.20 atcoder Largest Smallest Cyclic Shift（贪心）

    传送门 题意:给你x个a,y个b,z个c,显然这些字符可以拼成若干字符串,然后求这些字符串中最小表示法表示出来的最大的那一个. 解法:贪心思想,用multiset维护现在拼成的字串,每次取一个最小的和 ...

  3. hdu-1116（欧拉回路+并查集）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1116 思路:将字符串的头元素和尾元素视为图的x,y节点,然后合并x,y. 如果这个图不连通,则门不能打 ...

  4. 微信第三方平台解密报错：Illegal key size

    今天在交接别人代码的时候遇到的,微信第三方平台解密报的错误,原因: 如果密钥大于128, 会抛出java.security.InvalidKeyException: Illegal key size ...

  5. CentOS里vim基本操作

    1.关于退出 :wq!  ----强制保存退出 :wq  ---- 保存退出 :x   ----- 作用和:wq 一样 ZZ  ---- 作用和:wq一样,(注意Z是大写的,并且不是在命令模式) :q ...

  6. IDEA SpringBoot Deprecated configuration property ‘server.servlet-path’

    错误样式如图所示.说我这个版本中的这个标签是过时的. 解决: 出现这个问题后,这个标签被IDEA化成了黄线,同时,想使用server.servlet-path=*.html,配置servlet路径跳转 ...

  7. LA 3213 Ancient Cipher （水题，转化）

    题意:给定两个长度相同的字符串,判断它们之间是否存在一一对应关系,顺序不定. 析:刚开始没看到顺序不定,然后写完没胡把样例看完就交了,结果WA了一次...其实这是一个水题,既然顺序不定,那么更简单,我 ...

  8. 信息管理代码分析<二>读取二进制文件数据

    first和end做为全局变量,分别指向链表的头和尾.建立链表的方式也比较简易,从二进制文件数据块中,依次从头到尾读取,每读取一个就建立一个结点. /*基本模型*/ EMP *emp1; while( ...

  9. TFlearn——（1）notMNIST

    1, 数据集简介    notMNIST, 看名字就知道,跟MNIST脱不了干系,其实就是升级版的MNIST,含有 A-J 10个类别的艺术印刷体字符,字符的形状各异,噪声更多,难度比 MNIST 要 ...

  10. Android 广播代码的发送与接收

    Android四大组件之一广播,使用的也比较多,广播可大致分为两种,一种是Android系统区域的广播,是由系统指令发出,例如:点亮屏幕广播,开机过程中的一些广播 省略-, 然而还有一种广播就是我们自 ...