Skip to content

Instantly share code, notes, and snippets.

@cfleschhut
Last active June 2, 2017 08:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cfleschhut/3a6eedd223d47fcb443e7d2209135e3f to your computer and use it in GitHub Desktop.
Save cfleschhut/3a6eedd223d47fcb443e7d2209135e3f to your computer and use it in GitHub Desktop.
Animated image fade-in
<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>
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();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
[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%);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment