带混合模式的jquery滚动背景视觉差特效

这是一款带混合模式的jquery滚动背景视觉差特效。该特效利用css mix-blend-mode来混合背景和文字，并使用jquery来制作滚动时的视觉差效果，效果非常炫酷。

使用方法
在页面中引入jquery文件。

<script src=”.js/jquery.min.js” type=”text/javascript”></script>

HTML结构
视觉差效果的HTML结果如下。

<header>
<div class=”overlay”>
<div class=”parallax”>
<h1>Awesome<span>Parallax Scrolling</span></h1>
<div class=”one”></div>
<div class=”two”></div>
<div class=”three”></div>
<div class=”four”></div>
<div class=”five”></div>
</div>
</div>
</header>

CSS样式
然后添加下面的CSS样式。

*,
*:before,
*:after {
box-sizing: border-box;
}

body {
margin: 0;
font-family: “Poppins”, sans-serif;
font-size: 62.5%;
}

::-webkit-scrollbar {
width: 0;
}

header {
position: relative;
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
background-color: #c6d9d3;
}
header .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
header .overlay h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 3;
margin: 0;
text-transform: uppercase;
text-align: center;
font-size: 9rem;
text-shadow: 25px -15px rgba(25, 42, 46, 0.04);
color: #142124;
mix-blend-mode: overlay;
}
header .overlay h1 span {
margin-top: -2em;
padding-top: 0.5em;
display: block;
letter-spacing: 5px;
font-size: 1.25rem;
}
header .parallax {
position: relative;
width: 100%;
height: 100%;
}
header .parallax div {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-position: 0 50%;
background-repeat: no-repeat;
background-size: 100%;
}
header .parallax .one {
background-image: url(“svg/mountains-1.svg”);
z-index: 4;
}
header .parallax .two {
background-image: url(“svg/mountains-2.svg”);
z-index: 3;
}
header .parallax .three {
background-image: url(“svg/mountains-3.svg”);
z-index: 2;
}
header .parallax .four {
background-image: url(“svg/mountains-4.svg”);
z-index: 1;
}
header .parallax .five {
background-image: url(“svg/mountains-5.svg”);
z-index: 0;
}

初始化插件
在页面DOM元素加载完毕之后，通过下面的方法来初始化该滚动视觉差效果。

$(window).scroll(function () {
var a = $(this).scrollTop();
var b = 800;
$(“h1”).css({
backgroundPosition: “center ” + a / 2 + “px” });

$(“.parallax”).css({
top: a / 1.6 + “px”,
opacity: 1 – a / b });

});

// parallax scrolling

document.addEventListener(“scroll”, () => {
var top = window.pageYOffset,
var one = document.querySelector(“.one”),
var two = document.querySelector(“.two”),
var three = document.querySelector(“.three”),
var four = document.querySelector(“.four”),
var five = document.querySelector(“.five”);

one.style.bottom = -(top * 0.1) + “px”;
two.style.bottom = -(top * 0.2) + “px”;
three.style.bottom = -(top * 0.3) + “px”;
four.style.bottom = -(top * 0.4) + “px”;
five.style.bottom = -(top * 0.5) + “px”;
});