Created
January 11, 2021 16:27
-
-
Save timn5835/0f616f1313d46ebee819251335ba1373 to your computer and use it in GitHub Desktop.
[Scroll Animations] How to use animate.css library to fadin/out/slide/etc on scroll #js #scroll #animate
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
// Library url: https://animate.style/ | |
// SCROLL ANIMATION | |
// Check if element is scrolled into view | |
function isScrolledIntoView(elem) { | |
var docViewTop = $(window).scrollTop(); | |
var docViewBottom = docViewTop + $(window).height(); | |
var elemTop = $(elem).offset().top; | |
var elemBottom = elemTop + $(elem).height(); | |
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)) | |
}; | |
//Scroll animation functions | |
$(window).scroll(function() { | |
//render1 section animation functions | |
$('#render1-anchor').each(function() { | |
if (isScrolledIntoView(this) === true) { | |
$('.render1').addClass('animated fadeIn delay delay slow'); | |
// console.log('render 1 anchor in view'); | |
} | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment