Animated Transitions during Page Loading
-
Hello everyone,
I am novice in using CSS. However, I seek help and quick shortcuts in developing animated page-loads/transitions for my website.
My website currently uses FontFolio theme which does not feature such.
I prefer to create white fading that matches the page load speed.
Anyone’s help would be very much appreciated.
The blog I need help with is: (visible only to logged in users)
-
Matching page load speed isn’t really possible as far as I know since with CSS we can’t monitor the loading progress of the page. The best we can do is set it for a certain interval, such as 2 seconds or something like that, and if someone is on a really fast internet connection the page is going to be completely loaded but not visible until the interval is complete.
The other thing to keep in mind on fadein animations is that the web surfing public has a… errr… short tolerance for slow loading, and an animation that takes too long is the same as a slow loading page so they may click away. In the following, I’ve set a duration of 5 seconds just as an example, but in my opinion, the duration should never be over 2 seconds.
@keyframes fadein { from { opacity: 0;} to { opacity: 1;} } .page { opacity: 1; animation-duration: 2s; animation-name: fadein; animation-timing-function: easein; }To see the animation, you will need to visit your site after you add the above and save. You will notice that this animation does not work on the home page of your site. I’m checking with our developers on this and will get back to you on that.
-
-
Also, can you find a way where each time the website reloads or loads any of its pages/posts, the header ‘Azure’, tagline ‘Integral Designs’, top black bar, menu links and search bar do not refresh and stay unaffected by animate-fade?
-
Also, unless I recreate home page that spans full width and excludes sidebar – except refreshing home page, when one reloads any page from the menu links or toggles from one post to another, can you also make the sidebar remain unaffected during animate-fade?
-
I have another problem/question: the Header ‘Azure’ flickers when refreshing in general – since I’m paying for Premium theme, and because I’m using custom domain name ending with .com built upon a standard one ending with …wordpress.com, the header flickers going from bold to thin within a fraction of a second. I want that fixed please, thanks.
-
@harshavardhanmoghe, I had to chat with one of our developers about the single posts and home page not animating. Replace the code I gave previously with this.
@keyframes myfadein { from { opacity: 0; } to { opacity: 1; } } #page { opacity: 1; animation-duration: 2s; animation-name: myfadein; animation-timing-function: easein; } -
…the header flickers going from bold to thin within a fraction of a second. I want that fixed please, thanks.
At this point, this is not something that we can fix. Since you are using custom fonts, the fonts have to be downloaded from the site serving the fonts by the browser, and if the font server happens to be a bit slow due to load or internet traffic, and we waited for those to load, your visitors could be staring at a blank page for too long and make click away. For that reason it was decided that we would start the page load before the fonts loaded. It is a delicate balancing act.
If you wish the sidebar to stay in place and visible when someone goes from one page to another, no we cannot do that with CSS. We can animate the content, header and footer and not include the sidebar in the animation, but the sidebar would still disappear and reload when someone goes to a different page that had a sidebar. The sidebar, due to everything else being animated with a fade would be fully visible much quicker than the rest of the page though.
-
Thanks, your new code works. Still, refreshing home page does not head the header and menu animate neatly as I’d like when refreshing other pages and posts.
-
Can you also provide a code that allows the website to fade out before refreshing another page/post/homepage? So I have two fade types: fade out before it loads, and fade in once it loads.
-
I’m currently seeing no content on your site and not seeing any of the CSS that I gave above, so I can’t see what you are talking about with the header on the main page. I also see that you have gotten a refund on the Premium Plan, so you can no longer add custom CSS.
Once someone clicks on a link on your site, there is no way to delay the browser for a fade out. That would require being able to control the user’s browser and pause it, and that would require something like Javascript, which is not allowed here at WordPress.com for security reasons.
-
Sorry to cause an inconvenience of confusion. I had repurchased Premium plan so all settles. Now, can you reread my last few questions/concerns please?
-
In my previous reply I mentioned that there isn’t really a way to do the fade out since we would need to delay the browser, and we cannot do that with CSS. It would require Javascript.
I’m seeing a consistent fade in on all pages on your site (home, about, Ethos, etc.).
With CSS, we can’t keep the sidebar and/or header loaded and only load the content area, if that is what you are wanting. That would require changes to the theme files and we cannot edit those here at WordPress.com.
We can set only the content area to do the fade in and not fade the header/menu and sidebar. When a visitor would click on a post or page link, the header and sidebar would load normally and the content area would then fade in. Is that what you are wanting?
- The topic ‘Animated Transitions during Page Loading’ is closed to new replies.
WordPress.com Forums 