How to Build a Website Homepage Fading Effect

Using jQuery it's possible to build some outstanding effects with just a few lines of code. CSS3 offers transitions along with keyframe animations, but these are primarily supported in newer web browsers. If you're looking for a creative yet well-supported method for animations then you can't go wrong with basic jQuery code.

In this tutorial I want to demonstrate how to build a website fading effect on multiple areas of a webpage. It's a very simple block of code which doesn't require a whole lot of JavaScript knowledge. I'll break down each piece of the animation which should be easy enough to customize for your own website interface. Take a peek at my live demo to see the final design.

Live Demo - Download Source Code

Building the Page Layout

First I'm going to download a local copy of jQuery to include within the index.html file. This also has an external link to my stylesheet which readies the page elements for animation.

The overall page structure just uses block elements for a couple headers, a small navigation, along with this MacBook Pro icon. Each element will fade into the website following a slight delay. These delay numbers can be adjusted to fade in slower or faster as needed.

<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html">
<title>Homepage Fading Effect - Template Monster Demo</title>   
<meta name="author" content="Jake Rocheleau">     
<link rel="shortcut icon" href="http://static.tmimgcdn.com/img/favicon.ico">     
<link rel="icon" href="http://static.tmimgcdn.com/img/favicon.ico">     
<link rel="stylesheet" type="text/css" media="all" href="css/styles.css">   
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>         
<div id="wrapper">     
<h1 id="pagehead">Welcome to my Site</h1>         
<nav>   
<ul class="clearfix">     
<li><a href="#" class="green">Home</a></li>       
<li><a href="#" class="purple">About Me</a></li>       
<li><a href="#" class="blue">Portfolio</a></li>       
<li><a href="#" class="yellow">References</a></li>       
<li><a href="#" class="orange">Contact</a></li>   
</ul>       
</nav>       
<!-- https://www.iconfinder.com/icons/53264/apple_computer_laptop_mac_macbook_pro_icon -->   
<div class="macbook-icon"><img src="images/macbook-pro.png" alt="macbook pro laptop" width="256" height="256"></div>       
<h3 id="subhead">Designing &amp; Coding for Mac OS X</h3>   
</div> 
<!-- @end #wrapper -->

Above is the entire code snippet from my page body. The wrapper is responsive so you can resize the page to any width, plus get the fading effect on mobile screens too. Most elements use an ID or class name to be easily identified within jQuery.

My design is based on a very minimalist homepage with few objects to animate. If you have a cluttered homepage it may be worthwhile to animate just a few items, or simply animate the whole page at once. This could be done by targeting the #wrapper ID and using a single animation on everything.

CSS Designs

In my styles.css document I've included some typical page resets customized from the Eric Meyers reset. The page layout has been made responsive with em font sizes and responsive images.

h1 {
  display: block;
  font-size: 2.8em;
  line-height: 1.75em;
  opacity: 0;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: bold;
  color: #616161;
  text-align: center;
}

h3 {
  font-family: 'Varela Round', Helvetica, Arial, sans-serif;
  display: block;
  font-size: 3.35em;
  line-height: 1.35em;
  font-weight: normal;
  font-style: italic;
  color: #5e9dcc;
  opacity: 0;
  text-align: center;
}

/** page structure **/
#wrapper {
  display: block;
  max-width: 900px;
  margin: 0 auto;
  padding-top: 55px;
}

#pagehead {
  position: relative;
  top: -12px;
}

.macbook-icon {
  display: block;
  text-align: center;
  opacity: 0;
}

The page setup uses a maximum width of 900px and will resize to the browser window. You'll notice that both of the h1 and h3 elements have an opacity value of 0. This is also true for the .macbook-icon class and other elements in the navigation.

Using 0 opacity allows for a smooth animation up to 100% opacity using jQuery. Depending on how many elements you're animating it might be easier to create a single class like .hidden to set the opacity. The alternative is using more verbose code to rewrite the same property on multiple elements.

nav {
  display: block;
  width: 100%;
   text-align: center;
}

nav ul {
  width: 50%;
}

nav ul li a {
  display: block;
  opacity: 0;
  float: left;
  width: 20%;
  padding: 12px 0;
  font-size: 1.1em;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  -webkit-transition: background 0.3s linear;
  -moz-transition: background 0.3s linear;
  transition: background 0.3s linear;
}

nav ul li a.green { background: rgba(55,123,84,0.8); }
nav ul li a.purple { background: rgba(131,89,143,0.8); }
nav ul li a.blue { background: rgba(78,120,188,0.8); }
nav ul li a.yellow { background: rgba(208,208,80,0.8); }
nav ul li a.orange { background: rgba(208,105,80,0.8); }

nav ul li a.green:hover { background: rgba(55,123,84,1); }
nav ul li a.purple:hover { background: rgba(131,89,143,1); }
nav ul li a.blue:hover { background: rgba(78,120,188,1); }
nav ul li a.yellow:hover { background: rgba(208,208,80,1); }
nav ul li a.orange:hover { background: rgba(208,105,80,1); }

/** responsive code **/
@media screen and (max-width: 780px) {
  nav ul { width: 90%; }
}

The nav element along with the unordered list are both kept in full display at all times. Only the internal anchor links use an opacity of 0 to hide from the page. This is necessary because the ul element would fade opacity on every link at the same time. I want to fade each link one after another like a chaining effect.

Also each link has an individual class to set the background color. I'm using the newer CSS3 rgba() syntax to create a slightly-dimmed background on each link. The hover effect is a good example of CSS3 transitions which update the background alpha channel at 300ms when hovering on or off any link.

At the bottom you'll find a single responsive media query which updates the width of this navigation container. At full-width the items are smaller and centered on the page. But after dropping below 780px the nav resizes to a fuller 90% width. If you'd need more responsive media queries follow this same structure for alternative blocks of CSS.

Animating in jQuery

Lastly at the bottom of my HTML file we can look into the jQuery animation effects. These are all pretty basic and shouldn't require more than a beginner's understanding of JavaScript/jQuery.

$(function(){
  $('a[href$="#"]').on('click', function(e){
    e.preventDefault();
  });
  
  $('#pagehead').delay(400).animate({opacity: '1', top: '0'});
  
  $('nav ul li a.green').delay(500).animate({opacity: '1'});
  $('nav ul li a.purple').delay(620).animate({opacity: '1'});
  $('nav ul li a.blue').delay(740).animate({opacity: '1'});
  $('nav ul li a.yellow').delay(860).animate({opacity: '1'});
  $('nav ul li a.orange').delay(980).animate({opacity: '1'});
  
  $('.macbook-icon').delay(1100).animate({opacity: '1'},850);
  $('#subhead').delay(1200).animate({opacity: '1'});
});

First is my anchor link selector which targets every link using the href="#" attribute. Since these links cause a jump in the page I've stopped all of these links from loading with a single click event handler.

Afterwards I'm creating each individual animation by targeting the page elements one-by-one. The jQuery .delay() method will force a pause in milliseconds before the second method is performed. Each delay is followed by a prototypical .animate() method which updates the element's CSS opacity.

Notice the #pagehead selector also updates the relative position value so the text appears to fade in from the top. This is another nice way to use animations on your page by moving elements into certain positions.

Also the animation for .macbook-icon has a custom duration set at the end of the method. Everything else uses a default of 400 milliseconds but the MacBook icon animates for a bit longer. This duration value can be applied to any other element(s) on the page as well. It just gives a more drawn-out animation to capture attention.

Overall it's a really simple effect that you can understand with just 30-60 mins of practice and research. Plus with a bit of work you can recreate these animations for your own webpage or even write a function with the jQuery queue and dequeue methods.

Closing

Although some designers prefer CSS libraries such as Animate.css, the use of JavaScript has always been preferred for UI effects. This tutorial manipulates CSS properties with jQuery to provide greater support in older browsers such as Internet Explorer. Feel free to download a copy of my source code and play around to get the desired effect on your own website.