Tag Archives: html

CSS Rolling Example with CSS3 and JQuery (Originally on queness.com)

Recently I did some work with javascript in my job and as I have never worked with it before, right now I’m pretty interested in learning more about the capabilities of it. While doing some research for my work related problem, I stumbled over the awesome blog Queness. On this site you find many design related topics and tutorials for web designers. They really deserve the credit for the post here but as I found some errors in the tutorial and I added some comments to make the javascript part easier to understand, I’d like to provide my own version of their tutorial.

Click to see live demo

Preparation

  • Download JQuery Easing Plugin (A minified version can be found here)
  • Create files index.html and main.css and put the downloaded/created javascript file (‘jquery.easing.min.js’) into the same folder
  • Optional: If you want to test the example offline, download the JQuery javascript file here, put it in the same folder as the files above and change the script tag in index.html

HTML / Javascript

Most of the action happens in the html page of the example (just copy this to your index.html file, for now use ‘view plain’ and copy code, I’m working on getting ‘copy to clipboard’ to work)

Via the js document ready function the on click behaviour is added to the later defined div containers. For a more detailed description of the javascript actions see the comments.

<!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" />
<link rel="stylesheet" href="main.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.6.2/jquery.min.js"></script> /* or src="jquery.min.js" */
<script type="text/javascript" src="jquery.easing.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
	$(".rectangle").click(function()
	{
		/* in 500 ms transform rectangle to square with 100px length */
		$(this).animate({width:'100px',height:'100px'}, 500, 'linear', function()
		{
			/* add class circle-label-rotate -> start spinning animation and repeat infinitely */
			$(this).addClass('circle-label-rotate')
			/* add class circle -> transform to circle and set background to grey */
			.addClass('circle')
			/* write 'Bye' in circle */
			.html('<div class="innertext">Bye</div>')
			/* move circle 510px to the left and fade it out */
			.animate({"opacity":"0","margin-left":"510px"},1500);
			
			/* move up the rest of the layout and remove placeholder of currently clicked element */
			/* 2.param = easing -> more info: http://gsgd.co.uk/sandbox/jquery/easing/*/
			$(this).slideUp('slow','linear');
		})
	})
});
</script>

<title>CSS Sliding Example</title>
</head>
<body>
	<div class='rectangle'> 1</div>
	<div class='rectangle'> 2</div>
	<div class='rectangle'> 3</div>
</body>
</html>

CSS

Copy these css classes to your main.css class.

.rectangle
{
	height:100px;
	width:500px;
	border:dashed 1px #000;
	margin-top:10px;
}

.circle-label-rotate
{
	-webkit-animation-name: rotateThis;
	-webkit-animation-duration:2s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:linear;
}

@-webkit-keyframes rotateThis 
{
	from {-webkit-transform:scale(1) rotate(0deg);}
	to {-webkit-transform:scale(1) rotate(360deg);}
}

.circle
{
	border-radius: 50px; // Chrome & IE9
	-moz-border-radius: 50px; // Firefox
	-webkit-border-radius: 50px; // Safari 
	height:100px;
	width:100px;
	background:#dedede;
}

.innertext
{
	text-align: center;
}

Finally just run index.html in your favourite browser and click on the rectangles to see the effect. Thanks for reading and please share any thoughts 🙂