Fade in Every Page Says Continued
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
Lead Developer
Very cool – thanks for sharing! 🙂
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 🙂
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>
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.
Customer Support
Hello together,
what did i wrong? it don't work for me: my site
Customer Support
Hi there,
test to see if it is working by changing the CSS transition: 1s opacity; property time to say 5s.
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?
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.
Hi David, now I am confused. I don't use elementor. Can I set this effect with css?
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?
All the content would be great 🙂
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> 
… 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 🙂
Source: https://generatepress.com/forums/topic/fade-in-on-page-load/
0 Response to "Fade in Every Page Says Continued"
Post a Comment