[Resolved] Fade in on page load

[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

[Tom]

Very cool – thanks for sharing! 🙂

[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 🙂

[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>

[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.

[Leo]

Thanks Roberto 🙂

[Dalia]

Hello together,

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

[David]

Hi there,

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

[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?

[David]

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.

[Dalia]

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

[David]

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?

[Dalia]

All the content would be great 🙂

[David]

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[i]

    if (jQuery(tag).position().top < pageBottom) { 
      jQuery(tag).addClass("visible")
    }
  }
})
</script>

[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 🙂

[Author]

Posts