[Resolved] Fade in on page load

Home Forums Support [Resolved] Fade in on page load

Home Forums Support Fade in on page load

  • This topic has 24 replies, 3 voices, and was last updated 10 months ago by Elvin.
Viewing 15 posts - 1 through 15 (of 25 total)
  • Author
    Posts
  • #215838
    Roberto Enrique

    There is this trend on web design of fading-in the content on page load to add that sort off soft and dreamy look…
    well, achieving this with GP and GP-Hooks is pretty easy.

    I’ll assume that you already have Simple CSS plugin on your site or that you have a child theme in order to add a couple of css rules.

    Add this to your css:

    
    body {
        opacity: 1;
        transition: 1s opacity;
    }
    body.fade-out {
        opacity: 0;
        transition: none;
    }
    

    Then this to your wp_footer hook:

    
    document.body.className += ' fade-out';
    
    jQuery(function() {
            jQuery('body').removeClass('fade-out');
        });
    

    Now you can fade-in too πŸ™‚

    This was a borrowed snipet from: https://www.abeautifulsite.net/a-clean-fade-in-effect-for-webpages

    #215948
    Tom
    Lead Developer
    Lead Developer

    Very cool – thanks for sharing! πŸ™‚

    #370901
    Evan

    Thanks for sharing!

    I’m unfortunately having some issues though. I’m a beginner to WP, and web-dev in general, so forgive me if this is a silly error. :/

    I’ve placed the following code in Simple CSS:

    
    body {
        opacity: 1;
        transition: 1s opacity;
    }
    body.fade-out {
        opacity: 0;
        transition: none;
    }

    Then, after this didn’t work, I also placed it into “Additional CSS”.

    Secondly, I enabled GP Hooks, and placed the following code into the wp_footer hook as suggested:

    
    document.body.className += ' fade-out';
    
    jQuery(function() {
            jQuery('body').removeClass('fade-out');
        });

    No “fade” effect occurs. Instead, the jQuery code just appears as plain text at the bottom of each of my pages.

    Any help would be greatly appreciated πŸ™‚

    #370947
    Roberto Enrique

    Sorry, you should wrap your footer code in <script> tags, like this:

    <script>
    document.body.className += ' fade-out';
    
    jQuery(function() {
            jQuery('body').removeClass('fade-out');
        });
    </script>
    #371372
    Evan

    Thanks Roberto!

    That worked perfectly. I’m sure the <script> </script> was implied, but I haven’t yet studied Javascript, so it wasn’t obvious to me. Thanks for the prompt reply.

    #371404
    Leo
    Staff
    Customer Support

    Thanks Roberto πŸ™‚

    #920246
    Dalia

    Hello together,

    what did i wrong? it don’t work for me: my site

    #920511
    David
    Staff
    Customer Support

    Hi there,

    test to see if it is working by changing the CSS transition: 1s opacity; property time to say 5s.

    #920556
    Dalia

    ahhh, thank you. Now I see what this code do. But I expected a different effect. Can only the text fade in with scrolling on the page?

    #920727
    David
    Staff
    Customer Support

    You’re site is built using Elementor – you can set the Motion Effects > Entrance Animations via the advanced tab on each of your sections of widgets to do that.

    #920733
    Dalia

    Hi David, now I am confused. I don’t use elementor. Can I set this effect with css?

    #920751
    David
    Staff
    Customer Support

    Sorry, my bad – i was looking at the completely wrong site.
    So you would want your content to fade into view as you scroll? Will it be all the content or just the text?

    #920753
    Dalia

    All the content would be great πŸ™‚

    #920820
    David
    Staff
    Customer Support

    So we could do this, so it only apples to the page content, as your header and nav should be displayed on load. First this CSS:

    #page p, #page div, #page span {
      opacity: 0;
      transition: opacity 1s;
    }
    
    #page p.visible, #page div.visible, #page span.visible { 
      opacity: 1;
    }

    Second this JS script:

    <script>
    jQuery(document).on("scroll", function () {
      var pageTop = jQuery(document).scrollTop()
      var pageBottom = pageTop + jQuery(window).height()
      var tags = jQuery("p, div, span")
    
      for (var i = 0; i < tags.length; i++) {
        var tag = tags
    
        if (jQuery(tag).position().top < pageBottom) { 
          jQuery(tag).addClass("visible")
        }
      }
    })
    </script>
    #1019808
    dasigna

    … just found this little gem and tried it.

    original post has the ‘downside’ that complete content fades … but works.

    davids last reply promises to only fade the content – but on load theres literally nothing initially. you have to scroll at least one pixel – otherwise one would see nothing at all (exept from header). so how can this be done without the scroll action??

    sorry. too dumb to tweak jquery πŸ™‚

Viewing 15 posts - 1 through 15 (of 25 total)
  • You must be logged in to reply to this topic.