手風琴特效這麼颯,能用 JavaScript 實現嗎?
實驗介紹
手風琴效果一直是比較流行的頁面特效之一,本節課將會帶大家看一個不一樣的手風琴效果,通過 JavaScript 實現全屏手風琴。最終效果如下:
知識點
- 視口單位
- 絕對定位與相對定位
- transform 屬性
- 偽元素 before 和 after
- 通過 CSS3 完成動畫
- JavaScript 新增類
本實驗完整程式碼獲取命令如下:
wget https://labfile.oss.aliyuncs.com/courses/2674/demo.zip
unzip demo.zip
模組基本結構
我們先學習模組的基本結構,新建 index.html
和 index.css
,輸入以下程式碼。
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>JavaScript 實現全屏手風琴</title> </head> <link rel="stylesheet" href="./index.css" /> <body> <div class="cont"> <!-- 手風琴的大盒子 --> <div class="cont__inner"></div> </div> </body> </html>
index.css
:
/* 第一部分 */ *, *:before, *:after { /* box-sizing: border-box,為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製,不會因為設定了邊距而使元素寬高改變 */ -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } body { background: #1f1f1f; font-family: "Open Sans", Helvetica, Arial, sans-serif; } .cont { position: relative; overflow: hidden; height: 100vh; padding: 80px 70px; } .cont__inner { position: relative; height: 100%; background: #fff;
執行如下操作預覽頁面:
預覽效果:
注意:padding
是自己加的,跟程式碼無關,主要是方便理解 padding
的作用在哪,背景色也只是為了顯示 cont__inner
。後續會刪除。
程式碼重點講解之—— viewport
:
viewport
:可視視窗,也就是瀏覽器。視口單位主要包括以下 4 個:
- vw : 1vw 等於視口寬度的 1%。
- vh : 1vh 等於視口高度的 1%。
- vmin : 選取 vw 和 vh 中最小的那個。
- vmax : 選取 vw 和 vh 中最大的那個。
100vh
代表整個瀏覽器可見頁面的高度,100vw
就是整個寬度。
模組佈局
修改 index.html
,在 cont__inner
下加入以下程式碼:
<div class="cont__inner">
<!-- 每一塊圖片 -->
<div class="el"></div>
</div>
修改 index.css
,新增其樣式:
/* 第二部分 */
.el {
position: absolute;
left: 0;
top: 0;
width: 19.2%;
height: 100%;
background: #ccc;
}
預覽效果:
這只是其中一個模組,修改 index.html
加入剩下的模組:
<div class="cont__inner">
<!-- 每一塊圖片 -->
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
</div>
由於 .el
使用了絕對定位,這個時候模組肯定都會全部疊加在最左邊,所以我們需要修改 index.css
,加入以下程式碼:
/* :nth-child(n) 選擇器匹配屬於其父元素的第 n 個子元素,不論元素的型別。*/
/* 這裡代表第一個el */
.el:nth-child(1) {
/* -webkit 字首是表示相容有 webkit 的瀏覽器,
webkit 核心的瀏覽器有谷歌瀏覽器、Safari 瀏覽器、搜狗高速瀏覽器等 */
-webkit-transform: translate3d(0%, 0, 0);
transform: translate3d(0%, 0, 0);
-webkit-transform-origin: 50% 50%; /* 設定旋轉元素的基點位置 */
transform-origin: 50% 50%;
}
.el:nth-child(2) {
-webkit-transform: translate3d(105.2083333333%, 0, 0);
transform: translate3d(105.2083333333%, 0, 0);
-webkit-transform-origin: 155.2083333333% 50%;
transform-origin: 155.2083333333% 50%;
}
.el:nth-child(3) {
-webkit-transform: translate3d(210.4166666667%, 0, 0);
transform: translate3d(210.4166666667%, 0, 0);
-webkit-transform-origin: 260.4166666667% 50%;
transform-origin: 260.4166666667% 50%;
}
.el:nth-child(4) {
-webkit-transform: translate3d(315.625%, 0, 0);
transform: translate3d(315.625%, 0, 0);
-webkit-transform-origin: 365.625% 50%;
transform-origin: 365.625% 50%;
}
.el:nth-child(5) {
-webkit-transform: translate3d(420.8333333333%, 0, 0);
transform: translate3d(420.8333333333%, 0, 0);
-webkit-transform-origin: 470.8333333333% 50%;
transform-origin: 470.8333333333% 50%;
預覽效果:
程式碼重點講解之—— transform-origin
:
transform-origin
是變形原點,原點就是元素繞著旋轉或變形的點,該屬性只有在設定了 transform
屬性的時候才起作用,如果在不設定的情況下,元素的基點預設的是其中心位置。
語法:
transform-origin: x-axis y-axis z-axis;
- x-axis:定義檢視被置於 X 軸的何處。
- y-axis:定義檢視被置於 Y 軸的何處。
- z-axis:定義檢視被置於 Z 軸的何處。
模組樣式
修改 index.html
,在第一個 .el
下加入以下程式碼:
<!-- 每一塊圖片 -->
<div class="el">
<!-- 圖片、文字、按鈕部分 -->
<div class="el__overflow">
<div class="el__inner">
<!-- 主體圖片和遮罩層部分 -->
<div class="el__bg"></div>
<!-- 圖片中間文字內容部分 -->
<div class="el__preview-cont">
<h2 class="el__heading">Section 1</h2>
</div>
<!-- 圖片放大後的標題和關閉按鈕部分 -->
<div class="el__content">
<div class="el__text">Whatever</div>
<div class="el__close-btn"></div>
</div>
</div>
</div>
<!--數字部分 -->
<div class="el__index">
<div class="el__index-back">1</div>
<div class="el__index-front">
<div class="el__index-overlay" data-index="1">1</div>
</div>
</div>
</div>
分析一下 .el
的結構,每個 .el
包含兩部分,一部分是包含了圖片、文字以及按鈕(el__overflow
),它的高度需要繼承自父級(.el
)的百分百,另一部分是底部的數字部分(el__index
)。
el__overflow
結構解釋
el__overflow
中包含 el__inner
,el__inner
是主要內容,包含三部分:
- 主體圖片和遮罩層部分(
el__bg
),其中偽元素el__bg:before
是圖片部分,el__bg:after
是遮罩層部分。 - 圖片中間文字內容部分(
el__preview-cont
)。 - 圖片放大後的標題和關閉按鈕部分(
el__content
)。
完整學完本課程後,將習得以下知識點:
- 視口單位
- 絕對定位與相對定位
- transform 屬性
- 偽元素 before 和 after
- 通過 CSS3 完成動畫
- JavaScript 新增類
前端特效需要很多 CSS 操作,課程中的動畫效果有一些抽象需要大家多思考才能理解。本課程是 JavaScript 的簡單課,所以對於 JavaScript 部分是比較簡單且容易理解的,希望大家多多動手,不要只進行簡單的複製貼上,才能更好的學習本課程。