滚动效果以更改每个新的div元素的不透明度
滚动效果以更改每个新的div元素的不透明度
提问于 2018-08-09 13:42:28
我是新的网站设计，有一个问题，我想问。我试图使用velocity.js来实现这一点，但失败了。我确信有一个相当简单的css解决方案，我想要的。我只希望以前的div“淡出”，新的div滚动到，以更大的不透明度淡入。对任何jQuery示例也开放。
下面是我对这一节的代码：
html:
<section id="services">
<h2 class="pb-5">Services We Offer</h2>
<div id="service1">
<h2>Service 1</h2>
</div>
<div id="service2">
<h2>Service 2</h2>
</div>
<div id="service3">
<h2>Service 3</h2>
</div>
</section>css:
#services{
}
#service1{
height: 100vh;
background-color: rgb(44, 49, 90);
}
#service2{
height: 100vh;
background-color: #267481;
}
#service3{
height: 100vh;
background-color: #373f24;
}回答 2
Stack Overflow用户
发布于 2018-08-09 13:55:43
我确信我想要的东西有一个相当简单的css解决方案。
不幸的是，情况并非如此。CSS可以执行动画，但是如果以任何方式涉及滚动，则需要JS。
您可以使用类似于animate.css的东西来控制CSS动画，然后使用wow.js将它们加载到滚动中。
Stack Overflow用户
发布于 2018-08-09 14:18:34
如前所述，在其他答案和注释中，您不能仅在css中操作滚动事件，但是这里有一个简单的jquery示例，它可能对您有所帮助。您可以在滚动页上添加和删除类，还可以向css中添加动画以控制div的不透明度。
$(window).on("scroll", function(){
var scrollTop = $(this).scrollTop();
$('.scrollDiv').each(function(){
var el = $(this);
var offsetTop = el.offset().top;
if(scrollTop > offsetTop){
el.addClass("scrolled");
}else{
el.removeClass("scrolled");
}
});
});.scrollDiv{
height:100vh;
transition:opacity 500ms ease-in-out;
opacity:0.2;
}
.scrollDiv.scrolled{
opacity:1;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scrollDiv" style="background:green;"></div>
<div class="scrollDiv" style="background:red;"></div>
<div class="scrollDiv" style="background:blue;"></div>
<div class="scrollDiv" style="background:yellow;"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51768666
复制相关文章
相似问题
腾讯云开发者
