現在的網頁設計講求像以前Flash一樣的動態效果 , 有動畫的網頁可以讓一個網站看起來更有質感
今天要講的這個基礎教學是類似 Scrolling 套件的效果 , 就是當視窗滾動到一個位置 , 區塊會用動畫進場
其實這個效果已經很盛行了, 幾乎每個新生代網站都會套用 , 但是我發覺大部分都是運用套件來完成
例如有個套件叫做"scroll-effects" , 他就可以達到此效果, 前台的程式碼也可以比較精簡！
但是 .. 其實本人並不喜歡運用套件,
第一：肥
第二：難預料狀況 , 有經驗的人應該知道 , 像是chrome 三不五時秘密更新
有些時候一但更新後有些程式就會起衝突 , 變成效果跑不出來 , 很麻煩 , 尤其像是許多scroll的套件特效會出現
閃爍的現象, 所以除非必要, 我是一率不使用套件的
第三：最重要的其實跟第二點差不多, 像我幾年前做過的案子有些套件現在已經掛點了, 變成常常要去修正bug
煩呀！
不多說 , 像是 scroll-effects 的效果我們今天用最基本的方式來分享給初學者, 希望對你們有幫助！
首當其先就是要建立環境跟引入jQuery
<div id="banner" class="box">
<div class="bar">
<h1>我是首頁</h1>
</div>
</div>
<div id="banner" class="box">
<div class="bar">
<h1>我是首頁</h1>
</div>
</div>
<div id="about" class="box">
<div class="bar">
<h1>我是關於我們</h1>
</div>
<div class="container">
<ul>
<li>清單一</li>
<li>清單二</li>
<li>清單三</li>
<li>清單四</li>
<li>清單五</li>
<li>清單六</li>
</ul>
</div>
</div>
<div id="test1" class="box">
<div class="bar">
<h1>我是test1</h1>
</div>
<div class="container">
我是test1內容
</div>
</div>
一個一頁式網頁的區塊基本規劃就是如此 , 接下來就是css
為了方便我這邊一率設為滿版
<style>
* {box-sizing: border-box;}
html,body {padding: 0;margin: 0;}
html,body,.box {height: 100%;}
.box {padding:200px 5% 0;}
.bar {
text-align: center;
color: #fff;
background: #000;
padding: 30px;
margin: 0 auto 50px;
max-width: 400px;
}
#about ul {
list-style: none;
padding: 0;
margin: 0;
overflow: hidden;
}
#about ul li {
float: left;
margin-right: calc(20px * 6 / 5);
border: 2px #000 solid;
width: calc(100% / 6 - 20px);
height: 300px;
}
#about ul li:nth-child(6) {margin-right: 0;}
</style>
目前基本環境是建立好了 , 接下來就是要想一下, 當視窗滾到這個區塊時, 哪些元素是要動起來的, 要怎麼動
有一個 css 外掛其實我覺得很好用 animate.css 當然他很肥 , 你可以選擇你要的效果, 不要的刪除就好
像我最常用的是這幾個 (因為我是用scss編寫 , 所以這個看看就好)
//向左淡入
.fadeInLeft {
// 名稱 速度 播放 running 或暫停paused
@include animation(fadeInLeft,1s,running);
}
//向右淡入
.fadeInRight {
// 名稱 速度 播放 running 或暫停paused
@include animation(fadeInRight,1s,running);
}
//由下向上淡入
.fadeInUp {
// 名稱 速度 播放 running 或暫停paused
@include animation(fadeInUp,1s,running);
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translate3d(0, 40%, 0);
}
to {
opacity: 1;
transform: none;
}
}
//放大
.zoomSmall {
// 名稱 速度 播放 running 或暫停paused
@include animation(zoomSmall,1s,running);
}
等於說我們已經預先把效果跟class名稱都定好了, 這樣隨時我們都可以調用
再來一個很重要的地方, 每一個我們需要添加動畫的元素, 必須添加一個style
.visible {
opacity: 0;
}
也就是說元素一開始就先讓他隱藏起來 , 加在html裡頭就像這樣
<div id="about" class="box">
<div class="bar">
<h1 class="visible">我是關於我們</h1>
</div>
<div class="container">
<ul class="visible">
<li>清單一</li>
<li>清單二</li>
<li>清單三</li>
<li>清單四</li>
<li>清單五</li>
<li>清單六</li>
</ul>
</div>
</div>
這樣我們就可以知道, 哪些是要進行境場動畫的, OK , 接下來就是手工寫這個效果了 , 為了方便辨識function ,
我這裡排除一大堆需要花時間去熟悉的自訂“變數”名稱 , 一律用最透明化的方式編寫
<script>
// 視窗事件
$( window ).scroll( function () {
// 當視窗滾動到“區塊名稱” 以上500px (註1) 我這邊是以滾動到我的第二區塊 ＃about 為例
if ( $( this ).scrollTop() > $( '#about' ).offset().top - 500 ) {
// 所有about以下的 visible 全部刪除 , 切換為 class fadeInUp
$( '#about .visible' ).removeClass( 'visible' ).addClass( 'fadeInUp' );
}
//這樣就完成了 , 你說這還需要套件嗎？ 雖說今天如果區塊多你必須一直 if 下去
// 但是這樣絕對穩定, 至少我用這麼久沒出過問題
} );
</script>
註1：因為我不喜歡讓使用者滾動到太低才讓元素出現, 所以我習慣設定 300 ~ 500 px
以上是基礎版, 接下來這個比較進階, 會用到循環 , 比方說我剛剛設計的 about 裡頭有個列表
如果照我剛剛寫的方式 , 他們的進場方式會六個同一時間一起 fadeInUp ！
今天如果我想要讓他們波浪式的進場該如何是編寫？
首先當然一定要先對html 做修正
<div id="about" class="box">
<div class="bar">
<h1 class="visible">我是關於我們</h1>
</div>
<div class="container">
<!--此時的 visible 不能給ul 而是要給每個 li -->
<ul>
<li class="visible">清單一</li>
<li class="visible">清單二</li>
<li class="visible">清單三</li>
<li class="visible">清單四</li>
<li class="visible">清單五</li>
<li class="visible">清單六</li>
</ul>
</div>
</div>
<script>
// 視窗事件
$( window ).scroll( function () {
// 當視窗滾動到“區塊名稱” 以上500px (註1) 我這邊是以滾動到我的第二區塊 ＃about 為例
if ( $( this ).scrollTop() > $( "#about" ).offset().top - 500 ) {
//用 each 帶一個參數 i
$( "#about .visible" ).each( function ( i ) {
//讓所有 visible delay 200秒 刪除class 切換 fadeInUp
$( this ).delay( i * 200 ).queue( function () {
$( this ).removeClass( "visible" ).addClass( "fadeInUp" );
} );
} );
}
//如此就可以達到這個效果了 , 進場動畫的部分就看你想動得多屌, 就自行編寫吧！！
} );
</script>
留言列表
