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

【问题标题】：Scroll effect to change opacity of each new div element滚动效果以更改每个新 div 元素的不透明度
【发布时间】：2019-01-17 00:23:24
【问题描述】：

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

【问题讨论】：

您不能在 css 中使用滚动事件。这个问题可能对你有帮助stackoverflow.com/questions/8755887/…

标签： javascript jquery html css animation

【解决方案1】：

我确信有一个相当简单的 css 解决方案可以满足我的需求

不幸的是，事实并非如此。 CSS可以做动画，但是如果涉及到任何方式的滚动，就需要JS。

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

【讨论】：

【解决方案2】：

如前所述，其他答案和 cmets 不能单独在 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>

【讨论】：