Simple Appear on Scroll

Posted by: Alex on August 3, 2013

This Code Byte provides a really nice way to fade in an object/image/text just as it’s brought into the view of the user. It makes for an elegant and simple stylish reveal, though not to be overused.

var $win = $(window);
var $img = $('.fadeInScroll'); // Change this to affect your desired element.

$win.on('scroll', function () {
  var scrollTop = $win.scrollTop();

  $img.each(function () {
    var $self = $(this);
    var prev = $self.offset();
    if (prev) {
      var pt = 0;
      pt = prev.top - $win.height();
      $self.css({
        opacity: (scrollTop - pt) / ($self.offset().top - pt)
      });
    } else {
      $self.css({
        opacity: 1
      });
    }
  });

}).scroll();

So if you’re looking for a way to show image on web browser scroll or any other item this is the one for you!

trulycode-responsive
Hello