how to achieve the background color transition like this?

Question

I just exploring some sites and came across this background color transition and liked that so much that now I want to create something like this. I tried my best to achieve this, but I'm not able to get what is desired.

I want to change the color as the div appears on the screen. Currently, it is changing when it reaches the top of the browser.

How is it possible to achieve this?

Here is my attempt:

$(window).on("scroll touchmove", function () {
    if ($(document).scrollTop() >= $(".homeContainer").position().top) {
        setTimeout(function () {
            $('.transGrow').addClass('grow');
        }, 275);
        $('body').addClass('landing');
        $('header').addClass('landing');
        $('body').removeClass('quickLinks');
        $('header').removeClass('quickLinks');
    }
    ;
    if ($(document).scrollTop() > $(".slide1").position().top) {
        $('body').addClass('quickLinks');
        $('header').addClass('quickLinks');
        $('body').removeClass('landing');
        $('header').removeClass('landing');
        $('body').removeClass('aboutUs');
        $('header').removeClass('aboutUs');
    }
    ;
    if ($(document).scrollTop() > $(".slide2").position().top) {
        $('body').addClass('aboutUs');
        $('header').addClass('aboutUs');
        $('body').removeClass('quickLinks');
        $('header').removeClass('quickLinks');
    }
    ;
});

.landing
{
    background-color:#F8BBD0;
}
.quickLinks {
    background-color: #9575CD;
}
.aboutUs{
    background-color: #9CCC65;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="homeContainer">
<div class="container-fluid slide slide1 section-basic" id="quickLinks">
        <div class="rows">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" data-aos="fade-up">
                <h1 class="text-uppercase text-center heading-basic">Quick Links</h1>
                <hr class="transGrow">
            </div>
        </div>
        <div class="rows">
            <div class="scrollable-cover col-lg-4 col-md-4 col-sm-4 col-xs-4" data-aos="fade-left">
                <a href="#">
                    <div class="card">
    
                        <!--Card image-->
                        <img class="cards-img-basic img-responsive" src="../images/pdf1.jpg" id="pdf" alt="Card image cap">
                        <!--/.Card image-->
    
                        <!--Card content-->
                        <div class="card-block">
                            <!--Title-->
                            <h4 class="card-title text-center">PDF Books</h4>
                            <!--Text-->
                            <p class="text-muted card-text">Some quick example text to build on the card title and make up
                                the bulk of the card's content.</p>
                        </div>
                        <!--/.Card content-->
    
                    </div>
                </a>
            </div>
            <div class="scrollable-cover col-lg-4 col-md-4 col-sm-4 col-xs-4" data-aos="fade-left">
                <a href="#">
                    <div class="card">
    
                        <!--Card image-->
                        <img class="cards-img-basic img-responsive" src="../images/receipe1.jpg" id="recipe"
                             alt="Card image cap">
                        <!--/.Card image-->
    
                        <!--Card content-->
                        <div class="card-block">
                            <!--Title-->
                            <h4 class="card-title text-center">Jain Recipes</h4>
                            <!--Text-->
                            <p class="text-muted card-text">Some quick example text to build on the card title and make up
                                the bulk of the card's content.</p>
                        </div>
                        <!--/.Card content-->
                    </div>
                </a>
            </div>
            <div class="scrollable-cover col-lg-4 col-md-4 col-sm-4 col-xs-4" data-aos="fade-left">
                <a href="#">
                    <div class="card">
    
                        <!--Card image-->
                        <img class="cards-img-basic img-responsive" src="../images/panchang1.jpg" id="panchang"
                             alt="Card image cap">
                        <!--/.Card image-->
    
                        <!--Card content-->
                        <div class="card-block">
                            <!--Title-->
                            <h4 class="card-title text-center">Jain Panchang</h4>
                            <!--Text-->
                            <p class="text-muted card-text">Some quick example text to build on the card title and make up
                                the bulk of the card's content.</p>
                        </div>
                        <!--/.Card content-->
                    </div>
                </a>
            </div>
            <div class="scrollable-cover col-lg-4 col-md-4 col-sm-4 col-xs-4" data-aos="fade-right">
                <a href="#">
                    <div class="card">
    
                        <!--Card image-->
                        <img class="cards-img-basic img-responsive" src="../images/czone1.jpg" id="czone"
                             alt="Card image cap">
                        <!--/.Card image-->
    
                        <!--Card content-->
                        <div class="card-block">
                            <!--Title-->
                            <h4 class="card-title text-center">Children Zone</h4>
                            <!--Text-->
                            <p class="text-muted card-text">Some quick example text to build on the card title and make up
                                the bulk of the card's content.</p>
                        </div>
                        <!--/.Card content-->
    
                    </div>
                </a>
            </div>
            <div class="scrollable-cover col-lg-4 col-md-4 col-sm-4 col-xs-4" data-aos="fade-right">
                <a href="#">
                    <div class="card">
    
                        <!--Card image-->
                        <img class="cards-img-basic img-responsive" src="../images/puja1.jpg" id="pooja"
                             alt="Card image cap">
                        <!--/.Card image-->
    
                        <!--Card content-->
                        <div class="card-block">
                            <!--Title-->
                            <h4 class="card-title text-center">Pooja Pujans</h4>
                            <!--Text-->
                            <p class="text-muted card-text">Some quick example text to build on the card title and make up
                                the bulk of the card's content.</p>
                        </div>
                        <!--/.Card content-->
    
                    </div>
                </a>
            </div>
            <div class="scrollable-cover col-lg-4 col-md-4 col-sm-4 col-xs-4" data-aos="fade-right">
                <a href="#">
                    <div class="card">
                        <!--Card image-->
                        <img class="cards-img-basic img-responsive"
                             src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg"
                             alt="Card image cap">
                        <!--/.Card image-->
    
                        <!--Card content-->
                        <div class="card-block">
                            <!--Title-->
                            <h4 class="card-title text-center">Religious Sutras</h4>
                            <!--Text-->
                            <p class="text-muted card-text">Some quick example text to build on the card title and make up
                                the bulk of the card's content.</p>
                        </div>
                        <!--/.Card content-->
    
                    </div>
                </a>
            </div>
        </div>
    </div>
    <div class="container-fluid slide slide2 section-basic" data-color="#ef9a9a">
        <div class="rows">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" data-aos="fade-up">
                <h1 class="text-uppercase text-center heading-basic">About Us</h1>
                <hr>
            </div>
        </div>
        <div class="rows">
            <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 padding-basic" data-aos="fade-right">
                <img src="../images/homepage.jpg" class="img-responsive">
            </div>
            <div class="scrollable-cover col-lg-6 col-md-6 col-sm-12 col-xs-12 padding-basic" data-aos="fade-left">
                <div class="simplebar-content scrollable-basic" data-scrollbar>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu fermentum justo. Sed feugiat nunc in
                        elit sagittis tristique. Duis eget volutpat enim. Aenean bibendum metus sed enim egestas, ultrices
                        mattis enim vulputate. Nullam sem enim, venenatis at leo non, feugiat accumsan mi. Vivamus sagittis
                        purus a volutpat lobortis. Donec vestibulum non elit mollis feugiat. Donec ultricies viverra
                        suscipit. Quisque maximus lacus nec tortor varius, eu accumsan massa blandit. Pellentesque auctor
                        ligula sit amet urna ornare, et cursus est interdum. Cras scelerisque, lectus nec semper ultrices,
                        diam tellus posuere sapien, eget maximus lectus magna non elit. Mauris convallis justo enim, at
                        malesuada quam imperdiet vitae. Ut urna dui, sagittis a dolor eu, eleifend elementum diam. Aliquam
                        erat volutpat. </p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu fermentum justo. Sed feugiat nunc in
                        elit sagittis tristique. Duis eget volutpat enim. Aenean bibendum metus sed enim egestas, ultrices
                        mattis enim vulputate. Nullam sem enim, venenatis at leo non, feugiat accumsan mi. Vivamus sagittis
                        purus a volutpat lobortis. Donec vestibulum non elit mollis feugiat. Donec ultricies viverra
                        suscipit. Quisque maximus lacus nec tortor varius, eu accumsan massa blandit. Pellentesque auctor
                        ligula sit amet urna ornare, et cursus est interdum. Cras scelerisque, lectus nec semper ultrices,
                        diam tellus posuere sapien, eget maximus lectus magna non elit. Mauris convallis justo enim, at
                        malesuada quam imperdiet vitae. Ut urna dui, sagittis a dolor eu, eleifend elementum diam. Aliquam
                        erat volutpat. </p>
                   
                </div>
            </div>
        </div>
    </div>
</div>

Can you include the CSS that would correspond to the classes you are changing? — cjl750, Jul 11 '17 at 16:25
Are you perhaps looking for [the jQuery animate function](http://api.jquery.com/animate/)? You can animate colors as well. — JiFus, Jul 11 '17 at 17:05
I tried the animate function but looks like I have done something mess a demo would be great because I have tried a lot but not able to match the class they have in their work.. — Mr. Pyramid, Jul 11 '17 at 17:07
I want to transit the color as the div appears on the screen currently it is changing when it reach the top of the browser. — Mr. Pyramid, Jul 11 '17 at 17:10
In that example, they used the javascript canvas, not CSS animation — Ben, Jul 11 '17 at 17:11
yeah in the 1st div but in next sections they have used transition like in brilliant move section — Mr. Pyramid, Jul 11 '17 at 17:12

cjl750 · Accepted Answer · 2017-07-13T20:03:12.167

I want to transit the color as the div appears on the screen currently it is changing when it reach the top of the browser.

First, you may want to use .offset().top instead of .position().top to get the distance the object is from the top of the document, rather than the distance it is from its offset parent, in case other CSS you have going on on your site makes .position().top not return the value you want.

Then compare the scroll distance to that value. This will tell you when the top of the object is at the top of the screen.

To find when the object comes into view, subtract the object's height from its .offset().top, and compare that value to the scroll position.

For example:

if($(document).scrollTop() > $('.slide2').offset().top - $('.slide2').height())

I have illustrated this in the snippet below by outlining .slide with a gold border.

I've also added a transition property to help the background color change smoothly, as Lansana showed.

Edit: How exactly you implement this depends on your document. You need to compare how your document is laid out and the CSS styles your elements have with the conditions your jQuery is checking for in order to get the effect you want. For example, if you have two if statements in your jQuery checking whether different elements are showing on the screen, but both those elements appear at the exact same time, one of those conditions is never going to work. That is what part of the problem with your original code.

In order to change the document background back to white at the top of the page, I revised the snippet below to get rid of the reference to .slide1. The variable slide1offset has been replaced by hrOffset, which refers to the hr tag within .homeContainer. I did this because that hr is right below the "Quick Links" header, as you asked. Then, in the CSS, I changed the landing class to have a white background color.

$(window).on("scroll touchmove", function() {

  var homeOffset = $('.homeContainer').offset().top - $('.homeContainer').height();
  var hrOffset = $('.homeContainer').find('hr.transGrow').offset().top - $('.homeContainer').find('hr.transGrow').height();
  var slide2Offset = $('.slide2').offset().top - $('.slide2').height();
  var elms = $('body').add('header');

  if ($(document).scrollTop() >= homeOffset) {
    setTimeout(function() {
      $('.transGrow').addClass('grow');
    }, 275);
    $(elms).addClass('landing').removeClass('quickLinks');
  };
  if ($(document).scrollTop() > hrOffset) {
    $(elms).addClass('quickLinks').removeClass('landing aboutUs');
  };
  if ($(document).scrollTop() > slide2Offset) {
    $(elms).addClass('aboutUs').removeClass('quickLinks');
  };
});

.landing,
.quickLinks,
.aboutUs {
  transition: background-color 400ms;
}
.landing {
  background-color: #fff;
}
.quickLinks {
  background-color: #9575CD;
}
.aboutUs {
  background-color: #9CCC65;
}
.slide2 {
  border: 2px solid gold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="homeContainer">
  <div class="container-fluid slide slide1 section-basic" id="quickLinks">
    <div class="rows">
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" data-aos="fade-up">
        <h1 class="text-uppercase text-center heading-basic">Quick Links</h1>
        <hr class="transGrow">
      </div>
    </div>
    <div class="rows">
      <div class="scrollable-cover col-lg-4 col-md-4 col-sm-4 col-xs-4" data-aos="fade-left">
        <a href="#">
          <div class="card">

            <!--Card image-->
            <img class="cards-img-basic img-responsive" src="../images/pdf1.jpg" id="pdf" alt="Card image cap">
            <!--/.Card image-->

            <!--Card content-->
            <div class="card-block">
              <!--Title-->
              <h4 class="card-title text-center">PDF Books</h4>
              <!--Text-->
              <p class="text-muted card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
            <!--/.Card content-->

          </div>
        </a>
      </div>
      <div class="scrollable-cover col-lg-4 col-md-4 col-sm-4 col-xs-4" data-aos="fade-left">
        <a href="#">
          <div class="card">

            <!--Card image-->
            <img class="cards-img-basic img-responsive" src="../images/receipe1.jpg" id="recipe" alt="Card image cap">
            <!--/.Card image-->

            <!--Card content-->
            <div class="card-block">
              <!--Title-->
              <h4 class="card-title text-center">Jain Recipes</h4>
              <!--Text-->
              <p class="text-muted card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
            <!--/.Card content-->
          </div>
        </a>
      </div>
      <div class="scrollable-cover col-lg-4 col-md-4 col-sm-4 col-xs-4" data-aos="fade-left">
        <a href="#">
          <div class="card">

            <!--Card image-->
            <img class="cards-img-basic img-responsive" src="../images/panchang1.jpg" id="panchang" alt="Card image cap">
            <!--/.Card image-->

            <!--Card content-->
            <div class="card-block">
              <!--Title-->
              <h4 class="card-title text-center">Jain Panchang</h4>
              <!--Text-->
              <p class="text-muted card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
            <!--/.Card content-->
          </div>
        </a>
      </div>
      <div class="scrollable-cover col-lg-4 col-md-4 col-sm-4 col-xs-4" data-aos="fade-right">
        <a href="#">
          <div class="card">

            <!--Card image-->
            <img class="cards-img-basic img-responsive" src="../images/czone1.jpg" id="czone" alt="Card image cap">
            <!--/.Card image-->

            <!--Card content-->
            <div class="card-block">
              <!--Title-->
              <h4 class="card-title text-center">Children Zone</h4>
              <!--Text-->
              <p class="text-muted card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
            <!--/.Card content-->

          </div>
        </a>
      </div>
      <div class="scrollable-cover col-lg-4 col-md-4 col-sm-4 col-xs-4" data-aos="fade-right">
        <a href="#">
          <div class="card">

            <!--Card image-->
            <img class="cards-img-basic img-responsive" src="../images/puja1.jpg" id="pooja" alt="Card image cap">
            <!--/.Card image-->

            <!--Card content-->
            <div class="card-block">
              <!--Title-->
              <h4 class="card-title text-center">Pooja Pujans</h4>
              <!--Text-->
              <p class="text-muted card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
            <!--/.Card content-->

          </div>
        </a>
      </div>
      <div class="scrollable-cover col-lg-4 col-md-4 col-sm-4 col-xs-4" data-aos="fade-right">
        <a href="#">
          <div class="card">
            <!--Card image-->
            <img class="cards-img-basic img-responsive" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" alt="Card image cap">
            <!--/.Card image-->

            <!--Card content-->
            <div class="card-block">
              <!--Title-->
              <h4 class="card-title text-center">Religious Sutras</h4>
              <!--Text-->
              <p class="text-muted card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
            <!--/.Card content-->

          </div>
        </a>
      </div>
    </div>
  </div>
  <div class="container-fluid slide slide2 section-basic" data-color="#ef9a9a">
    <div class="rows">
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" data-aos="fade-up">
        <h1 class="text-uppercase text-center heading-basic">About Us</h1>
        <hr>
      </div>
    </div>
    <div class="rows">
      <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 padding-basic" data-aos="fade-right">
        <img src="../images/homepage.jpg" class="img-responsive">
      </div>
      <div class="scrollable-cover col-lg-6 col-md-6 col-sm-12 col-xs-12 padding-basic" data-aos="fade-left">
        <div class="simplebar-content scrollable-basic" data-scrollbar>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu fermentum justo. Sed feugiat nunc in elit sagittis tristique. Duis eget volutpat enim. Aenean bibendum metus sed enim egestas, ultrices mattis enim vulputate. Nullam sem enim,
            venenatis at leo non, feugiat accumsan mi. Vivamus sagittis purus a volutpat lobortis. Donec vestibulum non elit mollis feugiat. Donec ultricies viverra suscipit. Quisque maximus lacus nec tortor varius, eu accumsan massa blandit. Pellentesque
            auctor ligula sit amet urna ornare, et cursus est interdum. Cras scelerisque, lectus nec semper ultrices, diam tellus posuere sapien, eget maximus lectus magna non elit. Mauris convallis justo enim, at malesuada quam imperdiet vitae. Ut urna
            dui, sagittis a dolor eu, eleifend elementum diam. Aliquam erat volutpat. </p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu fermentum justo. Sed feugiat nunc in elit sagittis tristique. Duis eget volutpat enim. Aenean bibendum metus sed enim egestas, ultrices mattis enim vulputate. Nullam sem enim,
            venenatis at leo non, feugiat accumsan mi. Vivamus sagittis purus a volutpat lobortis. Donec vestibulum non elit mollis feugiat. Donec ultricies viverra suscipit. Quisque maximus lacus nec tortor varius, eu accumsan massa blandit. Pellentesque
            auctor ligula sit amet urna ornare, et cursus est interdum. Cras scelerisque, lectus nec semper ultrices, diam tellus posuere sapien, eget maximus lectus magna non elit. Mauris convallis justo enim, at malesuada quam imperdiet vitae. Ut urna
            dui, sagittis a dolor eu, eleifend elementum diam. Aliquam erat volutpat. </p>

        </div>
      </div>
    </div>
  </div>
</div>

great work I almost got what I want to however it has issues when I scroll it back to top I want the document should revert it back to landing class but quickLinks is appearing any words on this? — Mr. Pyramid, Jul 11 '17 at 18:12
That's because homeContainer and slide1 are both are the very top of the page. Is that how it actually will be in your real site? If slide1 is farther down, that won't be a problem. Otherwise, you could modify your first statement a bit to check if `$(document).scrollTop()` is zero (or close to it), and then use the landing class in that case, and not start using the quickLinks class until you've scrolled a bit. — cjl750, Jul 11 '17 at 19:04
yes I want that as I scroll back the background color changed back to the original color ie,, white — Mr. Pyramid, Jul 12 '17 at 16:31
When should it change back to white exactly? Whenever you're scrolling upward? Or when you hit the top of the page? Some other time? — cjl750, Jul 12 '17 at 17:50
when it appears on the screen ie., as the quick links heading disappears the color should revert back to white.. you can try it by dividing the section just like you did in slide2 class. thanks for your help btw :) — Mr. Pyramid, Jul 13 '17 at 18:05
A little confused, but see edit on things you should consider when writing your jQuery. Also, I have simplified the if statements a bit to help make things clearer. You now have a template in your jQuery you can use to check the position of three elements relative to scroll position and apply three different classes accordingly. So if it's not quite how you like, all you need to do is update what your variables refer to in the jQuery, or update the styling of the classes in the CSS. Hopefully that gets your where you need to go. — cjl750, Jul 13 '17 at 20:29
works like charm thanks bro now I have question that I want to test if I want to change the color as the heading appears on the screen like quick links appears on the screen I want to change the color so to achieve this should I check the offset of the heading element?? — Mr. Pyramid, Jul 15 '17 at 10:15
Yep, that's correct. You can edit or add as many variables and if statements (and classes) as you need to test out different effects as different elements come into view. The basic formula of element offset minus element height will calculate when the top of the element pokes through the bottom of the screen. If this is a good enough start to get you where you want to go, please consider accepting and upvoting the answer. Cheers! — cjl750, Jul 15 '17 at 19:09

Lansana Camara · Answer 2 · 2017-07-11T18:57:21.767

What you want to do is set a transition on your backgrounds. Then set modifier classes that change their colors, and the change of color will happen using the transition.

For example:

.landing, .quickLinks, .aboutUs {
    background-color: #fff;
    -webkit-transition: background-color 1s ease;
    -moz-transition: background-color 1s ease;
    transition: background-color 1s ease;
}
.landing.loading--active {
    background-color:#F8BBD0;
}
.quickLinks.quickLinks--active {
    background-color: #9575CD;
}
.aboutUs.aboutUs--active {
    background-color: #9CCC65;
}

When the loading--active, quickLinks--active or aboutUs--active are added to their respective divs, their background colors will transition with a one second duration using the ease timing function.

When the user scrolls, use your jQuery to add the modifier classes:

$(document).on('scroll', function () {
    if (/*div.landing scrolled to*/) {
        $('.landing').addClass('landing--active');
    }

    if (/*div.quickLinks scrolled to*/) {
        $('.quickLinks').addClass('quickLinks--active');
    }

    if (/*div.aboutUs scrolled to*/) {
        $('.aboutUs').addClass('aboutUs--active');
    }
});

no not like that it should be done with jquery if I am not wrong check the url I have attached in the question I want to transist the color as the div appears on the screen — Mr. Pyramid, Jul 11 '17 at 17:09
You can add the modifier classes with jquery. Why limit yourself to jquery only? You must use CSS no matter what, so why not make life easier and make your code easier to read by using CSS transitions which is ubiquitous across the web? Then simply add a class to your div when user scrolls and problem solved. — Lansana Camara, Jul 11 '17 at 18:48
I have no idea how to work with scroll by using only css however I love to get rid of jquery if it is possible you have some demos then shoot me up for inspirations. — Mr. Pyramid, Jul 12 '17 at 16:30

how to achieve the background color transition like this?

2 Answers2