Changing background color while scrolling the page
Created
August 26, 2019 18:25
-
-
Save Adefful/ceb702afecd00eea4959c2d514386d8f to your computer and use it in GitHub Desktop.
Dinamic Background [on scroll] JQuery
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="container"> | |
<div class="box"> | |
<h1 class="h1-main">OUR company</h1> | |
<article class="ar-main"> | |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate, accusantium iste! Dolorem, excepturi | |
</article> | |
<div class="wrapper"> | |
<button>Like me</button> | |
</div> | |
</div> | |
<div class="bg-img main-img"> | |
</div> | |
<div class="box"> | |
<h1 class="h1-second">Learn more about us</h1> | |
<article class="ar-second">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt totam sequi maxime. Dignissimos optio reiciendis dolorum dolore tempora eaque, id, rem mollitia, odit quas distinctio deserunt veniam quia illum? Molestiae esse assumenda, quia doloremque laboriosam ex vitae laborum expedita. Animi!</article> | |
</div> | |
<div class="bg-img second-img"> | |
</div> | |
<div class="box"> | |
<h1 class="h1-3">Learn more about us</h1> | |
<article class="ar-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt totam sequi maxime. Dignissimos optio reiciendis dolorum dolore tempora eaque, id, rem mollitia, odit quas distinctio deserunt veniam quia illum? Molestiae esse assumenda, quia doloremque laboriosam ex vitae laborum expedita. Animi!</article> | |
</div> | |
<div class="bg-img finally-img"> | |
</div> | |
<div class="box"> | |
</div> | |
<div class="box"> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// changing color | |
$(document).on("scroll", function() { | |
$(".container").css("background",`hsla(${$(window).scrollTop()/10}, 90%, 60%, 1)`); | |
}); | |
// animation part | |
function isShowed(elem, func) { | |
if($(window).scrollTop() + $(window).height() >= $(elem).offset().top) | |
func(elem); | |
} | |
$(window).scroll(function() { | |
isShowed('.h1-main', function(elem) { $(elem).addClass('animated bounceInLeft'); }); | |
isShowed('.ar-main', function(elem) { $(elem).addClass('animated bounceInRight'); }); | |
isShowed('.h1-second', function(elem) { $(elem).addClass('animated bounceInLeft'); }); | |
isShowed('.ar-second', function(elem) { $(elem).addClass('animated bounceInRight'); }); | |
isShowed('.h1-3', function(elem) { $(elem).addClass('animated bounceInLeft'); }); | |
isShowed('.ar-3', function(elem) { $(elem).addClass('animated bounceInRight'); }); | |
}); | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body | |
margin: 0 | |
padding: 0 | |
box-sizing: content-box | |
font-family: sans-serif | |
.box | |
padding: 200px 0% | |
width: 100% | |
height: 90vh | |
h1 | |
margin-bottom: 100px | |
color: white | |
letter-spacing: .7em | |
font-size: 50px | |
font-weight: 100 | |
text-transform: uppercase | |
text-align: center | |
padding: 0 10% | |
line-height: 2em | |
article | |
color: white | |
letter-spacing: .2em | |
font-size: 16px | |
text-align: center | |
padding: 0 20% | |
line-height: 1.2em | |
font-weight: 100 | |
text-transform: uppercase | |
.bg-img | |
width: 100% | |
height: 10vh | |
min-height: 450px | |
background-size: cover | |
.main-img | |
background: url("https://s1.funon.cc/img/orig/201506/09/55773fe73a5c6.jpg") center fixed | |
.second-img | |
background: url("https://www.zastavki.com/pictures/originals/2014/Nature___Flowers_____Nature_Of_New_Zealand_087047_.jpg") center fixed | |
.finally-img | |
background: url(" https://wallpaperfx.com/view_image/beautiful-nature-2560x1440-wallpaper-4691.jpg") center fixed | |
.container | |
background: hsla(1,90%,60%,1) | |
button | |
padding: 10px 40px | |
border: solid 1px #fff | |
background: transparent | |
color: #fff | |
margin: 5% 0 | |
.wrapper | |
display: flex | |
justify-content: center |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment