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

[MoritzMoritz]

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!

[arminunruh]

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>