Skip to content

Instantly share code, notes, and snippets.

@cfleschhut cfleschhut/index.html
Last active Jun 2, 2017

Embed
What would you like to do?
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
You can’t perform that action at this time.