Animated image fade-in

index.html

<div class="content">
  <h1>Lorem ipsum</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error velit in, enim voluptatum placeat, esse officiis dicta, dignissimos sapiente ipsum aut. Itaque ipsa magnam sint aspernatur illum, sed libero vel.</p>

  <h2>Lorem ipsum dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error velit in, enim voluptatum placeat, esse officiis dicta, dignissimos sapiente ipsum aut. Itaque ipsa magnam sint aspernatur illum, sed libero vel. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error velit in, enim voluptatum placeat, esse officiis dicta, dignissimos sapiente ipsum aut. Itaque ipsa magnam sint aspernatur illum, sed libero vel.</p>
  <p class="placeholder"></p>
  <p>
    <img src="http://static.highsnobiety.com/wp-content/uploads/2016/10/27194553/Colette-Coach-Casetify-7-640x427.jpg" data="inview-fading">
  </p>
  <p class="placeholder"></p>
  <p>
    <img src="http://static.highsnobiety.com/wp-content/uploads/2016/10/27194553/Colette-Coach-Casetify-7-640x427.jpg" data="inview-fading">
  </p>
  <p class="placeholder"></p>
  <p>
    <img src="http://static.highsnobiety.com/wp-content/uploads/2016/10/27194553/Colette-Coach-Casetify-7-640x427.jpg" data="inview-fading">
  </p>
  <p>
    <img src="http://static.highsnobiety.com/wp-content/uploads/2016/10/27194553/Colette-Coach-Casetify-7-640x427.jpg" data="inview-fading">
  </p>
  <p>
    <img src="http://static.highsnobiety.com/wp-content/uploads/2016/10/27194553/Colette-Coach-Casetify-7-640x427.jpg" data="inview-fading">
  </p>
  <p class="placeholder"></p>
  
  <h2>Lorem ipsum dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error velit in, enim voluptatum placeat, esse officiis dicta, dignissimos sapiente ipsum aut. Itaque ipsa magnam sint aspernatur illum, sed libero vel. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error velit in, enim voluptatum placeat, esse officiis dicta, dignissimos sapiente ipsum aut. Itaque ipsa magnam sint aspernatur illum, sed libero vel.</p>
  <p class="placeholder"></p>
  <h2>Lorem ipsum dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error velit in, enim voluptatum placeat, esse officiis dicta, dignissimos sapiente ipsum aut. Itaque ipsa magnam sint aspernatur illum, sed libero vel. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error velit in, enim voluptatum placeat, esse officiis dicta, dignissimos sapiente ipsum aut. Itaque ipsa magnam sint aspernatur illum, sed libero vel.</p>
  <p>
    <img src="http://static.highsnobiety.com/wp-content/uploads/2016/10/27194553/Colette-Coach-Casetify-7-640x427.jpg" data="inview-fading">
  </p>
  
  <h2>Lorem ipsum dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error velit in, enim voluptatum placeat, esse officiis dicta, dignissimos sapiente ipsum aut. Itaque ipsa magnam sint aspernatur illum, sed libero vel. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error velit in, enim voluptatum placeat, esse officiis dicta, dignissimos sapiente ipsum aut. Itaque ipsa magnam sint aspernatur illum, sed libero vel.</p>
  <p class="placeholder"></p>
  <h2>Lorem ipsum dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error velit in, enim voluptatum placeat, esse officiis dicta, dignissimos sapiente ipsum aut. Itaque ipsa magnam sint aspernatur illum, sed libero vel. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error velit in, enim voluptatum placeat, esse officiis dicta, dignissimos sapiente ipsum aut. Itaque ipsa magnam sint aspernatur illum, sed libero vel.</p>
  <p>
    <img src="http://static.highsnobiety.com/wp-content/uploads/2016/10/27194553/Colette-Coach-Casetify-7-640x427.jpg" data="inview-fading">
  </p>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error velit in, enim voluptatum placeat, esse officiis dicta, dignissimos sapiente ipsum aut. Itaque ipsa magnam sint aspernatur illum, sed libero vel. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error velit in, enim voluptatum placeat, esse officiis dicta, dignissimos sapiente ipsum aut. Itaque ipsa magnam sint aspernatur illum, sed libero vel.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error velit in, enim voluptatum placeat, esse officiis dicta, dignissimos sapiente ipsum aut. Itaque ipsa magnam sint aspernatur illum, sed libero vel. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error velit in, enim voluptatum placeat, esse officiis dicta, dignissimos sapiente ipsum aut. Itaque ipsa magnam sint aspernatur illum, sed libero vel.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error velit in, enim voluptatum placeat, esse officiis dicta, dignissimos sapiente ipsum aut. Itaque ipsa magnam sint aspernatur illum, sed libero vel. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error velit in, enim voluptatum placeat, esse officiis dicta, dignissimos sapiente ipsum aut. Itaque ipsa magnam sint aspernatur illum, sed libero vel.</p>
</div>

qkrmaz.markdown

Animated image fade-in when visible in viewport

A Pen by Christian Fleschhut on CodePen.

License.

script.js

var inviewImageFading = {
  initialize: function() {
    this.images = $('[data=inview-fading]');
    this.hiddenCls = 'inview-fading--hidden';
    this.vh = $(window).height();
    
    this.images.addClass(this.hiddenCls);
    
    this.handleVisibility();
    $(window).on('scroll.imageFading', this.handleVisibility.bind(this));
  },
  
  isInView: function(el, scrollPos) {
    var topPos = el[0].getBoundingClientRect().top;
    return (topPos - this.vh) <= 0;
  },
  
  handleVisibility: function() {
    var scrollPos = $(window).scrollTop();

    this.images.each(function(i, el) {
      var image = $(el);
      if(this.isInView(image, scrollPos)) {
        image.removeClass(this.hiddenCls);
      }
    }.bind(this));
  }
};

$(function() {
  inviewImageFading.initialize();
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

style.scss

[data="inview-fading"] {
  transition: all 750ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.inview-fading--hidden {
  opacity: 0;
  transform: translate3d(0, 80px, 0);
}


.content {
  width: 640px;
  margin: 0 auto;
}

.placeholder {
  padding-bottom: percentage(2/3);
  background: hsl(0, 0%, 97%);
}