jQuery SerialScroll Tutorial

jQuery SerialScroll is an excellent tool by Ariel Flesler that allows you to “animate any series of elements, by sequentially scrolling them.”  In other words, it allows you to do stuff like create slick newsreels and slideshows on your website.  I’ve created a short, comprehensive tutorial on how to create a simple, three tab scrolling list since I couldn’t find anything similar online:

Download jQuery

Download jQuery ScrollTo

Download jQuery SerialScroll

Create a new folder called “js” and load the jQuery files into it

Create a new file in your text editor and call it init.js.  Insert the following text and save it to your js folder:

jQuery.easing.easeOutQuart = function (x, t, b, c, d) {
return -c * ((t=t/d-1)*t*t*t - 1) + b;
};

jQuery(function( $ ){

$('div#screen').serialScroll({
target:'div#sections',
items:'li',
axis:'xy',
navigation:'#navigation li a',
duration:700,
force:true,

onBefore:function( e, elem, $pane, $items, pos ){
e.preventDefault();
if( this.blur )
this.blur();
},
onAfter:function( elem ){
}
});

});

So we’ve marked four elements to look for in your website: <li>, any linked list items inside of <div id=”navigation”>, <div id=”sections”>, and <div id=”screen”>.  Screen will be the wrapper for your entire scrolling element; it will contain two things: the scrolling panes, and the navigation corresponding to them.  Navigation will contain your navigational elements in list form.  Sections will contain the scrolling panes in list form.  Each list tag will mark either: a) a navigation element, or b) a single pane corresponding to a navigation element.

In the header of your HTML, insert the following in red (note: versions of script files may have changed):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery SerialScroll Example</title>

<link href="style.css" rel="stylesheet" type="text/css"
media="screen" />

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.serialScroll-1.2.2-min.js">
</script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js">
</script>
<script type="text/javascript" src="js/init.js"></script>
</head>

<body>

Now we have to implement the jQuery on your website.  We’re going to be using elements we need to style in our CSS, so let’s go to our CSS first and insert the following:

#sections ul, #sections li, #sections h3, #sections h2, #sections h1 {
	list-style-image: none;
	list-style-position: outside;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#sections {
	background-color: red;
	clear: left;
	min-height: 300px;
	overflow: hidden;
	width: 750px;
	padding: 5px;
}

#sections ul {
	width: 3660px;
}

#sections li {
	float: left;
	width: 750px;
	padding: 5px;
}

#navigation {
	width: 760px;
	font-size: 18px;
	color: #fff;
	text-align: center;
}

#navigation ul, #navigation li, #navigation h3, #navigation h2,
#navigation h1, #navigation p {
	list-style-image: none;
	list-style-position: outside;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#navcontainer {
	float: left;
	width: 487.5px;
}

#nav1, #nav2 {
	background: gray;
	height: 43px;
}

#nav1 {
	float: left;
}

#nav2 {
	float: right;
}

#nav1 a, #nav2 a {
	display: block;
	width: 215px;
	height: 29px;
	padding: 10px 0 0;
	text-decoration: none;
	color: #000;
}

You can style each element to your liking, but the key is that we’re setting each successive <li> after the first outside our view, so that when we click on a tab to scroll they look to be appearing for the first time.

Next, go to the place in your website where you want to insert the SerialScroll element and paste this:

<div id="screen">
	<div id="navigation">
		<ul id="navcontainer">
			<li id="nav1"><a href="#">Tab 1</a></li>
			<li id="nav2"><a href="#">Tab 2</a></li>
		</ul>
		<ul>
			<li id="nav2"><a href="#">Tab 3</a></li>
		</ul>
	</div>
	<div id="sections">
		<ul>
			<li>
				<h2>Tab 1</h2>
				Content for Tab 1.
			</li>
			<li>
				<h2>Tab 2</h2>
				Content for Tab 2.
			</li>
			<li>
				<h2>Tab 3</h2>
				Content for Tab 3.
			</li>
		</ul>
	</div>
</div>

That’s it!  I’ve zipped a demo here for you to reference if you need help: serialscrolldemo

  • Share/Bookmark

This entry was posted on Saturday, January 2nd, 2010 at 3:59 pm and is filed under Random. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

  • Thanks that's really helpful! Although perhaps you could expand on how to use this for different purposed maybe with a few more examples.
blog comments powered by Disqus