Create a Fade Effect When Going Between Pages of Your Website

I have a client who wanted pages to fade in on load and fade out when leaving. This effect also hides some of the messiness that can appear in the browser (partially loaded images, JavaScript, etc.) as the site is loading.

I thought this would be simple. There are lots of documented solutions online, which worked fine until recently when I noticed pages not un-fading in iOS Chrome and Safari. It seemed that an update has broken this functionality, probably something to do with disabling animations to save mobile battery life.

Ways to Fade In a Page

There are at least three ways that I found to fade in a page on load:

1. CSS + JavaScript – DOES NOT WORK ON IOS

In this method, you set the body to zero opacity with a set transition time.

Then, when the page is fully loaded, JavaScript changes the opacity to 1.

This was the method I used, which worked great until recently (May 2018).  Unfortunately, the failure mode on iOS was that the page never faded in. Pretty disastrous!

2. Pure CSS – WORKS INTERMITTENTLY ON IOS

I had high hopes for a pure CSS method I found, in which you again set the body to opacity:0, but this time you use CSS animation to fade it in. (See link for code, as it’s kind of long to post here).

Strangely, this actually worked some of the time on iOS (less than half the time though).


3. Pure JavaScript (jQuery) – THIS ONE WORKS THE BEST (WITH A CAVEAT)!

This technique uses jQuery animate to change the body from opacity:0 to 1.  Here’s the CSS:

Here’s the jQuery:

This worked 100% of the time for me on iOS!  Yay!!

Upon further testing, however, I found that when I used the browser’s Back button to return to a page, it would be in the faded out state. Apparently it doesn’t re-run JS when you return to it.

I ended up disabling this function. If you don’t care about people using the Back button on iOS, this could work for you.

Note, all of these worked fine on Android and all desktop browsers in my testing.

Graceful Degredation

If you do use one of these methods, you’ll want to make sure the page is faded in for those few people who might not have JavaScript enabled. You can do it with this in the page head:

If you’re using WordPress, you’ll want to create a child theme and use an action hook to add in the head code. So, in your child theme’s functions.php. you would have this:

Fading Out When Leaving a Page

To fade a page out, the first thing I did was to try triggering on clicking a link.  But, not all links cause the page to reload (such as when target=”_blank”, i.e., links opening in new window).  I excluded those cases but then there were other cases such href=”mailto:…” and so forth.

Then I tried triggering on “beforeunload”, but to my dismay it still triggered on “mailto” links.

So, I have this somewhat messy code, but it works:

So, we have a cool easy way to fade out pages when leaving.

We have a method to fade in pages that works for all browsers except for when using the back button on iOS. I ended “body”).addClass(‘all-loaded’);up not using it due to this fact. If you know of a solution, let me know! – Brian



Leave a Comment or Ask a Question

This site uses Akismet to reduce spam. Learn how your comment data is processed.