fading panel demo

introduction

The fading panel script is something I built as a potential portfolio site. If you didn't see the link in the demo to download the files then here it is again...

There are no plugins needed except for the standard jquery version 1.9 and jquery ui version 1.10. What we are trying to acheive are panels of content that fade and come at the screen whilst bringing in the next panel. So... lets begin!

the html...

To set up the page we will add in all the standard html declarations and also add in the calls to the jquery files, javascript files and the stylesheet.

<!doctype html>
<html>
	<head>
		<title>JON SCHREYERS - Fading Panel Demo</title>
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
		<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
		<script src="javascript.js" type="text/javascript"></script>
		<link rel="stylesheet" href="style.css" type="text/css"/>
		<link href='http://fonts.googleapis.com/css?family=Oleo+Script:400,700' rel='stylesheet' type='text/css'>
	</head>
		... body and other tags to go here ...
</html>
				

Now to add in the body tags. For this tutorial we'll only put in 2 panels that can hold content. In the download there will be 4 panels in place.

We've put a hidden input just below the body tag. This holds the value of home to begin with and gets updated depending on the panel selected.

The first div has an id if 'home'. This is the same as the value in the hidden input. Inside this div we put anohter div which will hold the content. As this is the first panel to show we give it a class of 'content'. It aslo has a class of 'white_panel' and 'centered', these are just styling and not used for the animation. This is all we do for the home panel.

The next and following panel will be identical except for:
The ID will be different - in this case it is set to 'about'
The class of 'content' is replaced with 'precontent' - This sets the style of the div to be hidden, ready to be faded in when selected.

<body class="blue_gradient">
	<input type="hidden" id="current" name="current" value="home"/>
	
	<!-- Home
	############################################################################################### -->
	<div id="home">
		<div class="content white_panel centered">
			<p class="scriptFont huge">hello!</p>
			<p class="scriptFont big">this is the fading panel demo!</p>
		</div>
	</div>
	
	<!-- About
	############################################################################################### -->
	<div id="about">
		<div class="precontent white_panel centered">
			<p class="scriptFont huge">about</p>
		</div>
	</div>
	
	... menu goes here ...

</body>

				

Now for the menu...

Wrapped around a nav tag, we hav div tags. The 'link' tag is just used for styling here with the key ttribute being the 'rel'. The rel will tell the javascript which panel to open so be sure to make it exactly the same as the id of the panel you want to open.

	<!-- Menu
	############################################################################################## -->
	<nav class="menu_holder">
		<div rel="home" class="link">
			home
		</div>
		<div rel="about" class="link">
			about
		</div>
		<div rel="portfolio" class="link">
			portfolio
		</div>
		<div rel="contact" class="link">
			contact
		</div>
	</nav>
				

the javascript...

First things first! lets set up the file so that we can trigger jquery!

$(document).ready(function() {

// lovely jquery in here

});
				

Not much to this at all! What we will be essentially doing is blending from class to class. So from the 'content' class to 'dissappear' and 'precontent' to 'content'. We will also be resetting a disappeared panel to precontent so that it is reay to fade in again.

You can also see an if statement which stops the animation if the current panel is selected again.

// Link on Click
$('.link').stop().click(function() {
		
	// Set the variables
	var current = $('#current').val();
	var toShow = $(this).attr('rel');
		
	if (current != toShow) {
		// Hide the current content panel
		$('#'+current+' .content').switchClass('content','dissappear',400);
			
		// Then show the selected one.
		$('#'+toShow+' .precontent').switchClass('precontent','content',400, function() {
			// Reset the last slide
			$('#'+current+' .dissappear').switchClass('dissappear','precontent');
		});
	}
		
	// Update the current
	$('#current').val(toShow);
});
				

Basically, thats it to get the panels fading in. There is a small hover over effect or the menu...

// Link hover effect
$('.link').hover(
  function () {
	$(this).stop().animate({
		marginLeft: "0px"
	},100);
  },
  function () {
	$(this).stop().animate({
		marginLeft: "8px"
	},100);
  }
);
				

...and then some additional calls to get google fonts to load. This sits outside of the jquery document ready brackets.

// FONT
// ############################################################################################
WebFontConfig = {
google: { families: [ 'Oleo+Script:400,700:latin','Archivo+Narrow::latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
  '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
				

the conclusion...

The CSS is all included in the download and please play around with it as you will be able to create different effects without having to change the javascript.

I hope this tutorial has been helpful and if you do have any feedback on it or have spotted some errors in the code please feel free to email me @ hi@jonschreyers.com.

Thanks!