Viewport-triggered Elements Slide In Animations with jQuery

A very simple jQuery script that reveals html elements with slide & fade animations as they are scrolled into view.

How to use it:

1. Add html element into your document.

<div id="canvas">
  <div id="top_block">
    <img src="images/meet_team.png" id="meet_team_img">
  </div>
  
  <div class="member_box">

    <img src="images/team_1.png" class="member_photo" id="first">
    <span class="member_name" id="1">Joey</span>
    <span class="member_description">Joey is our man man. He works close with the developer team to ensure quality.</span>

    <img src="images/team_2.png" class="member_photo" id="second">
    <span class="member_name" id="2">Karl</span>
    <span class="member_description">Karl is typically half asleep on the job so he is our coffee boy.</span>

    <img src="images/team_3.png" class="member_photo" id="third">
    <span class="member_name" id="3">Bobby</span>
    <span class="member_description">Bobby keeps everything afloat. Bobby can do anything you ask. He enjoys summer nights and fishing.</span>

    <img src="images/team_4.png" class="member_photo" id="fourth">
    <span class="member_name" id="4">Ray</span>
    <span class="member_description">Ray is a spastic maniac who is a great coder, although he much prefers to be not be disturbed.</span>

    <img src="images/team_5.png" class="member_photo" id="fifth">
    <span class="member_name" id="5">Hugh</span>
    <span class="member_description">Hugh is our customer consultant and takes a great amount of pride in incrementing his street credit.</span>

    <img src="images/team_6.png" class="member_photo" id="sixth">
    <span class="member_name" id="6">Elon</span>
    <span class="member_description">Elon lives to draw, paint and design. So he is our wonderful chef.</span>

  </div>

</div>

2. Load the needed jQuery JavaScript library in the document.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

3. Defining our variables in the root of the code and updating those variables every time we scroll.

var windowHeight = $(window).height();
    var windowScrollPosTop = $(window).scrollTop();
    var windowScrollPosBot = windowHeight + windowScrollPosTop;

    if ($(window).height() > 510) {
      $("#top_block").css("height", $(window).height());
    };

4. The core jQuery method.

$.fn.revealOnScroll = function(direction) {
  return this.each(function() {

    var objectOffset = $(this).offset();
    var objectOffsetTop = objectOffset.top;

    if (!$(this).hasClass('hidden')) {
      if (direction == "right") {
        $(this).css({
          "opacity" : 0,
          "right"   :"400px"
        });
      } else {
        $(this).css({
          "opacity" : 0,
          "right"   :"-400px"
        });
      }
      $(this).addClass("hidden");
    }


    if (!$(this).hasClass("animation-complete")) {

      if (windowScrollPosBot > objectOffsetTop) {
        $(this).animate({
          "opacity" : 1,
          "right"   : 0},
          500).addClass("animation-complete");
      }
    }

  });
}

4. Reveal the elements on scroll.

$(window).scroll(function() {
  windowHeight = $(window).height();
  windowScrollPosTop = $(window).scrollTop();
  windowScrollPosBot = windowHeight + windowScrollPosTop;

  $("#first").revealOnScroll("right");
  $("#1").revealOnScroll("left");
  $("#second").revealOnScroll("left");
  $("#2").revealOnScroll("right");
  $("#third").revealOnScroll("right");
  $("#3").revealOnScroll("left");
  $("#fourth").revealOnScroll("left");
  $("#4").revealOnScroll("right");
  $("#fifth").revealOnScroll("right");
  $("#5").revealOnScroll("left");
  $("#sixth").revealOnScroll("left");
  $("#6").revealOnScroll("right");

  $(".member_description").revealOnScroll();

});

---

This awesome jQuery plugin is developed by kineticR. For more Advanced Usages, please check the demo page or visit the official website.