Skip to content

Instantly share code, notes, and snippets.

@bryanjvolz
Created October 5, 2021 14:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bryanjvolz/264f661831fe32a45c8cdb8eca888469 to your computer and use it in GitHub Desktop.
Save bryanjvolz/264f661831fe32a45c8cdb8eca888469 to your computer and use it in GitHub Desktop.
function checkInView() {
// Allows animations to be triggered once user scrolls element into viewport
// Manage animation patterns w/CSS
// This function just looks for any classes assigned to $animatedClass and when in viewport will add 'animated'
var $animatedClass = $('.animate-scroll');
var $window = $(window);
$window.on('scroll', checkElements);
$window.trigger('scroll');
function checkElements() {
var window_height = $window.height();
var winTopPos = $window.scrollTop();
var winBotPos = (winTopPos + window_height);
$.each($animatedClass, function() {
var $element = $(this);
var height = $element.outerHeight();
var elemTopPos = $element.offset().top;
var elemBotPos = (elemTopPos + height);
//Check if visible
if ((elemBotPos >= winTopPos) && (elemTopPos <= winBotPos)) {
$element.addClass('animated');
}
});
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment