關於fullpage.js 和animate.css製做全屏簡單大方的首頁
附上源碼：css
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登陸註冊</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/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="./guidePage.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="3.png" alt="">
<div class="btnwrap">
<div class="btn register">註冊</div>
<div class="btn login">登陸</div>
</div>
</div>
<i class="" style="width: 30px;height: 28px;position: absolute;bottom: 30px;left: 50%"></i>
<a href="#page2" class="animate-bounce-down">
<img src="4.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="5.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="6.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="7.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="8.png" alt="" style="width: 100%;display: block">
</a>
</div>
<!--第6屏-->
<div class="section re six" id="mysix" >
<img src="9.png" class="only-logo">
<div class="text">
<div class="boss">
<p class="text-p ">在這裏，人人都能是好做者</p>
<p class="text-p ">如今就開始吧</p>
<p class="text-p-last ">成爲做者其實很簡單，只需提供基本資料，即可開通專欄</p>
</div>
<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 slideInLeft')
$('.one .valus2').addClass('animated slideInLeft')
},
onLeave:function (index,nextIndex,direction) {
if(index==1&&nextIndex==2){
$('.one .valus1').removeClass('animated slideInLeft')
$('.one .valus2').removeClass('animated slideInLeft')
$('.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 .boss').addClass('animated slideInDown')
$('.five .five-img').removeClass('animated slideInDown')
$('.five .five-text').removeClass('animated slideInUp')
}
if(index==6&&nextIndex==5){
$('.six .boss').removeClass('animated slideInDown')
$('.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 slideInLeft')
$('.one .valus2').addClass('animated slideInLeft')
$('.two .two-img').removeClass('animated slideInDown')
$('.two .two-text').removeClass('animated slideInUp')
}
}
});
});
$(".login").click(function(){
window.location.href ='./login';
});
$(".register").click(function(){
window.location.href ='./register';
});
</script>
</body>
</html>
***************************************css********************************************
body{
margin: 0;
padding: 0;
}
/*小圓點樣式*/
#fp-nav ul li, .fp-slidesNav ul li {
display: block;
width: 14px;
height: 13px;
margin: 15px 0;
position: relative;
}
#fp-nav ul li a span, .fp-slidesNav ul li a span{
position: absolute;
z-index: 1;
/*border: 0;*/
background: #DDDDDD;
left: 50%;
top: 50%;
height: 12px;
width: 12px;
transition: width 2s;
/*border: 4px solid #f95e58;*/
}
#fp-nav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li a.active span, .fp-slidesNav ul li:hover a.active span {
height: 12px;
width: 12px;
margin: -6px 0 0 -6px;
border-radius: 100%;
border: 4px solid #C4E0FF;
background-color: #2382EA;
/* -webkit-transform: translateX(-4px);
-moz-transform: translateX(-4px);
-ms-transform: translateX(-4px);
transform: translateX(-4px);*/
}
#fp-nav ul li:hover a span, .fp-slidesNav ul li:hover a span{
height: 12px;
width: 12px;
margin: -6px 0 0 -6px;
border-radius: 100%;
border: 4px solid #C4E0FF;
background-color: #2382EA;
}
/*箭頭上下跳動*/
@-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: 43px;
width: 166px;
}
.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{
background-image: url("https://pro-kg-oss.oss-cn-beijing.aliyuncs.com/author/inlet/6.1@3x.png");
background-size: cover;
background-repeat: no-repeat;
}
.six .only-logo{
z-index: 6;
height: 43px;
width: 166px;
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;
font-weight: bold;
}
.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("https://pro-kg-oss.oss-cn-beijing.aliyuncs.com/author/inlet/5.1@3x.png");
background-size: cover;
background-repeat: no-repeat;
}
.five .five-img{
width:627px;
height:406px;
background-image: url("https://pro-kg-oss.oss-cn-beijing.aliyuncs.com/author/inlet/5.2@3x.png");
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);
font-weight: bold;
}
.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("https://pro-kg-oss.oss-cn-beijing.aliyuncs.com/author/inlet/4.1@3x.png");
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);
font-weight: bold;
}
.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("https://pro-kg-oss.oss-cn-beijing.aliyuncs.com/author/inlet/4.2@3x.png");
background-repeat: no-repeat;
background-size: cover;
margin-left: 84px;
}
/*第三屏幕*/
.three{
display: flex;
align-items: center;
justify-content: center;
background-image: url("https://pro-kg-oss.oss-cn-beijing.aliyuncs.com/author/inlet/3.1@3x.png");
background-size: cover;
background-repeat: no-repeat;
}
.three .three-img{
width:556px;
height:355px;
background-image: url("https://pro-kg-oss.oss-cn-beijing.aliyuncs.com/author/inlet/3.2@3x.png");
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);
font-weight: bold;
}
.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("https://pro-kg-oss.oss-cn-beijing.aliyuncs.com/author/inlet/2.1@3x.png");
background-size: cover;
background-repeat: no-repeat;
}
.two .two-img{
width:571px;
height:478px;
background-image: url("https://pro-kg-oss.oss-cn-beijing.aliyuncs.com/author/inlet/2.2@3x.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);
font-weight: bold;
}
.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("https://pro-kg-oss.oss-cn-beijing.aliyuncs.com/author/inlet/1.1@3x.png");
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: 43px;
width: 166px;
position: absolute;
left: 99px;
top: 38px;
}
.one .valus1{
display: block;
width: 350px;
height: auto;
margin-left: 300px;
}
.one .valus2{
display: block;
width: 350px;
height: auto;
margin-left: 504px;
margin-top: 42px;
}
***************************************圖片本身匹配********************************************
相關文章
- 1. 關於fullPage.js使用方法
- 2. FullPage.js – 輕鬆實現全屏滾動（單頁網站）效果
- 3. 全屏滾動實現：fullPage.js和fullPage
- 4. 基於Vue的單頁應用，首屏加載優化方案
- 5. 簡單的網站首頁
- 6. 《fullPage.js》建立全屏滾動的網站
- 7. 大二製做-去哪網首頁
- 8. HTML製作簡單首頁導航
- 9. 移動端開發全屏遮罩層的簡單製做
- 10. Vue 單頁應用 的 首屏優化
- 更多相關文章...
- • Docker 命令大全 - Docker教程
- • ASP.NET Web Pages - 全局頁面 - ASP.NET 教程
- • 適用於PHP初學者的學習線路和建議
- • TiDB 在摩拜單車在線數據業務的應用和實踐
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章