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. 安裝cuda+cuDNN
- 2. GitHub的使用說明
- 3. phpDocumentor使用教程【安裝PHPDocumentor】
- 4. yarn run build報錯Component is not found in path 「npm/taro-ui/dist/weapp/components/rate/index「
- 5. 精講Haproxy搭建Web集羣
- 6. 安全測試基礎之MySQL
- 7. C/C++編程筆記：C語言中的複雜聲明分析，用實例帶你完全讀懂
- 8. Python3教程(1)----搭建Python環境
- 9. 李宏毅機器學習課程筆記2：Classification、Logistic Regression、Brief Introduction of Deep Learning
- 10. 阿里雲ECS配置速記
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. fullpage全屏插件應用
- 2. fullpage插件基本應用
- 3. fullpage使用
- 4. fullpage
- 5. fullPage插件的使用
- 6. fullPage 使用總結
- 7. React Fullpage
- 8. fullPage最後一屏自適應
- 9. JQuary中的FullPage屬性的用法
- 10. 幾種fullpage用法及demo