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

其他 2018-06-15 17:22:50 阅读次数: 3

附上源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆注册</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/fullPage.js/2.9.7/jquery.fullpage.min.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/fullPage.js/2.9.7/jquery.fullpage.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css">
    <link rel="stylesheet" href="test.css">
</head>
<body>
<!--箭头给相应的锚点就可以了-->
<div id="fullpage">
    <div class="header fixed">
        <img src="./1.png"  class="logo_left">
        <div class="btn-wrapper">
            <div class="btn register">注册</div>
            <div class="btn login">登录</div>
        </div>
    </div>


    <!--第1屏-->
    <div class="section re one">
        <div>
            <img src="./1.png"  class="only-logo">
            <img class="valus1"  src="./2.png" alt="">
            <img class="valus2" src="./1.png" alt="">
            <div class="btnwrap">
                <div class="btn register">注册</div>
                <div class="btn login">登录</div>
            </div>
        </div>

        <i class="&#xe605;" style="width: 30px;height: 28px;position: absolute;bottom: 30px;left: 50%"></i>

        <a href="#page2" class="animate-bounce-down">
            <img src="./arrow.png" alt="" style="width: 100%;display: block">
        </a>
    </div>
    <!--第2屏-->
    <div class="section re two"  >
        <div class="two-text" >
            <p class="p1">多元内容自由创作</p>
            <p class="p2">文章、视频、音频</p>
            <p class="p2">自由实现多种形式展示你的思想火花</p>
        </div>
        <div class="two-img"></div>
        <a href="#page3" class="animate-bounce-down">
            <img src="./arrow.png" alt="" style="width: 100%;display: block">
        </a>
    </div>
    <!--第3屏-->
    <div class="section re three" >
        <div class="  three-img"></div>
        <div class="  three-text " >
            <p class="p1">真正的个性化内容定义

            </p>

            <p class="p2">给自己的文章加上关键词标签</p>
            <p class="p2">读者群体你来决定

            </p>
        </div>
        <a href="#page4" class="animate-bounce-down">
            <img src="./arrow.png" alt="" style="width: 100%;display: block">
        </a>
    </div>
    <!--第4屏-->
    <div class="section re four" >
        <div class="four-text" >
            <p class="p1">动态粉丝数据</p>
            <p class="p1">让你与你的粉丝更贴近</p>
            <p class="p2">粉丝数据实时更新</p>
            <p class="p2">每日增长数据看得见，告别数据等待</p>
        </div>
        <div class="four-img"></div>
        <a href="#page5" class="animate-bounce-down">
            <img src="./arrow.png" alt="" style="width: 100%;display: block">
        </a>
    </div>
    <!--第5屏-->
    <div class="section re five" >
            <div class="  five-img"></div>
            <div class="  five-text " >
                <p class="p1">动态粉丝数据</p>
                <p class="p1">让你与你的粉丝更贴近</p>
                <p class="p2">粉丝数据实时更新</p>
                <p class="p2">每日增长数据看得见，告别数据等待</p>
            </div>
        <a href="#page6" class="animate-bounce-down">
            <img src="./arrow.png" alt="" style="width: 100%;display: block">
        </a>
    </div>
    <!--第6屏-->
    <div class="section re six" id="mysix" >
        <img src="./1.png"  class="only-logo">
        <div class="text">
            <p class="text-p">在这里，人人都能是好作者</p>
            <p class="text-p">现在就开始吧</p>
            <p  class="text-p-last">成为作者其实很简单，只需提供基本资料，便可开通专栏</p>
            <div class="btn-wrapper">
                <div class="btn register">注册</div>
                <div class="btn login">登录</div>
            </div>
        </div>
    </div>
</div>
<script>
    $(function(){
        $('#fullpage').fullpage({
            navigation           :true,                            //圆点导航
            navigationPosition   :'left',                        //圆点导航位置left or right
//            navigationTooltips   :['第一屏','第二屏','第三屏'],    //圆点导航提示信息
            showActiveTooltip    :true,                            //圆点导航提示信息是否显示
            anchors              :['page1','page2','page3','page4','page5','page6'],    //设置锚点
            menu                 :'.header',                        //导航  menu：绑定菜单，设定相关属性与anchors的值相对应后，菜单可以控制滚动，默认为false；
            verticalCentered     :false,                        //设置元素是否垂直居中
            scrollingSpeed       :1000,                            //设置切屏速度
// 回调函数的使用
//            滚动到某一屏后的回调函数
            afterLoad:function (p1,index) {
                if(index==1||index==6){
                    $('.header').css('display','block')
                    $('.header').removeClass('show-header')
                }else{
                    $('.header').css('display','block')
                    $('.header').addClass('show-header')
                }
               /* if(index==1){
                    $('.one .valus1').addClass('animated bounceInLeft')
                    $('.one .valus2').addClass('animated bounceInRight')
                }*/
            },
//            页面结构生成后的回调函数，或者说页面初始化完成后的回调函数
            afterRender:function () {
                $('.header').css('display','none')
                $('.one .valus1').addClass('animated bounceInLeft')
                $('.one .valus2').addClass('animated bounceInRight')
            },
            onLeave:function (index,nextIndex,direction) {
                if(index==1&&nextIndex==2){
                    $('.one .valus1').removeClass('animated bounceInLeft')
                    $('.one .valus2').removeClass('animated bounceInRight')
                    $('.two .two-img').addClass('animated slideInDown')
                    $('.two .two-text').addClass('animated slideInUp')
                }
                if(index==2&&nextIndex==3){
                    $('.two .two-img').removeClass('animated slideInDown')
                    $('.two .two-text').removeClass('animated slideInUp')
                    $('.three .three-img').addClass('animated slideInDown')
                    $('.three .three-text').addClass('animated slideInUp')
                }
                if(index==3&&nextIndex==4){
                    $('.four .four-img').addClass('animated slideInDown')
                    $('.four .four-text').addClass('animated slideInUp')
                    $('.three .three-img').removeClass('animated slideInDown')
                    $('.three .three-text').removeClass('animated slideInUp')
                }
                if(index==4&&nextIndex==5){
                    $('.five .five-img').addClass('animated slideInDown')
                    $('.five .five-text').addClass('animated slideInUp')
                    $('.four .four-img').removeClass('animated slideInDown')
                    $('.four .four-text').removeClass('animated slideInUp')
                }
                if(index==5&&nextIndex==6){
                    $('.six .text-p').addClass('animated bounce fadeInLeftBig')
                    $('.six .text-p-last').addClass('animated bounce fadeInRightBig')
                    $('.five .five-img').removeClass('animated slideInDown')
                    $('.five .five-text').removeClass('animated slideInUp')
                }
                if(index==6&&nextIndex==5){
                    $('.six .text-p').removeClass('animated bounce fadeInLeftBig')
                    $('.six .text-p-last').removeClass('animated bounce fadeInRightBig')
                    $('.five .five-img').addClass('animated slideInDown')
                    $('.five .five-text').addClass('animated slideInUp')
                }
                if(index==5&&nextIndex==4){
                    $('.five .five-img').removeClass('animated slideInDown')
                    $('.five .five-text').removeClass('animated slideInUp')
                    $('.four .four-img').addClass('animated slideInDown')
                    $('.four .four-text').addClass('animated slideInUp')
                }
                if(index==4&&nextIndex==3){
                    $('.four .four-img').removeClass('animated slideInDown')
                    $('.four .four-text').removeClass('animated slideInUp')
                    $('.three .three-img').addClass('animated slideInDown')
                    $('.three .three-text').addClass('animated slideInUp')
                }
                if(index==3&&nextIndex==2){
                    $('.two .two-img').addClass('animated slideInDown')
                    $('.two .two-text').addClass('animated slideInUp')
                    $('.three .three-img').removeClass('animated slideInDown')
                    $('.three .three-text').removeClass('animated slideInUp')
                }
                if(index==2&&nextIndex==1){
                    $('.one .valus1').addClass('animated bounceInLeft')
                    $('.one .valus2').addClass('animated bounceInRight')
                    $('.two .two-img').removeClass('animated slideInDown')
                    $('.two .two-text').removeClass('animated slideInUp')
                }

            }
        });
    });
</script>
</body>
</html>

、、******************************************css

body{
    margin: 0;
    padding: 0;
}
/*小圆点样式*/
#fp-nav ul li a span, .fp-slidesNav ul li a span{
    position: absolute;
    z-index: 1;
    border: 0;
    background: #2382EA;
    left: 50%;
    top: 50%;
    transition: all .1s ease-in-out;
}

/*箭头上下跳动*/
@-webkit-keyframes bounce-down {
  25% {-webkit-transform: translateY(-10px);}
  50%, 100% {-webkit-transform: translateY(0);}
  75% {-webkit-transform: translateY(10px);}
 }

 @keyframes bounce-down {
  25% {transform: translateY(-10px);}
  50%, 100% {transform: translateY(0);}
  75% {transform: translateY(10px);}
 }

 .animate-bounce-down{
     display: block;
     position: absolute;
     left: 50%;
     bottom: 20px;
     z-index: 996;
     width: 30px;
     height: 30px;
     -webkit-animation: bounce-down 2s linear infinite;
     animation: bounce-down 2s linear infinite;
 }
/*头条样式*/
.header {
    /* -webkit-transform: translateY(-80px);
     -moz-transform: translateY(-80px);
     -ms-transform: translateY(-80px);
     transform: translateY(-80px);
     -webkit-transition: -webkit-transform .3s;
     transition: -webkit-transform .3s;
     -moz-transition: transform .3s,-moz-transform .3s;
     transition: transform .3s;
     transition: transform .3s,-webkit-transform .3s,-moz-transform .3s;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
     background: #fff;
     z-index: 3;
     height: 76px;
     width: 100%;
     -webkit-box-shadow: 0 1px 10px hsla(0,7%,56%,.08);
     -moz-box-shadow: 0 1px 10px hsla(0,7%,56%,.08);
     box-shadow: 0 1px 10px hsla(0,7%,56%,.08);*/

    background: #ffffff;
    z-index: 3;
    height: 80px;
    width: 100%;
    -webkit-box-shadow: 15px 0px 38px rgba(132,152,179,0.21);
    -moz-box-shadow: 15px 0px 38px rgba(132,152,179,0.21);
    box-shadow:15px 0px 38px rgba(132,152,179,0.21);


    transition: transform .3s,
    -webkit-transform .3s,
    -moz-transform .3s;
    transform: translateY(-80px);

}
.show-header {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}
.fixed {
    position: fixed;
    top: 0;
    left: 0;
}
.header .logo_left {
    position: absolute;
    left: 38px;
    top: 22px;
    height: 35px;
    width: 68px;
}
.header .btn-wrapper {
    position: absolute;
    bottom: 15px;
    right: 40px;
}
.header .btn-wrapper .register {
    background-color: #fff;
    border: 1px solid #2382EA;
    color: #2382EA;
}
.header .btn-wrapper .login {
    background-color: #2382EA;
    color: #fff;
}
.header .btn-wrapper .btn {
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 120px;
    height: 50px;
    /**/
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    margin-left: 10px;
    line-height: 50px;
    cursor: pointer;
    -webkit-user-select: none;
    text-align: center;
    font-size: 16px;
}
/*第6屏*/
.six .only-logo{
    z-index: 6;
    height: 35px;
    width: 68px;
    position: absolute;
    left: 99px;
    top: 38px;
}
.six .text{
    position: absolute;
    top: 50%;
    left: 50%;
    transform:translate(-50%,-50%);
    text-align: center;
}
.six .text .btn-wrapper {
    padding-top: 50px;
}
.six .text .btn-wrapper .register {
    background-color: #fff;
    border: 1px solid #2382EA;
    color: #2382EA;
}
.six .text .btn-wrapper .login {
    background-color: #2382EA;
    color: #fff;
}
.six .text .btn-wrapper .btn {
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 150px;
    height: 50px;
    /**/
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    margin-left: 30px;
    line-height: 50px;
    cursor: pointer;
    -webkit-user-select: none;
    text-align: center;
    font-size: 16px;
}
.six .text .text-p{
    font-size:36px;
    font-family:MicrosoftYaHei-Bold;
    color:rgba(63,68,76,1);
    padding-top: 28px;
    margin: 0;
}
.six .text .text-p-last{
    font-size:24px;
    font-family:MicrosoftYaHei;
    color:rgba(102,102,102,1);
    padding-top: 28px;
    margin: 0;
}
.border{
    border: 1px solid red;
}
.re{
    position: relative;
}
.inline{
    display: inline-block;
}
/*第5屏幕*/
.five{
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("2.png");
    background-size: cover;
    background-repeat: no-repeat;
}
.five  .five-img{
    width:627px;
    height:406px;
    background-image: url("3.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}
.five .five-text{
    height:413px;
    margin-left: 123px;
    display: flex;
    flex-flow: nowrap column;
    justify-content: center;
}
.five .five-text .p1{
    font-size:36px;
    font-family:MicrosoftYaHei-Bold;
    color:rgba(63,68,76,1);
}
.five .five-text .p2{
    font-size:24px;
    font-family:MicrosoftYaHei;
    color:rgba(102,102,102,1);
}
.five .five-text p{
    margin: 0;
    padding-bottom: 30px;
}
/*第四屏幕*/
.four{
    background-image: url("4.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}
.four .four-text{
    height:413px;
    /*margin-left: 123px;*/
    display: flex;
    flex-flow: nowrap column;
    justify-content: center;
}
.four .four-text .p1{
    font-size:36px;
    font-family:MicrosoftYaHei-Bold;
    color:rgba(63,68,76,1);
}
.four .four-text .p2{
    font-size:24px;
    font-family:MicrosoftYaHei;
    color:rgba(102,102,102,1);
}
.four .four-text p{
    margin: 0;
    padding-bottom: 28px;
}
.four .four-img{
    width:524px;
    height:333px;
    background-image: url("2.png");
    background-repeat: no-repeat;
    background-size: cover;
    margin-left: 84px;
}
/*第三屏幕*/
.three{
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("2.png");
    background-size: cover;
    background-repeat: no-repeat;
}
.three .three-img{
    width:556px;
    height:355px;
    background-image: url("3.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}
.three .three-text{
    height:413px;
    margin-left: 123px;
    display: flex;
    flex-flow: nowrap column;
    justify-content: center;
}
.three .three-text .p1{
    font-size:36px;
    font-family:MicrosoftYaHei-Bold;
    color:rgba(63,68,76,1);
}
.three .three-text .p2{
    font-size:24px;
    font-family:MicrosoftYaHei;
    color:rgba(102,102,102,1);
}
.three .three-text p{
    margin: 0;
    padding-bottom: 28px;
}
/*第2屏幕*/
.two{
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("2.png");
    background-size: cover;
    background-repeat: no-repeat;
}
.two .two-img{
    width:571px;
    height:478px;
    background-image: url("1.png");
    background-repeat: no-repeat;
    background-size: cover;
    margin-left: 84px;
}
.two .two-text{
    height:413px;
    /*margin-left: 123px;*/
    display: flex;
    flex-flow: nowrap column;
    justify-content: center;
}
.two .two-text .p1{
    font-size:36px;
    font-family:MicrosoftYaHei-Bold;
    color:rgba(63,68,76,1);
}
.two .two-text .p2{
    font-size:24px;
    font-family:MicrosoftYaHei;
    color:rgba(102,102,102,1);
}
.two .two-text p{
    margin: 0;
    padding-bottom: 30px;
}

/*第一屏幕*/
.one{
    background-image: url("4.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}
.one  .btn{
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 192px;
    height: 58px;
    /**/
    -webkit-border-radius: 29px;
    -moz-border-radius: 29px;
    border-radius: 29px;
    margin-left: 30px;
    line-height: 60px;
    cursor: pointer;
    -webkit-user-select: none;
    text-align: center;
    font-size: 20px;
}
.one  .register{
    background: none;
    border: 1px solid #FFFFFF;
    color: #FFFFFF;
    font-size:24px;
    font-family:MicrosoftYaHei;
}
.one  .login{
    background-color: #fff;
    color: #2382EA;
    font-size:24px;
    font-family:MicrosoftYaHei;
}
.one  .btnwrap{
    padding-top: 112px;
    margin-left: 300px;
}
.one .only-logo{
    z-index: 6;
    height: 35px;
    width: 68px;
    position: absolute;
    left: 99px;
    top: 38px;
}
.one .valus1{
    display: block;
    width: 387px;
    height: 83px;
    margin-left: 300px;
}
.one .valus2{
    display: block;
    width: 387px;
    height: 83px;
    margin-left: 504px;
    margin-top: 42px;
}
***************************************图片自己匹配*********************************************

猜你喜欢

转载自www.cnblogs.com/myfirstboke/p/9188163.html
今日推荐
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
周排行
rbac——界面、权限
Apache CXF + SpringMVC 整合发布WebService
so插件化
Vue.js实战系列---图标字体制作（svg格式）
PAT乙级 1007 素数对猜想(孪生素数对) (20分) ---（C语言 + 详细注释）
被IRM保护的文档，打开失败
Calendar和Date计算日期差的小问题
win10子系统ubuntu18.4安装docker
利用Wrap Shell Script定位Android Native内存泄漏
MySQL: Transaction (Part I - Basic Concept)
每日归档
更多
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022