I found this useful post about fading in elements: fade in elements on scroll like on http://meireundmeire.com/category/selected-projects/
However it does not work on mobile – is there a way to make it work? Like on e.g. http://meireundmeire.com
Any input on this would be much appreciated.
THX!
As I only want it to slide in images I have changed the js script and added the .slideUp class to images in the gridder.
javascript:
<script>
var $items;
var doScroll = function(){
$items.each(function(ix){
var rect = this.getBoundingClientRect();
//above viewport
if(rect.top+rect.height < 0){
jQuery(this).addClass("above").removeClass('below transition-in');
}
//below viewport
else if(rect.top > window.innerHeight){
jQuery(this).addClass("below").removeClass('above transition-in');
}
// in viewport
else{
jQuery(this).removeClass('above below').addClass("transition-in");
}
});
};
window.laytheme.on("newpageshown", function(){
setTimeout(function(){
$items = jQuery(".slideUp");
},0);
});
jQuery(window).on('scroll', doScroll);
</script>
CSS
.slideUp.above{
transform: translateY(-200px);
opacity: 0;
}
.slideUp.below{
transform: translateY(200px);
opacity: 0;
}
.slideUp.transition-in{
transform: translateY(0);
opacity: 1;
}
.slideUp{
transition: transform 0.5s cubic-bezier(0.165, .84, .44, 1), opacity 0.5s cubic-bezier(0.165, .84, .44, 1);
}
