Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save Adefful/ceb702afecd00eea4959c2d514386d8f to your computer and use it in GitHub Desktop.
Save Adefful/ceb702afecd00eea4959c2d514386d8f to your computer and use it in GitHub Desktop.
Dinamic Background [on scroll] JQuery

Dinamic Background [on scroll] JQuery

Changing background color while scrolling the page

A Pen by Adefful on CodePen.

License.

<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>
// 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'); });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
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
<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