fade in elements on scroll like on http://meireundmeire.com/category/selected-projects/

---

Hey Armin,

you did a great job with the website of Meiré und Meiré (http://meireundmeire.com)! Would it be possible to add or simulate the effect (when images get loaded they appear and scroll up) in Lay Theme as well? I tried it with animate.css (which worked but felt a bit buggy and slow), maybe you have another idea how to add this effect?

Again, thank you so much!

Hey Moritz!

Here is how to have the effect when you scroll. On pageload it won't really work. Put the css and javascript in "lay options" -> "custom css & html":

css:

.col.above{
	transform: translateY(-90px);
	opacity: 0;
}

.col.below{
	transform: translateY(90px);
	opacity: 0;
}

.col.transition-in{
	transform: translateY(0);
	opacity: 1;
}

.col{
	transition: transform 0.5s cubic-bezier(0.165, .84, .44, 1), opacity 0.5s cubic-bezier(0.165, .84, .44, 1);
}

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(".col");
        },0);
    });
    jQuery(window).on('scroll', doScroll);
</script>