如何解决需要使用机车滚动在Scroll上更改页面颜色
我需要更改此参考站点http://www.amandabraga.com/的页面颜色(即data-scroll-container) 在每个特定的数据滚动部分上滚动时
它工作正常,但是当我反向滚动时无法正常工作
<div class="container w-50" data-scroll data-scroll-repeat='true' data-scroll-call="bg-red">
....
</div>
Js代码-
scroll.on("call",callValue => {
if (callValue === "bg-blue") {
// currentScrollContainer.className="";
// currentScrollContainer.classList.add('bg-blue')
// gsap.set(currentScrollContainer,{background:'blueviolet'})
currentScrollContainer.style.background = "blueviolet"
}
解决方法
你需要给每个部分一个“id”,否则你仍然可以使用一个类。使用机车滚动事件触发器来检测该部分何时可见并为其指定颜色。
使用 jquery 进行演示。
const scroller = new LocomotiveScroll({
el: document.querySelector('[data-scroll-container]'),smooth: true
})
scroller.on('scroll',() => {
sectionBgChange();
})
function sectionBgChange() {
let firstSection = $('#yellow').offset().top;
let secondSection = $('#blue').offset().top;
let thirdSection = $('#red').offset().top;
var scrollPos = $(document).scrollTop();
if (scrollPos >= firstSection && scrollPos < secondSection) {
$('#yellow').css('background-color','yellow');
} else if (scrollPos >= secondSection && scrollPos < thirdSection) {
$('#blue').css('background-color','blue');
} else if (scrollPos >= thirdSection) {
$('#red').css('background-color','red');
} else {
$('section').css('background-color','white');
}
}
main {
padding: 20px;
background: #f2f2f2;
}
section {
padding: 100px;
margin: 10px 0;
height: 50vh;
z-index: 1;
border: 1px solid #eaeaea;
display: grid;
place-content: center;
font-size: 24px;
text-transform: uppercase;
font-weight: bold;
background-color: white;
box-shadow: 0 2px 12px 0px rgba(0,0.25);
position: relative;
border-radius: .5rem;
}
section::before {
content: attr(data-section);
}
<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main data-scroll-container>
<section data-section="Yellow" data-scroll-section id="yellow"></section>
<section data-section="Blue" data-scroll-section id="blue"></section>
<section data-section="Red" data-scroll-section id="red"></section>
</main>
最后,我找到了一个更好的方法来实现这一目标
这里是代码,以防有人需要
HTML -
<div class="vh-100">
<span data-scroll data-scroll-repeat data-scroll-call="pageColor"
data-scroll-id="blue"> ____________blue </span>
</div>
<div class="vh-100">
<span data-scroll data-scroll-repeat data-scroll-call="pageColor"
data-scroll-id="green"> ____________green </span>
</div>
<div class="vh-100">
<span data-scroll data-scroll-repeat data-scroll-call="pageColor"
data-scroll-id="#ff0000"> ____________red </span>
</div>
CSS -(用于平滑过渡)
body{
transition: background-color 1s ease;
}
.vh-100{
height:100vh;
}
JS - (从 html 元素的 data-scroll-id 属性获取颜色代码或颜色名称并将其分配给正文背景颜色)
setTimeout(() => {
scroll.on('call',(value,way,obj) => {
if (way === 'enter') {
switch (value) {
case "pageColor":
// get color code from data-scroll-id assigned to body by obj.id
document.querySelector('body').style.backgroundColor = obj.id;
break;
}
}
});
},800);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。