Scroll effect to change opacity of each new div element

Question

I am new to website design and have a question I'd like to ask. I have tried to use velocity.js to achieve this with failure. I am sure there is a rather simple css solution for what i want. I just want the previous div to "fade" and the new div that's scrolled to, to fade in with greater opacity. Open to any jQuery examples as well.

Here is my code for the section in question:

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;
 }

You cannot work with scroll event in css. This question might help you https://stackoverflow.com/questions/8755887/jquery-change-background-color-user-scroll — David, Aug 09 '18 at 13:50

score 1 · Answer 1 · answered Aug 09 '18 at 13:55

I am sure there is a rather simple css solution for what i want

Unfortunately, that is not the case. CSS can perform animations, but if scrolling is involved in any way, JS is required.

You could use something like animate.css to control your CSS animations and then use wow.js to make them load on scroll.

score 1 · Answer 2 · answered Aug 09 '18 at 14:18

As before stated by other answers and comments you cannot manipulate the scroll event in css alone but here is a simple jquery example that may help you. You can add and remove classes on scroll and you can add an animation to the css to control the opacity of your 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>

Scroll effect to change opacity of each new div element

2 Answers2