Preloader設置
<!-- preloader -->
<div class="preloader">
<img src="./preloader.gif" type="video/mp4">
</div>
preloader
背景影片與控制按鈕設置
<!-- header -->
<header>
<!-- video -->
<video class="video-container" muted autoplay loop>
<source src="./video.mp4" type="video/mp4" />
</video>
<!-- title -->
<h1>Video Project</h1>
<!-- button -->
<button class="switch-btn">
<span>
play
</span>
<span>
pause
</span>
<!-- 按鈕內的位移方格 -->
<span class="switch"></span>
</button>
</header>
video-container
switch-btn
muted
: 影片靜音autoplay
: 馬上自動開始播放,不會停下來等影片資料下載完再開始播放loop
: 自動循環播放按鈕內的位移方格原本有著自己的設定 :
.switch {
...
top: 0;
left: 0;
background: var(--clr-primary-5);
...
}
但只要按鈕的Class多了slide
,就會因為下列程式碼的影響,使得位移方塊往右移 :
.slide .switch {
left: 50%;
}
.class .class
的作用,在【10】網頁練習 - 開合型FAQ中有提到Preloader原本也有著自己的設定 :
.preloader {
...
align-items: center;
visibility: visible;
z-index: 999;
...
}
但只要Preloader的Class多了hide-preloader
,就會隱藏起來:
.hide-preloader {
z-index: -999;
visibility: hidden;
}
利用class="switch-btn"
去抓取按鈕
const btn = document.querySelector('.switch-btn');
利用class="video-container"
去抓取影片
const video = document.querySelector('.video-container');
新增按鈕點擊事件,進而控制影片播放
btn.addEventListener('click',function(){ //新增點按鈕擊事件
if(!btn.classList.contains("slide")){ //確認按鈕Class是否有"slide"
btn.classList.add("slide"); //使按鈕內位移方塊往右移
video.pause(); //影片暫停
}else{
btn.classList.remove("slide"); //使按鈕內位移方塊往左移
video.play(); //影片繼續播放
};
});
利用class="preloader"
去抓取Preloader
const preloader = document.querySelector('.preloader');
設置Preloader的播放資訊
window.addEventListener('load',function(){ //透過"load"事件來判斷整個網頁是否完全載入完成
preloader.classList.add('hide-preloader'); //隱藏preloader
});
DOMContentLoaded
和load
的差別,請見【06】網頁練習 - 按鈕翻頁