这是一款带混合模式的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"; });
该带混合模式的jquery滚动背景视觉差特效的codepen网址为:https://codepen.io/andrejsharapov/pen/aPrNxP
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!