rcosgrave/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Create a dynamic reveal of content on scroll

This is just a small snippet of code I use to dynamically animate sections of a page as they come into the viewport.
Dependencies


jQuery (https://jquery.com/)
Waypoint (http://imakewebthings.com/waypoints/)
Animate (see https://daneden.github.io/animate.css/

https://opensource.org/licenses/MIT

  
## app.sample.html
<!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>

## app.sample.js
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)
  );
};
	<!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)
	);
	};