Jquery - Select images with a class name in viewport

http://stackoverflow.com/questions/22878342/jquery-select-images-with-a-class-name-in-viewport

by Cătălin Dogaru

HTML

<script src="//code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sem diam, posuere sed dapibus a, lobortis vel nulla. Aenean at tempor urna, eu pellentesque odio. Praesent sit amet nunc ut nunc luctus viverra. Etiam consectetur, augue nec dignissim tempus, velit nunc facilisis neque, quis interdum massa leo eget libero. Integer id vulputate massa, in lacinia tortor. Sed aliquet metus auctor felis volutpat convallis. Vivamus dolor lacus, aliquet ut imperdiet vitae, volutpat id neque. Fusce et mauris volutpat tortor cursus gravida vitae eget nisi.
</p>
<p>
  Vestibulum a laoreet sapien. Aliquam auctor, turpis sit amet mattis accumsan, lectus dolor facilisis augue, a ultrices odio urna ac nunc. Cras vel tincidunt sapien. Integer semper nibh diam, eu tincidunt erat porta non. Pellentesque venenatis venenatis justo, a ultricies augue aliquam sit amet. Nullam vel ante vitae enim ultricies mollis. Nulla interdum auctor lectus non venenatis. Etiam vestibulum quis nisi ac molestie. Quisque tempus eros nisi, ut pharetra augue commodo quis. Ut vehicula molestie augue et placerat. Aliquam molestie risus tincidunt sapien sodales euismod. Donec facilisis eros non tellus lacinia tincidunt. Cras condimentum ultricies libero ut semper. Cras commodo vestibulum imperdiet. Cras tortor orci, imperdiet eu neque ac, viverra imperdiet lacus.
</p>
<p>
  Cras velit ipsum, ultricies in pellentesque id, accumsan sit amet leo. Vivamus euismod luctus dolor, sit amet pharetra sapien egestas vitae. Integer nec turpis in erat condimentum hendrerit. Etiam ligula massa, pellentesque vitae suscipit ut, lobortis nec ligula. Nulla ipsum odio, tempor ut tempor ut, auctor id tortor. Suspendisse tortor purus, sodales sed metus venenatis, aliquet varius elit. Proin at purus rhoncus tellus adipiscing rhoncus. Vestibulum eu elementum nulla, et gravida dolor. Phasellus nec risus vitae purus dapibus volutpat ac non ipsum. Cras rutrum a...

CSS

p {
  margin: 60px 120px;
}

JavaScript

(function ($) {
  var settings = {
    throttle: 300
  };
  var elements = [];
  var timer;

  $.fn.visible = function () {
    var rect = this[0].getBoundingClientRect();
    var $window = $(window);

    return (
         rect.top <= $window.height()
      && rect.right >= 0
      && rect.bottom >= 0
      && rect.left <= $window.width()
    );
  };

  $.fn.viewport = function (options) {
    $.extend(settings, options);

    elements = this;

    return elements.each(function () {
      $(this).data('visible', $(this).visible());
    });
  };

  $(window).on('scroll', function (event) {
    if (!timer) {
      timer = setTimeout(function () {
        $.each(elements, function () {
          var visible = $(this).visible();

          if (visible) {
            if (!$(this).data('visible')) {
              $(this).data('visible', visible);
              $(this).trigger('enter', event);
            }
          } else if ($(this).data('visible')) {
            $(this).data('visible', visible);
            $(this).trigger('leave', event);
          }
        });

        timer = null;
      }, settings.throttle);
    }
  });
})(jQuery);

$('p').viewport().on('enter', function () {
  $(this).effect('highlight', 'slow');
});