實例：高級感滿滿的滾輪視差響應(yīng)效果
技術(shù)棧：HTML+CSS+JS
效果：
源碼：
【html】
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>高級感滿滿的滾輪視差響應(yīng)效果</title>
<link rel="stylesheet" href="../css/52.css">
</head>
<body>
<h2>↓滾輪滾一下唄↓</h2>
<div class="bg">
<span>Hello</span>
</div>
<h1>
歡迎來到<br/>艾恩小灰灰的前端世界
</h1>
<script type="text/javascript">
// 獲取背景對象
const bg=document.querySelector(".bg");
// 監(jiān)聽滾輪事件
document.addEventListener("scroll",function(){
// 獲取當(dāng)前滾輪的位置
const scrollY=window.scrollY;
if(scrollY!=0){
// 滾輪位置不等于0時，修改背景的定位加上滾輪的值
bg.style.backgroundPosition="calc(50% + "+scrollY+"px) calc(50% + "+scrollY+"px)";
// bg.style.backgroundPosition=`calc(50% + ${scrollY}px) calc(50% + ${scrollY}px)`;
}else{
// 否則清空背景的定位
bg.style.backgroundPosition="";
}
})
</script>
</body>
</html>
【css】
*{
/* 初始化 */
margin: 0;
padding: 0;
}
body{
/* 200%窗口高度（兩屏窗口的高度） */
height: 200vh;
}
.bg{
/* 背景圖片 */
background-image: url("../images/mountain.jpg");
/* 對圖片進(jìn)行剪切，保留原始比例 */
background-size: cover;
/* 設(shè)置背景圖片的定位 */
background-position: 50% 50%;
height: 200vh;
font-size: 650px;
font-weight: 900;
text-align: center;
/* 以區(qū)塊內(nèi)的文字作為裁剪區(qū)域向外裁剪，文字的背景即為區(qū)塊的背景，文字之外的區(qū)域都將被裁剪掉 */
-webkit-background-clip: text;
/* 將文字透明鏤空 */
-webkit-text-fill-color: transparent;
/* 相對定位 */
position: relative;
/* 溢出隱藏 */
overflow: hidden;
padding-top: 100px;
}
.bg::before{
content: "";
/* 背景圖片繼承父元素 */
background-image: inherit;
background-size: cover;
background-position: 50% 50%;
/* 絕對定位 */
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -99;
}
h2{
position: absolute;
top: 20px;
width: 100%;
text-align: center;
letter-spacing: 8px;
color: #fff;
}
h1{
position: absolute;
top: 145vh;
left: 50%;
transform: translateX(-50%);
width: 60%;
color: #fff;
letter-spacing: 10px;
padding: 100px 0;
background-color: rgba(0, 0, 0, 0.5);
text-align: center;
}
