Skip to content
July 15, 2012 / geeksretreat

Swinging with HTML5 and CSS3 transitions

Several of my previous posts focused on the canvas feature of HTML5. In this post I’ve moved focus onto the features of CSS3 and how these can be used interactively within HTML5. There are many CSS3 properties. This post covers the joys of using CSS3’s transitions. As of writing this post the transitions are only fully implemented within FF, Chrome and Safari. The transitions do work to a degree within IE9; however, the end product is rather shabby. One suggests viewing the final example in one of the three aforementioned browsers.
The aim of this post is to produce a swinging sign. The momentum of the swing should be controlled by the user. Let’s start by looking at a screen shot of the final product.

CSS3 transitions

The page above is rendered using the following HTML:
<!--<span class="hiddenSpellError" pre=""-->DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>Swing</title>
			<link rel="stylesheet" type="text/<span class=" />css" href="swing.css" media="all" />
		<link href='http://fonts.googleapis.com/css?family=Cabin+Sketch:400,700' rel='stylesheet' type='text/css'>
<script class="hiddenSpellError" type="text/javascript">// <![CDATA[
src</span>="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
// ]]></script>
 <script src="swing.js" ></script>
 </head>
 <body>
 <header>
 <img id='swing' src="red-sign.jpg" alt="">
 </header></pre>
<div id="<span class=">defaultSlider"></div>
<pre>
 <label id='swingTitle'>Swing speed:</label>
 <input type="radio" value="0" id='level0' name='level' />
 <label for='level0'>0</label>
 <input type="radio" value="1" id='level1' name='level' checked="checked" />
 <label for='level1'>1</label>
 <input type="radio" value="2" id='level2' name='level' />
 <label for='level2'>2</label>
 <input type="radio" value="3" id='level3' name='level' />
 <label for='level3'>3</label>
 <input type="radio" value="4" id='level4' name='level' />
 <label for='level4'>4</label>
 <input type="radio" value="5" id='level5' name='level' />
 <label for='level5'>5</label>
 <input type="radio" value="6" id='level6' name='level' />
 <label for='level6'>6</label>
 <input type="radio" value="7" id='level7' name='level' />
 <label for='level7'>7</label>
 <input type="radio" value="8" id='level8' name='level' />
 <label for='level8'>8</label>
 <input type="radio" value="9" id='level9' name='level' />
 <label for='level9'>9</label>
 </div>
 </body>
</html>
The above uses the input and label tag to draw the swing strength gauge as follows

CSS3 transitions

The other visual element is the stop sign:

On loading the page the sign starts to gently swing from side to side. This swinging motion is achieved by CSS3 transitions. The style applied to the stop image is defined in the style sheet included in the header section e.g.
<link rel="stylesheet" type="text/css" href="swing.css" media="all" />
The section of the style sheet that is applicable at the point of page loading is:
.imgRight5 {
	-webkit-transform: rotate(5deg);
	-moz-transform: rotate(5deg);
	-o-transform: rotate(5deg);
	-ms-transform: rotate(5deg);
	transform: rotate(5deg);
}

.imgLeft5 {
	-webkit-transform: rotate(-5deg);
	-moz-transform: rotate(-5deg);
	-o-transform: rotate(-5deg);
	-ms-transform: rotate(-5deg);
	transform: rotate(-5deg);
}
From the above we can see the various transform rules. Unfortunately, the transform feature has been implemented by the individual browser vendors at different times; thus, we need to include a line for each of the major implementations e.g. Mozilla. The two rules are almost identical, apart from the name and rotation parameter. The two rotation values of -5deg and 5deg are what instructs the browser to rotate the applicable element. This is a one-off rotation; thus, if the rule was applied to the image you would only see the image displayed with the rotation applied. To ensure the rotation is smooth we use the following CSS rules:
img {
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	-ms-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}
The concept of easing is quite simple and commonly used within libraries such as JQuery. The instruction to ease means the browser will smoothly rotate the image from its default location to the target rotation value. By default the image has no CSS rules applied. The CSS class which includes the rotation transforms are not applied to the image on load. These are applied dynamically within the JavaScript. It’s this dynamism that creates the swinging effect. As you can imagine if one was to apply the ‘imgLeft5′ class and then one second later apply the ‘imgRight5′ the browser would apply the rotation value -5deg followed by a value of 5deg, ensuring the movement of the image is applied smoothly using the easing method.
The JavaScript responsible for switching the class applied to the image can be found within the included file:
<script src="swing.js"></script>
The content of which can be split into two parts: the initiator and the ‘swing’ function. The initiator section takes advantage of Jquery as shown below:
$(document).ready(function() {

	swing();

	$('#defaultSlider input').click(function() {

		clearTimeout(job);

		bSwingRight = !bSwingRight;

		var currentValue = this.value * 5;

		$('#swing').removeClass(sCurrentRight);
		$('#swing').removeClass(sCurrentLeft);

		sCurrentRight = "imgRight" + currentValue;
		sCurrentLeft = "imgLeft" + currentValue;

		swing();
	});
The code above defines the ‘ready’ function of the document. This function is executed after the browser has loaded. The internals of the function forms two tasks. It first calls the function ‘swing’ (see below) and then creates a click hander for each of the inputs (radio buttons). The click handler is responsible for detecting which radio button was clicked and determines the corresponding rotation value. The value is then stored within two global string literals which hold the name of the styles that should be applied to the image.
The ‘swing’ function contains the following:
function swing() {

	if (bSwingRight == 0) {
		$('#swing').removeClass(sCurrentLeft);
		$('#swing').addClass(sCurrentRight);
	} else {
		$('#swing').removeClass(sCurrentRight);
		$('#swing').addClass(sCurrentLeft);
	}

	bSwingRight = !bSwingRight;

	job = setTimeout(swing, 1000);
}
This function simply switches the CSS class of the image; thus, invoking the transition. The function then sets up a timer. The timer will also call the ‘swing’ function after one second. Every time the function is called the class is switched: causing the constant swing effect! That concludes this post. A working version can be viewed here. The source code is available in Github.
About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 162 other followers

%d bloggers like this: