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/
Last active
January 11, 2019 17:58
-
-
Save rcosgrave/ad565c9e8eeaa99c5cb079ce80cd12c2 to your computer and use it in GitHub Desktop.
Animate HTML Elements as they come into viewport
This file contains hidden or 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
| <!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> |
This file contains hidden or 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
| 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) | |
| ); | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment