WanderWall – A jQuery, CSS3 & HTML5 Hover-Based Interface

Hey guys. Today I’m going to teach you how to create a useful hover-based user interface using jQuery, CSS3, HTML5 and @font-face. Why a hover-based interface? you might ask. Well, with the popularity of touch-based web applications simplifying the way that people can use sites on mobile devices, I think that there’s room for us to look into ways of making it even easier for people to use sites in desktop-based browsers too. Today’s project,WanderWall, achieves that and what we’ll be creating today could easily be used for a portfolio or business site but the concepts you’ll learn could certainly be used to expand the idea further.

If you’d like to check out a demo before we get started, feel free to check out one of three available below.

you can also watch a screencast about WanderWall here.

What is a Hover-Based Interface?

A hover-based interface is one where the majority (or all) of the user interaction on the page can be controlled by a user hovering over an element with their cursor. Hover-based interfaces require less work to see more content than a typical click based page, but do need some thought to be put into their design and structure so that the user knows how to navigate around. WanderWall uses a hover-based interface. Some might ask, well, mobile device’s don’t necessarily support the hover-over state, so should we really consider using them?.

I think the answer to this is definitely a firm yes. If you look at a number of the most popular site’s out there, they actually have two versions of their site available – one used for desktop browsers (full layout) and another which is optimized for mobile (touch focused). I think that hover UIs are certainly something we could consider for the former, but we of course would evaluate suitability on a site by site basis. I’m not saying that every site out there should adopt the concept, but there are cases where it would make navigation a quicker experience for users.

Why Is WanderWall useful?

That’s a very good question. I’m going to use a portfolio site as an example here as they tend to contain fewer pages. Even on a standard portfolio site, users typically have to click through a few different links to browse through the site (or ‘page’ if it’s a one-page portfolio with anchor text). This only gets compounded as the sites you’re looking at grow larger. There’s nothing wrong with clicking par-se (it’s successfully worked as an action for years), but consider that users in general are lazy (I include myself in this group) – anything you can do to decrease the amount of work they have to do to look around your site will mean that they’re able to view your content more quickly.

What does this mean for you? Well if it’s a portfolio site, it may just mean more requests for work if you’ve been able to get the visitor’s interest before they got bored of clicking. Obviously this all depends on the quality of content etc as well, but if your average visitor spends less than 2 minutes on your page, who is going to have to work ‘less’ to see your material – the person that clicks or the person that hovers?.

How Does WanderWall work?

WanderWall is composed of two key components that interact with each other. Before we get started I should mention that for my demos I have included a background-image containing multiple parts to it (a pseudo-sprite) used in the header. We shall refer to this as the header-wallpaper.  The components (without mentioning styling) are as follows:

1. Header-Slider: When a user hovers over one of the ‘frames’ (links) in the header, this animates down to a position in the header-wallpaper with a unique background specific to that particular link. Once the header-wallpaper has been rendered, text specific to that section then fades in – essentially a subtitle or tagline for that page.

2. Page-Slider: At the same time that the user has hovered over a link in the header-slider, a corresponding ‘page’ element slides into view (this is basically a div container which may contain text, images, video – any HTML content at all).

When a user hovers away from a particular link, the last page that they were looking at remains in view. The reason for this is that if there is further content on the page you may wish them to be able to hover-over on, scroll-down or click, they are able to do so.

How does WanderWall make use of CSS3, @font-face and HTML5?

CSS3 is used for the styling and design in WanderWall and assists with text-indentation, background-gradients and rotation. With the exception of my optional background-image, this allows the project to be relatively compact without sacrificing on design and asthetics. @font-face is used for the majority of typography and has been implemented in a cross-browser fashion with the assistance of Font-Squirrel’s excellent generator.

I personally found font-face to be significantly faster than Cufon or sIFR in terms of the time taken to visibly-render, which makes sense as there is no JavaScript required to power it after page-load.  HTML5 is used to power the data-tooltips that you find on the right-hand side of the screen. These leverage the "data-" attribute in HTML5.

For CSS purists, yes, you can of course achieve a similar effect without the need for the data-attribute here, but as I wished to include a sample of it’s potential usage, it’s been included in WanderWall as an optional feature. You can easily switch over to using jQuery based tooltips quite easily if you prefer.

Let’s Create a WanderWall

The first thing to do when creating a Hover-based interface is plan out how your interaction is going to work. I probably went through 12 different iterations planning this project before I was happy and it’s important to try thinking from a user’s perspective before you dive into the coding. Once that’s done, you’ll first want to write some HTML to define your page’s structure.

HTML for the header frames (links)

	 	jQuery 	
	 	CSS3 	
 HTML5 
	 	@font-face 	

HTML for the sliding pages

jQuery
Wanderwall 1




jQuery
Wanderwall 2




jQuery
Wanderwall 3




jQuery
Wanderwall 4

In real life, you’ll probably define some very simple CSS to structure your design next, but to keep things simple, I’m first going to show you the important parts of the JavaScript in this project and then the final CSS3. (I recommend waiting until you’ve finishing the JavaScript side of things before ‘touching up’ the design, but you do whatever feels most comfortable.)

jQuery For Background Animation (on frame hover)

$("div.frame a").hover(function()
	{
				var currentLink = $(this);
				hideTheRest(id); id = this.id.replace("link", "");
				position = -295*id;
				marginnew =  pagewidth * id * -1;
                                /*Display the Home link if not currently on Default Page*/
				if(id > 0)
				{
				  $('#homelink').show();
				}else{
				  $('#homelink').hide();
				}
				/*Move the page-slider in the correct direction depending on the ID*/
				$('.pageslider').stop().animate({marginLeft: marginnew}, 800);
				/*Animate the background*/
				$('#wanderwall').stop().animate({backgroundPosition:
                               '(50% ' + position +'px )'}, 500, function()
				{
				    distance = 0;
				    topdis   = -190;
				    text     = currentLink.attr('alt');
				    infoframe  = $('#infoframe');
				  /* Define offset for text*/
				  switch(id)
				  {
				    case "1":
					     distance = 500;
						 break;
				    case "2":
					     distance = 730;
						 break;
				    case "3":
					     distance = 200;
						 break;
					case "4":
					     distance = 400;
						 topdis = -198;
						 break;
				  }
				  infoframe.html(text);
				  infoframe.css('margin-left', distance + 'px');
				  infoframe.css('margin-top', topdis + 'px');
				  infoframe.fadeIn();
				});
	}, function()
	{
	   $('#infoframe').hide();
	   var id = this.id.replace("link", "");
	   $('#wanderwall').stop().animate({backgroundPosition: '(50% 0px)'}, 500 );
	    showTheRest();
	});

jQuery For Showing And Hiding Other Elements On Hover Of One

function hideTheRest(id){
		 for (var i=1; i<5; i++){
			if (i!=id)
			{
				$('#frame' + i + ' a').css('display', 'block');
                                /*Set the alpha transparency*/
				$('#frame' + i).css('filter', 'alpha(opacity=80)');
                                /*Fast-fade animation*/
				$('#frame' + i).stop().fadeTo("fast",0);
                                /*Don-t display the link*/
				$('#frame' + i + ' a').css('display', 'none');
				}
			}
			$('#infoframe').css('visibility','visible');
		}
	function showTheRest(){
		for (var i=1; i<5; i++){
				$('#frame' + i).stop().fadeTo("fast",0.8);
				$('#frame' + i).css('filter', 'alpha(opacity=80)');
			        $('#frame' + i + ' a').css('display', 'inline');
			        $('#frame' + i + ' a').css('display', 'block');
			}
			$('#infoframe').css('visibility','hidden');
		}

These are some extracts of the most important jQuery code used to power WanderWall. If you would like to take a deeper look into the code, I recommend checking out the source which can be downloaded at the beginning or end of this post. Let’s now take a look at some of the important CSS3.

CSS3 for the background gradient and 3D ‘mantle’ bar

body{
background:
-webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.09, rgb(153,153,153)),
    color-stop(0.55, rgb(242,242,242)),
    color-stop(0.78, rgb(240,237,240))
);
background:
-moz-linear-gradient(
    center bottom,
    rgb(153,153,153) 9%,
    rgb(242,242,242) 55%,
    rgb(240,237,240) 78%
);
}
#mantle { width:100%;  height:30px; background:
-webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.09, rgb(153,153,153)),
    color-stop(0.55, rgb(242,242,242)),
    color-stop(0.78, rgb(252,252,252))
);
background:
-moz-linear-gradient(
    center bottom,
    rgb(153,153,153) 9%,
    rgb(242,242,242) 55%,
    rgb(252,252,252) 78%
);
-webkit-background-origin: padding;
-webkit-background-clip: content;
border-bottom:1px solid #fff;
		   }

CSS3 for Frame Rotation

.frame:hover{
 -webkit-transform: rotate(-9deg);
 -moz-transform: rotate(-9deg);
}

Cross-Browser @font-face

@font-face {
	font-family: 'LeagueGothicRegular';
	src: url('league_gothic-webfont.eot');
	src: local(''),
        url('league_gothic-webfont.woff') format('woff'),
        url('league_gothic-webfont.ttf') format('truetype'),
        url('league_gothic-webfont.svg#webfontwJ2IAlek') format('svg');
	font-weight: normal;
	font-style: normal;
}

CSS3 @font-face consumption and text-shadow (indentation effect) Sample

color:#444444;
letter-spacing:-1px;
text-shadow:0 1px 0 #FFFFFF;
font-family: 'LeagueGothicRegular', sans-serif;
font-size-adjust: 0.55;
font-size:40px;
margin-top:30px;

and that’s it!. You can very easily customize WanderWall for your own projects and remember that you’re not just limited to using 4 links/frames on the top. You can modify the code to have as many as you’d like and to look however you’d like too (in case for example you’d rather use buttons for the links instead of frames).

Got a question? Check the FAQ real below real quick and if it’s not answered there, feel free to leave a comment below and I’ll do my best to help. Scroll down to the end of the post to get your download pack now.

Frequently Asked Questions

-Does WanderWall work in all browsers?

I’ve attempted to make this project as cross-browser compatible as possible. It’s been tested on Safari, Chrome and FireFox for the Mac and Windows as well as IE6. If however you notice a quirk, let me know and I’ll try my best to get it fixed for the next release. Please note that due to the resolution of the one image I do use in this project, it may take a few moments to appear depending on your connection speed. That said, it loads in under a second on mine so you might not notice and delay.

-How do you create the background-image used in the header-wallpaper?

With the increase in both screen sizes and screen resolution we’ve noticed over the past few years, the background to the header needs to be able to cater for screens of any size (within reason). To start, you first need to create an image that’s approximately 3000×1445 or over. I recommend taking a look at the theme examples in my images folder (test_3, test_5 etc) as this will give you an idea of where each ‘wallpaper’ needs to end. If you prefer to keep your file-sizes down, you can always either opt to disable the animated background or use a simple-palette GIF file instead.

Demos and Sources

I’ve created three demos that you can checkout below. Each has the same base content, but offers an alternative header-theme so you can see  a few different ways that you can use the background-animation. The download pack contains all of these.

Did you enjoy this article?. If so please feel free to share it with your friends or colleages by clicking the retweet button. Thanks and I hope the post came in useful!.