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>
Before you post
Use the Search Feature. Maybe there is already a solution to your issue.
1. Update Lay Theme and all Lay Theme Addons
2. Disable all Plugins
3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
4. Now see if your problem solved itself
5. Go here, see if your problem is listed here:
Troubleshooting
When you post:
1. Post a link to where the problem is
2. If the problem is difficult to explain, post screenshots / link to a video to explain it