當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

手风琴特效这么飒，能用 JavaScript 实现吗？

發布時間：2024/4/14 javascript 44 豆豆

生活随笔收集整理的這篇文章主要介紹了手风琴特效这么飒，能用 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?下加入以下代碼：

修改?index.css，新增其樣式：

/* 第二部分 */ .el {position: absolute;left: 0;top: 0;width: 19.2%;height: 100%;background: #ccc; }

預覽效果：

這只是其中一個模塊，修改?index.html?加入剩下的模塊：

由于?.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 部分是比較簡單且容易理解的，希望大家多多動手，不要只進行簡單的復制粘貼，才能更好的學習本課程。

快點擊鏈接，進入課程學習吧！

總結

以上是生活随笔為你收集整理的手风琴特效这么飒，能用 JavaScript 实现吗？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Spark 实时电商数据分析及可视化
下一篇：他在 B 站有 140 万粉丝，今天来免