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

2021-07-22 288
查看演示
下载不了?请联系网站客服提交链接错误!
增值服务:

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

郑重承诺丨新科源码提供安全交易、信息保真!
增值服务:
源码教程
安装指导
环境配置
模板安装
网站建设
二次开发
¥ 0 金币 开通VIP尊享优惠特权
立即下载 查看演示 升级会员
详情介绍

这是一款带混合模式的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滚动背景视觉差特效

资源下载此资源仅限注册用户下载,请先
收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

声明:1、本站资源均来源于用户上传和网络传播,因此不包含技术服务,请大家谅解!2、本站所有资源仅可用于学习交流,若有商业用途之需,请购买正版,否则产生的一切后果将由下载用户本人自行承担。3、本站资源均来源于用户上传和网络传播,如侵犯您的权益,请务必联系客服(E-mail: 469663672@qq.com)删除。4、本站不保证所提供资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!5、本站资源均来源于用户上传和网络传播,仅供学习交流、参考和研究,请理解这个概念,所以不能保证每个细节都符合您的需求,也可能存在未知的BUG与瑕疵,因本站资源均为可复制品,所以不支持任何理由的退款,请知悉后再支付下载!

新科源码 网页素材 带混合模式的jquery滚动背景视觉差特效 https://www.xinke123.net/228.html

常见问题
  • 因为源码、模板和插件等资源具有可复制性、可传播性,仅用于学习研究,不可商用,订单一旦生效,不支持退换,所以请您务必看清楚后再购买。
查看详情
  • 我们承诺资源均和演示效果图一样,如有不同,全额退款,并且我们的源码和模板都没有留后门,请放心使用。
查看详情

相关文章

评论
暂无评论