fullpage的应用
先记录代码：css
HTML部分：html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>站酷商店案例</title>
<link rel="stylesheet" href="css/jquery.fullPage.css"/>
<link rel="stylesheet" href="css/zhankucss.css"/>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.fullPage.js"></script>
<script>
$(function(){
$(".container").fullpage({
'navigation': true,
anchors: ['page1', 'page2', 'page3', 'page4','page5'],
menu:'#menu',
verticalCentered:false
});
});
</script>
</head>
<body>
<!-- 定义上方导航栏-->
<header>
<div id="inner">
<div class="logo"><a href="index.html"><img src="images/logo.png" alt="站酷商店"/></a></div>
<nav>
<ul id="menu">
<li data-menuanchor="page1" class="active"><a href="#page1">首页</a></li>
<li data-menuanchor="page2"><a href="#page2">吉祥物语</a></li>
<li data-menuanchor="page3"><a href="#page3">Chow-Lee</a></li>
<li data-menuanchor="page4"><a href="#page4">北邦</a></li>
<li data-menuanchor="page5"><a href="#page5">赵娜</a></li>
</ul>
</nav>
</div>
</header>
<div class="container">
<div class="section home">
<img src="images/wenzi.png" alt="站酷商店"/>
</div>
<div class="section s1">
<div class="left">
<div><figure><img src="images/img1.png" alt="望"/><figcaption>望<br/>
30*1000px / 40*1250px</figcaption></figure>
<a href="#"></a></div>
<div><figure><img src="images/img2.png" alt="听"/><figcaption>听<br/>
30*1000px / 40*1250px</figcaption></figure>
<a href="#"></a></div>
<div><figure><img src="images/img3.png" alt="悟"/><figcaption>悟<br/>
30*1000px / 40*1250px</figcaption></figure>
<a href="#"></a></div>
</div>
<div class="right">
<h1>观止</h1>
<p>价格：99元起<br/>
艺术家：吉祥物语
</p>
<a href="#">站酷主页</a>
</div>
<div class="bg">
<img src="images/sc2.png" alt="站酷"/>
</div>
</div>
<div class="section s2">
<div class="left">
<div><figure><img src="images/img4.png" alt="Love"/><figcaption>Love<br/>
50*1500px</figcaption></figure>
<a href="#"></a></div>
<div><figure><img src="images/img5.png" alt="Filial"/><figcaption>Filial and eros aw<br/>
50*1500px</figcaption></figure>
<a href="#"></a></div>
<div><figure><img src="images/img6.png" alt="GoodTime"/><figcaption>Good Time<br/>
50*1500px</figcaption></figure>
<a href="#"></a></div>
</div>
<div class="right">
<h1>KIDS</h1>
<p>价格：249元<br/>
艺术家：Chow-Lee
</p>
<a href="#">站酷主页</a>
</div>
<div class="bg">
<img src="images/sc3.png" alt="站酷"/>
</div>
</div>
<div class="section s3">
<div class="left">
<div><figure><img src="images/img7.png" alt="绽开2009"/><figcaption>绽开2009<br/>
60*1500px</figcaption></figure>
<a href="#"></a></div>
<div><figure><img src="images/img8.png" alt="绽开2010"/><figcaption>绽开2010<br/>
50*1500px</figcaption></figure>
<a href="#"></a></div>
<div><figure><img src="images/img9.png" alt="绽开2011"/><figcaption>绽开2011<br/>
60*1500px</figcaption></figure>
<a href="#"></a></div>
</div>
<div class="right">
<h1>绽开</h1>
<p>价格：269元<br/>
艺术家：北邦
</p>
<a href="#">站酷主页</a>
</div>
<div class="bg">
<img src="images/sc4.png" alt="站酷"/>
</div>
</div>
<div class="section s4">
<div class="left">
<div><figure><img src="images/img10.png" alt="栖息"/><figcaption>栖息<br/>
50*1500px</figcaption></figure>
<a href="#"></a></div>
<div><figure><img src="images/img11.png" alt="惊蛰"/><figcaption>惊蛰<br/>
50*1500px</figcaption></figure>
<a href="#"></a></div>
<div><figure><img src="images/img12.png" alt="恬静"/><figcaption>恬静<br/>
50*1500px</figcaption></figure>
<a href="#"></a></div>
</div>
<div class="right">
<h1>沉睡的森林</h1>
<p>价格：249元<br/>
艺术家：赵娜
</p>
<a href="#">站酷主页</a>
</div>
<div class="bg">
<img src="images/sc5.png" alt="站酷"/>
</div>
</div>
</div>
</body>
</html>
CSS部分：jquery
*{
padding: 0;
margin:0;
font-family:"sans-serif";
}
li{
list-style: none;
}
a{
text-decoration:none;
}
/*为5个页面设置背景图片*/
.home{
background:url("../images/s1.jpg") center;
overflow: hidden;
}
.section{
overflow: hidden;
}
.s1{
background:url("../images/s2.jpg") center;
}
.s2{
background:url("../images/s3.jpg") center;
}
.s3{
background:url("../images/s4.jpg") center;
}
.s4{
background:url("../images/s5.jpg") center;
perspective:500px;/*perspective 属性定义 3D 元素距视图的距离，以像素计。该属性容许您改变 3D 元素查看 3D 元素的视图。*/
}
/*设置导航栏*/
#inner{
width: 980px;
margin: 0 auto;
}
header{
width: 100%;
height: 60px;
background-color: rgba(0,0,0,0.8);
position:fixed;
top:0;
left:0;
z-index: 1;
}
nav li{
display:inline-block;
}
nav{
float:left;
}
.logo{
float:left;
margin-top:16px;
margin-right:20px;
}
nav li a{
line-height: 60px;
padding: 0 20px;
color:#fff;
display: block;
height: 60px;
}
nav li a:hover,nav li.active{
background-color: #fc0;
color: rgba(0,0,0,0.8);
}
/*主体内容*/
/*第一页*/
.home img{
position: absolute;
top:50%;
left: 50%;
margin-left:-545px;
margin-top: -230px;
opacity: 0;
transition: 0.5s 0.7s;
}
.home.active img{
opacity: 1;
}
/*第二到第五页*/
.section .left{
position:absolute;
top:50%;
left:5%;
margin-top:-200px;
z-index:2;
}
.section .left div{
float: left;
margin-right: 20px;
transition: 0.5s;/*过渡功能公共能使用的方法*/
}
.section .left div figcaption{
font-size:18px;
color:#333;
margin: 20px 0;
}
.section .left div a{
width: 98px;
height: 36px;
display: block;
background: url("../images/buy.jpg");
}
.section .right{
position:absolute;
right: 5%;
top: 15%;
text-align: right;
z-index:3;
}
.section .right h1{
font-size:34px;
color:#333;
font-weight: bold;
}
.section .right p{
font-size: 18px;
color: #333;
line-height: 1.5em;
margin-top: 20px;
margin-bottom: 10px;
}
.section .right a{
color: #333;
text-decoration: underline;
}
.section .right a:hover{
text-decoration: none;
}
.section .bg img{
position:absolute;
bottom:0;
right: 0;
}
/*第二页特效*/
.s1 .left div{
-webkit-transform: translateY(1000px);
-moz-transform: translateY(1000px);
-ms-transform: translateY(1000px);
-o-transform: translateY(1000px);
transform: translateY(1000px);
}
.s1 .left div:nth-child(1){
transition-delay: 0.8s;/*:nth-child() 选择器:匹配属于其父元素的第 N 个子元素，不论元素的类型。*/
}
.s1 .left div:nth-child(2){
transition-delay:0.9s;
}
.s1 .left div:nth-child(3){
transition-delay:1.0s;
}
.s1.active .left div{
-webkit-transform:translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
/*第三页的特效*/
.s2 .left div:nth-child(2){
-webkit-transform: translateX(-279px);
-moz-transform: translateX(-279px);
-ms-transform: translateX(-279px);
-o-transform: translateX(-279px);
transform: translateX(-279px);
}
.s2 .left div:nth-child(3){
-webkit-transform: translateX(-558px);
-moz-transform: translateX(-558px);
-ms-transform: translateX(-558px);
-o-transform: translateX(-558px);
transform: translateX(-558px);
}
.s2 .left div{
transition-delay:0.8s;
}
.s2.active .left div{
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
transform: translateX(0px);
}
/*第四页的特效*/
.s3 .left div:nth-child(1){
-webkit-transform: translate(330px, -1000px);
-moz-transform: translate(330px, -1000px);
-ms-transform: translate(330px, -1000px);
-o-transform: translate(330px, -1000px);
transform: translate(330px, -1000px);
}
.s3.active .left div:nth-child(1){
-webkit-animation: move1 2s 0.8s forwards;/*forward定义动画完成后中止不从新再执行*/
-o-animation: move1 2s 0.8s forwards;
animation: move1 2s 0.8s forwards;
}
.s3 .left div:nth-child(2){
-webkit-transform: translate(0px,-1000px);
-moz-transform: translate(0px,-1000px);
-ms-transform: translate(0px,-1000px);
-o-transform: translate(0px,-1000px);
transform: translate(0px,-1000px);
}
.s3.active .left div:nth-child(2){
-webkit-animation: move2 2s 0.8s forwards;
-o-animation: move2 2s 0.8s forwards;
animation: move2 2s 0.8s forwards;
}
.s3 .left div:nth-child(3){
-webkit-transform: translate(-330px,-1000px);
-moz-transform: translate(-330px,-1000px);
-ms-transform: translate(-330px,-1000px);
-o-transform: translate(-330px,-1000px);
transform: translate(-330px,-1000px);
}
.s3.active .left div:nth-child(3){
-webkit-animation: move3 2s 0.8s forwards;
-o-animation: move3 2s 0.8s forwards;
animation: move3 2s 0.8s forwards;
}
/*设置动画*/
@-webkit-keyframes move1{
0%{-webkit-transform:translate(330px,-1000px); transform:translate(330px,-1000px)}
20%{-webkit-transform:translate(330px,0); transform:translate(330px,0)}
40%{-webkit-transform:translate(330px,-50px);transform:translate(330px,-50px) }
60%{-webkit-transform:translate(330px,0);transform:translate(330px,0) }
100%{-webkit-transform:translate(0,0);transform:translate(0,0) }
}
@keyframes move1{
0%{transform:translate(330px,-1000px)}
20%{ transform:translate(330px,0)}
40%{transform:translate(330px,-50px) }
60%{transform:translate(330px,0) }
100%{transform:translate(0,0) }
}
@-webkit-keyframes move2{
0%{-webkit-transform:translate(0,-1000px); transform:translate(0,-1000px)}
20%{-webkit-transform:translate(0,0); transform:translate(0,0)}
40%{-webkit-transform:translate(0,-50px);transform:translate(0,-50px) }
60%{-webkit-transform:translate(0,0);transform:translate(0,0) }
100%{-webkit-transform:translate(0,0);transform:translate(0,0) }
}
@keyframes move2{
0%{ transform:translate(0,-1000px)}
20%{transform:translate(0,0)}
40%{transform:translate(0,-50px) }
60%{transform:translate(0,0px) }
100%{transform:translate(0,0) }
}
@-webkit-keyframes move3{
0%{-webkit-transform:translate(-330px,-1000px); transform:translate(-330px,-1000px)}
20%{-webkit-transform:translate(-330px,0); transform:translate(-330px,0)}
40%{-webkit-transform:translate(-330px,-50px);transform:translate(-330px,-50px) }
60%{-webkit-transform:translate(-330px,0);transform:translate(-330px,0) }
100%{-webkit-transform:translate(0,0);transform:translate(0,0) }
}
@keyframes move3{
0%{transform:translate(-330px,-1000px)}
20%{ transform:translate(-330px,0)}
40%{transform:translate(-330px,-50px) }
60%{transform:translate(-330px,0) }
100%{transform:translate(0,0) }
}
/*第五页的特效*/
.s4 .left div{
transform:translate3d(-2000px,-2000px,-500px) rotateX(145deg);
}
.s4 .left div:nth-child(1){
-webkit-transition-delay: 0.8s;
-moz-transition-delay: 0.8s;
-ms-transition-delay: 0.8s;
-o-transition-delay: 0.8s;
transition-delay: 0.8s;
}
.s4 .left div:nth-child(2){
-webkit-transition-delay: 1s;
-moz-transition-delay: 1s;
-ms-transition-delay: 1s;
-o-transition-delay: 1s;
transition-delay: 1s;
}
.s4 .left div:nth-child(3){
-webkit-transition-delay: 1.2s;
-moz-transition-delay: 1.2s;
-ms-transition-delay: 1.2s;
-o-transition-delay: 1.2s;
transition-delay: 1.2s;
}
.s4.active .left div{
transform:translate3d(0,0,0) rotateX(0deg);
}
今天的收获很大：1.以前一直有见过这种全屏滚动的网页，感受是一个必须学习的案例。以前觉得是利用bootstorp库来完成的，通过今天的学习才明白原来是利用另外一个库fullpage来完成的。2.另外以前一直学习HTML5和CSS3，特别是CSS3学习到后面动画就感受到枯燥没有好好的打代码练习，在这个案例中虽然不是把CSS3的动画效果重头学的尾，可是也算是让我以前的学习有了一次练习的机会。web
记录几个不熟悉的CSS属性：学习
1.transition 属性：过渡用动画
transition: property duration timing-function delay;
| 值 | 描述 |
|---|---|
| transition-property | 规定设置过渡效果的 CSS 属性的名称。 |
| transition-duration | 规定完成过渡效果须要多少秒或毫秒。 |
| transition-timing-function | 规定速度效果的速度曲线。 |
| transition-delay | 定义过渡效果什么时候开始。 |
2.transform 属性向元素应用 2D 或 3D 转换。该属性容许咱们对元素进行旋转、缩放、移动或倾斜。url
3.animation 属性定义动画spa
语法
animation: name duration timing-function delay iteration-count direction;
| 值 | 描述 |
|---|---|
| animation-name | 规定须要绑定到选择器的 keyframe 名称。。 |
| animation-duration | 规定完成动画所花费的时间，以秒或毫秒计。 |
| animation-timing-function | 规定动画的速度曲线。 |
| animation-delay | 规定在动画开始以前的延迟。 |
| animation-iteration-count | 规定动画应该播放的次数。 |
| animation-direction | 规定是否应该轮流反向播放动画。 |
4.perspective 属性定义 3D 元素距视图的距离，以像素计。该属性容许您改变 3D 元素查看 3D 元素的视图。使用3D元素前须要定义。ssr
相关文章
- 1. fullpage全屏插件应用
- 2. fullpage插件基本应用
- 3. fullpage使用
- 4. fullpage
- 5. fullPage插件的使用
- 6. fullPage 使用总结
- 7. React Fullpage
- 8. fullPage最后一屏自适应
- 9. JQuary中的FullPage属性的用法
- 10. 几种fullpage用法及demo
- 更多相关文章...
- • Maven Web 应用 - Maven教程
- • XML 应用程序 - XML 教程
- • TiDB 在摩拜单车在线数据业务的应用和实践
- • C# 中 foreach 遍历的用法
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 「插件」Runner更新Pro版，帮助设计师远离996
- 2. 错误 707 Could not load file or assembly ‘Newtonsoft.Json, Version=12.0.0.0, Culture=neutral, PublicKe
- 3. Jenkins 2018 报告速览，Kubernetes使用率跃升235%！
- 4. TVI-Android技术篇之注解Annotation
- 5. android studio启动项目
- 6. Android的ADIL
- 7. Android卡顿的检测及优化方法汇总（线下+线上）
- 8. 登录注册的业务逻辑流程梳理
- 9. NDK(1)创建自己的C/C++文件
- 10. 小菜的系统框架界面设计-你的评估是我的决策
欢迎关注本站公众号,获取更多信息
相关文章
- 1. fullpage全屏插件应用
- 2. fullpage插件基本应用
- 3. fullpage使用
- 4. fullpage
- 5. fullPage插件的使用
- 6. fullPage 使用总结
- 7. React Fullpage
- 8. fullPage最后一屏自适应
- 9. JQuary中的FullPage属性的用法
- 10. 几种fullpage用法及demo