This is just a small snippet of code I use to dynamically animate sections of a page as they come into the viewport.
- jQuery (https://jquery.com/)
- Waypoint (http://imakewebthings.com/waypoints/)
- Animate (see https://daneden.github.io/animate.css/
This is just a small snippet of code I use to dynamically animate sections of a page as they come into the viewport.
<!doctype html> | |
<html lang="en"> | |
<head> | |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" integrity="sha256-HtCCUh9Hkh//8U1OwcbD8epVEUdBvuI8wj1KtqMhNkI=" crossorigin="anonymous" /> | |
</head> | |
<body> | |
<div style='background-color:red;height:100vh;width:100%;' class='animate-on-seen'></div> | |
<div style='background-color:green;height:100vh;width100%;' class='animate-on-seen'></div> | |
<div style='background-color:blue;height:100vh;width100%;' class='animate-on-seen'></div> | |
<div style='background-color:red;height:100vh;width100%;' class='animate-on-seen'></div> | |
<div style='background-color:green;height:100vh;width100%;' class='animate-on-seen'></div> | |
<div style='background-color:blue;height:100vh;width100%;' class='animate-on-seen'></div> | |
<script src="https://code.jquery.com/jquery-3.3.1.min.js" | |
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" | |
crossorigin="anonymous"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js" integrity="sha256-jDnOKIOq2KNsQZTcBTEnsp76FnfMEttF6AV2DF2fFNE=" crossorigin="anonymous"></script> | |
<script src="app.sample.js"></script> | |
</body> | |
</html> |
jQuery(document).ready(function ($) { | |
// Any HTML element with the class `animate-on-seen` | |
$('.animate-on-seen').each(function () { | |
// If the element is not above the fold of the viewport then hide them | |
if (isInViewport($(this)[0]) == false) { | |
// Element is below the fold so hide it | |
$(this).css('opacity', 0); | |
// Using the @dep waypoint.js (see http://imakewebthings.com/waypoints/shortcuts/sticky-elements/) | |
// when the element comes into view add the animated class to prevent continuous animating | |
// Add correct Animation | |
$(this).waypoint(function() { | |
var animation_to_use = "fadeInUp"; | |
if ($(this).data('animation')) { | |
animation_to_use = $(this).data('animation'); | |
} | |
$(this.element).addClass(animation_to_use + ' animated'); | |
$(this.element).css('opacity', 1); | |
}, {offset:'85%'}); // Personal Preference | |
} | |
}); | |
}); | |
// function to determine if the element is in the viewport/above the fold | |
// @src https://vanillajstoolkit.com/helpers/isinviewport/ | |
var isInViewport = function (elem) { | |
console.log(elem); | |
var distance = elem.getBoundingClientRect(); | |
return ( | |
distance.top >= 0 && | |
distance.left >= 0 && | |
distance.bottom <= (window.innerHeight || document.documentElement.clientHeight) && | |
distance.right <= (window.innerWidth || document.documentElement.clientWidth) | |
); | |
}; |