Question

我是网站设计的新手，我想问一个问题。我尝试使用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;
 }

Answer 1

我确信对于我想要的东西有一个相当简单的css解决方案

不幸的是，事实并非如此。 CSS可以执行动画，但是如果涉及滚动，则需要JS。

您可以使用animate.css之类的控件来控制CSS动画，然后使用wow.js使其在滚动时加载。

Answer 2

如其他答案和注释所述，您不能仅在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>

滚动效果以更改每个新div元素的不透明度

2 个答案: