Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

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

    General Discussion
    2
    2
    891
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • M
      MoritzMoritz last edited by arminunruh

      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!

      1 Reply Last reply Reply Quote 0
      • arminunruh
        arminunruh Global Moderator last edited by

        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>
        
        1 Reply Last reply Reply Quote 0
        • First post
          Last post

        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

        Thanks!

        Online Users

        A
        N
        J
        S
        7
        M
        P

        Recent Topics

        • S

          Theme crashed - because of Polylang?

        • S

          can't change front page

        • M

          komische boxen auf der Website

        laytheme.com