- This topic has 24 replies, 3 voices, and was last updated 3 years, 2 months ago by Elvin.
-
AuthorPosts
-
August 5, 2016 at 1:44 am #215838Roberto 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
August 5, 2016 at 10:02 am #215948TomLead DeveloperLead DeveloperVery cool – thanks for sharing! π
August 21, 2017 at 10:37 pm #370901EvanThanks 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 π
August 22, 2017 at 12:03 am #370947Roberto EnriqueSorry, 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>
August 22, 2017 at 9:50 am #371372EvanThanks 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.August 22, 2017 at 10:40 am #371404LeoStaffCustomer SupportThanks Roberto π
June 4, 2019 at 11:29 pm #920246DaliaHello together,
what did i wrong? it don’t work for me: my site
June 5, 2019 at 6:02 am #920511DavidStaffCustomer SupportHi there,
test to see if it is working by changing the CSS
transition: 1s opacity;
property time to say5s
.June 5, 2019 at 6:35 am #920556Daliaahhh, 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?
June 5, 2019 at 7:11 am #920727DavidStaffCustomer SupportYou’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.
June 5, 2019 at 7:14 am #920733DaliaHi David, now I am confused. I don’t use elementor. Can I set this effect with css?
June 5, 2019 at 7:30 am #920751DavidStaffCustomer SupportSorry, 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?June 5, 2019 at 7:33 am #920753DaliaAll the content would be great π
June 5, 2019 at 8:47 am #920820DavidStaffCustomer SupportSo 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>
September 26, 2019 at 9:11 am #1019808dasigna… 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 π
-
AuthorPosts
- You must be logged in to reply to this topic.