Simple animation using jquery

July 1st, 2009

Last week our Team Head asked me to edit some pictures for his friend’s employees. These pictures are for passport use so I removed the colored background and changed it into white. So, I’ve done all of it and I send it back with plain white background. After that I started to play with it until I feel half happy with the result and add some animation in jquery.

Demo

Pictures and textures I used

Simple Animation Using jquery

texture - Simple Animation Using jquery

I started to combine the texture, play on the blending modes and put little details on it.

texture with details - Simple Animation Using jquery

font use - Simple Animation Using jquery

Add some grunge effect in the font

font and grunge - Simple Animation Using jquery

Final Result
Final Design Simple Animation Using jquery

Lets do some coding.

HTML

<div class="container">
 <div class="worker">
  <div class="title"></div>
  <div class="slogan"></div>
  <div class="leader"></div>
  <div class="supervisor"></div>
  <div class="developer"></div>
 </div>
</div>

CSS
Always add reset to your css, you can download the reset here I got it from Blueprint Framework.

body {
	background:#fcedb9;
}
.container {
	width:360px;
	margin:0 auto;
}
.clearfix:after, .container:after {
	content:"\0020";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
	overflow:hidden;
}
.worker {
	background:url(images/background.jpg) no-repeat;
	width:360px;
	;
	height:480px;
	margin:30px 0;
	display:block;
	position:relative;
	overflow:hidden;
}
.leader, .supervisor, .developer {
	position:absolute;
	left:0;
	bottom:0;
	width:360px;
	height:260px;
	display:block;
}
.leader {
	background:url(images/theleader.png) no-repeat center -2px;
	z-index:3;
	opacity: 0;
}
.supervisor {
	background:url(images/thesupervisor.png) no-repeat center -3px;
	z-index:2;
	opacity: 0;
}
.developer {
	background:url(images/the-developer.png) no-repeat center 10px;
	z-index:1;
	opacity: 0;
}
.title {
	background:url(images/workerstitle.png) no-repeat center center;
	z-index:5;
	position:absolute;
	left:0;
	top:58px;
	width:360px;
	;
	height:120px;
	opacity: 0;
}
.slogan {
	background:url(images/abudhabi.png) no-repeat center center;
	z-index:4;
	position:absolute;
	left:0;
	top:80px;
	width:360px;
	height:44px;
	opacity: 0;
}

JQUERY
Its always better to take jquery hosted by google. Why? Check this load the framework from google

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"><!--mce:0--></script>

Now here is the simple code for animation. Forgive me guys if there’s better way to do this, I’m not an expert in coding javascript.

$(document).ready(function(){
 $(".title").animate({ opacity: 1}, 2000 );
 $(".slogan").animate({ opacity: 1, marginTop:"50px"}, 1500 );
 $(".leader").animate({ opacity: 1}, 6000 );
 $(".supervisor").animate({ opacity: 1}, 10000 );
 $(".developer").animate({ opacity: 1}, 14000 );
});

← Lets Walk

Redirect Loop in Firefox →

Show comments 2 »

2 Responses to Simple animation using jquery

pj says:

July 13, 2009 at 10:46 am

erm, where is your output? ^_^
love your WP design tho <3
winrar says:

September 16, 2009 at 9:58 pm

The Interesting subject, with pleasure shall read Your blog.

arvindandrion.com