Skip to content

Instantly share code, notes, and snippets.

@frendhisaido
Created September 18, 2020 06:46
Show Gist options
  • Save frendhisaido/857498394d562b4c235b44573246c204 to your computer and use it in GitHub Desktop.
Save frendhisaido/857498394d562b4c235b44573246c204 to your computer and use it in GitHub Desktop.
change background color on scroll
<div class="container flex flex-wrap mx-auto">
<div class="section w-full text-white" style="background-color: #000;">
Section 1
</div>
<div id="section-2" class="section w-full" style="background-color: #fffff;">
Section 2
</div>
<div>
window.section2Animate = true;
$(window).scroll(function () {
var section2AnimateScrollPosition = ($('#section-2').outerHeight()/2);
console.log("Current Scroll Position: "+$(window).scrollTop());
console.log("Target Scroll trigger: "+section2AnimateScrollPosition);
if (window.section2Animate && ( $(window).scrollTop() > section2AnimateScrollPosition ) ) {
console.log('ANIMATION TRIGGERED!')
window.section2Animate = false;
$('#section-2').html('Changing background color!');
$('#section-2').velocity({
"backgroundColor": "#000",
"color": "#fff"
}, {
duration: 5000,
easing: "easeOutQuint",
complete: function() {
$('#section-2').velocity({
"color": "#fff"
}, {
duration: 2000,
easing: "easeOutQuint",
});
}
});
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.2/velocity.min.js"></script>
.section {
min-height: 100vh;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.8.10/tailwind.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment