A Simple jQuery Scroll-Reveal Script

There are many sites out there where as you scroll down, various elements in the content fade in and move into place on the screen. It’s often referred to as ‘scroll reveal’. When something becomes visible in the user’s viewport, a javascript function is fired. Usually it will add a class, marking it as visible, and triggering a transition that’s bound to that class. Here at Machine we use the class ‘is-visible’ or ‘is-revealed’.

Now there are many options to choose from for the Scroll Reveal effect. When maximizing flexibility such as firing different functions based on scroll directions, viewport offset, and managing a custom ScrollSpy navigation bar, I’d recommend Waypoints.js.

If you’re looking for something more simple and plug n’ play — try Wow.js. It’s built for use with animate.css making it very easy to have it working in a few minutes, but allows for any CSS animations to be used with it. Take note that its license only permits for non-commercial sites, but you can purchase a license for unlimited commercial sites.

If neither suit you, here’s a dead-simple script I made that can add .animated to an class of your choice (I’m using .has-scroll-reveal).

/* Simple Scroll Reveal
 * @author Machine Agency [[email protected]]
 * @link http://machine-agency.com
 */
jQuery(document).ready( function($) {
    var revealClass = '.animated';
    var targetClass = '.has-scroll-reveal:not(' + revealClass + ')';
    var offset = 50; // Offset from bottom of viewport in pixels.

    var winHeight = $(window).height();

    // Recalc height of window in case of resize
    $(window).bind('resizeEnd', function() {
      winHeight = $(window).height();
    });

    // Fire when page loads
    triggerAnimation(revealClass, targetClass, offset, winHeight);

    // Also fire on scroll
    $(window).on('scroll', function() {
        triggerAnimation(revealClass, targetClass, offset, winHeight);
    }); // window.on('scroll')

}); // document.ready

function triggerAnimation(revealClass, targetClass, offset, winHeight) {

      // Get current scrollPos
      var trigger = $(window).scrollTop() + winHeight - offset;

      // Loop through elements we're affecting
      $(targetClass).each(function() {
        var elementOffset = $(this).offset().top;

        if( elementOffset < trigger ) {

          $(this).addClass( revealClass.replace('.','') );
        }
      });

}

/*
 * ResizeEnd
 *
 * Example:
 * $(window).bind('resizeEnd', function() {
 *  console.log('resize ended 500ms ago');
 * });
 */
$(window).resize(function() {

    if(this.resizeTO) clearTimeout(this.resizeTO);

    this.resizeTO = setTimeout(function() {
        $(this).trigger('resizeEnd');
    }, 500);

});

Here’s an example of HTML and CSS to be used with this:

<h1>My Scroll Reveal Test</h1>
<p class="has-scroll-reveal animation fadeInUp">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>

.has-scroll-reveal { opacity: 0; animation-play-state: paused; }

.animated {
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
    animation-play-state: running;
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}


@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2.5rem, 0);
    transform: translate3d(0, 2.5rem, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

glhf!