关于fullpage.js 和animate.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;
}
***************************************图片自己匹配********************************************
关于fullpage.js 和animate.css制作全屏简单大方的首页的更多相关文章
- fullpage.js与animate.css搭配使用
jquery的fullpage.js插件的使用 https://alvarotrigo.com/fullPage/#3rdPage 官网 https://github.com/alvarotrig ...
- 麦子学院bootstrap实战项目官网，后台，jquery.singlePageNav.min.js ，wow.min.js，animate.css使用
1.源码笔记 我的源码+笔记(很重要):链接: https://pan.baidu.com/s/1eSxgLV0 密码: 2pi2 感谢麦子学院项目相关视频:链接: https://pan.baidu ...
- javascript JSMpeg.js 播放视频解决不用全屏也能播放(也支持自动播放哦)
javascript JSMpeg.js 播放视频解决不用全屏也能播放(也支持自动播放哦) 缺陷就是 因为采用的是 MPEG1解码器 所以清晰度有点低 做直播可以考虑下 如果要清晰度高点 可以采取序列 ...
- CSS之全屏背景图
吐槽啦:Yeah 明天就是国庆了o(*￣▽￣*)o!哈哈,提前祝福各位园友国庆快乐.假期愉快.生活美满.天天开心!国庆我要回家一趟,把一些不用的东西带回家,走访一下亲朋好友,在家打几天酱油~~~ 言 ...
- WOW.js和animate.css让页面滚动时显示动画
官网:http://mynameismatthieu.com/WOW/ bootstrap CDN服务:http://www.bootcdn.cn/wow/ 1.wow.js 实现了在网页滚动时的动画 ...
- CSS--使用Animate.css制作动画效果
一 使用Animate.css动画 // 通过@import引入外部CSS资源; // 引入线上图片及JS文件; // 通过更改CSS类名生成不同类型的CSS3动画; <!DOCTYPE h ...
- WOW.js 和 animate.css 使用
animate.css 动画样式,用户也可以非常容易修改设置喜欢的动画库. Wow.js 允许用户滚动页面的时候展示 CSS 动画.配合animate.css ,做出很棒的效果,它支持 animate ...
- FullPage.js-基于 jQuery 的插件全屏滚动插件
fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站.如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容, ...
- Animate.css动画库，简单的使用，以及源码剖析
animate.css是什么?能做些什么? animate.css是一个css动画库,使用它可以很方便的快捷的实现,我们想要的动画效果,而省去了操作js的麻烦.同时呢,它也是一个开源的库,在GitHu ...
随机推荐
- Linux系统下公式编辑器KLatexFormula
方法1:源码安装 https://blog.csdn.net/ouening/article/details/79008636 方法2:通过apt-get 安装 首先安装libqt4-sql-sqli ...
- eclipse 注销和取消注销
单行注释: CTRL + / 当行取消注释(一样的): CTRL + / 多行注释: CTRL + SHIFT + / 多行取消注释(斜杠换成反斜杠): CTRL + SHIFT + \
- 深入理解无穷级数和的定义（the sum of the series）
Given an infinite sequence (a1, a2, a3, ...), a series is informally the form of adding all those te ...
- lsof and dynamic array in bash/shell
https://unix.stackexchange.com/questions/171519/lsof-warning-cant-stat-fuse-gvfsd-fuse-file-system F ...
- [knowledge][perl][pcre][sed] sed / PCRE 语法/正则表达式
一直用sed一直没有正经的学过语法,一直一知半解的用着. 因为,它用来perl的语法,要想搞懂,首先要搞懂perl,系统的入个门... 之前,man sed,man了好多次,总是没找到关键内容,今天在 ...
- 转载：SDWebImage支持URL不变时更新图片内容
转载 http://blog.handy.wang/blog/2016/01/29/sdwebimagehuan-cun-zhi-tu-pian-urlbu-bian/ SDWebImage在iOS项 ...
- Java基础知识之集合
Collection集合 特点:长度可变,只能存储引用类型,可以存储不同的类型的元素 list 特点:元素有序(存储和取出的顺序一致),元素可以重复.list除了可以用迭代器循环遍历之外,因为其是有序 ...
- 关于分页Pagination的使用
在这个例子当中,用的是ssm框架整合,并且用的是Pagination实现分页 先来看一下分页中用到的类的源码 Paginable.java package cn.itcast.common.page; ...
- Docker镜像推送（push）到Docker Hub
镜像构建成功后,只要有docker环境就可以使用,但必须将镜像推送到Docker Hub上去.我们之前创建的镜像不符合Docker Hub的tag要求,因为 在Docker Hub注册的用户名是boo ...
- mysql之event
mysql之event http://blog.csdn.net/lxgwm2008/article/details/9088521 Mysql事件调度器(Event Scheduler)类似于定时器 ...