I was browsing different websites and stumbled upon this amazing background color transition that caught my attention. I really liked it and now I want to create something similar on my own website. Despite my best efforts, I haven't been able to achieve the desired effect.
Specifically, I aim to change the color as a div appears on the screen rather than when it reaches the top of the browser window.
I'm wondering how I can accomplish this?
Here is an example of what I've attempted:
$(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>
//More similar HTML code inbetween here....
</div>
</div>
</div>