drag and share
  • Twitter
  • Delicious
  • Facebook
  • Digg
  • Reddit
  • Stumbleupon
18

Feb

6

Cool animation, 2 images and a little bit of jQuery

By: OSH Editorial    In: Animations Tutorials jQuery

Karma - Responsive bootstrapped webapp

I created a v-card template a couple of weeks back, which had a simple but cool logo animation by using just 2 images and a small piece of jQuery code. Afther a lot of emails asking me how to create this simple but cool animation i decided to share this in a simple and basic tutorial.

A couple of years back you would use an animated gif or Flash for an animation like this one, but with some little help of jQuery this can be done very easy and quick.

Hello you, if you are new here, you might want to subscribe to our RSS feed for updates on this article and our site.

x


Tutorial Details

  • Program(s): Adobe Photoshop, Adobe Dreamweaver
  • Difficulty: Easy
  • Estimated Completion Time: Less then 45 minutes


The first image

Open your Photoshop and create a new document. I have taken the dimensions 500px by 120px for this tutorial. You can fill Use the type tool to create the word HELLO or some other word. I have used the font Arial Black. This font is bold and present on every computer so perfect to use for this example. You can see the font setting on the screenshot below.


screen1


Now add a new layer and call this one result and fill this layer with the color #29b0b1 by using the bucket tool, this layer must be on top. Now select the result layer and select the outline of the typo layer by holding CTRL and click on the thumbnail in the layers panel. We have no selected the word HELLO


screen2


Once you have selected the word HELLO you can press delete and you should have the same result as below.


screen3


Now delete the background layer and the typo layer, and you should have a see true the image. Save the image and call it frame.png, be sure that you save this as a png extention, because the backgrond has to be transparent.


screen4



The second image

Create an new photoshop with the dimensions 500px by 500px. Use the the rectangle tool(u) to create a shape and call this layer ani bg. Choose the color #ffffff. Select the pen tool and select the Add Anchor Point Tool. Once selected hold CTRL and click with the pen on the border of this shape to select the anchor points. Now you can add a anchor point some where you like, and shape it to the shape you like. The example that is have use for this tutorial looks like this.


screen5



The code

Open your Dreamweaver or other editor and create a html file.

Html

As you can see there are 2 images in this div, but one is positioned outside the box.


CSS

body{
	background:#29b0b1;
}
.logo{
	width:500px;
	height:120px;
	float:left;
	overflow:hidden;
	position:relative;
}
.ani-bg{
	position:absolute;
	top:-500px;
	left:0;
}
.frame{
	position:absolute;
	top:0;
	left:0;
	z-index:1!important;
}

As you can see has the .frame an z-index attribute, this means, it’s on top of the other image. The logo div has a overflow hidden, this means that the ani-bg.png image will not be displayed outside the logo div. Basic and simple.


Javascript/jQuery

$(document).ready(function(){
	$(".ani-bg").animate({
		marginTop: "420px"
	}, 2500 );
});

Before using this piece of code you have to download and add the jQuery libiray in to your html file. Download it here. I have used 1.3.2 for this tutorial, but you can use all version of jQuery for this effect.

I have used the animation effect for this tutorial, this is a very simple but still very useful effect. This piece of code will animate the hidden ani-bg.png from the top to the bottom(from -500px till 420px), which it will be visible. You can change the speed of the animation, i have set this example on 2500 milliseconds.

I have used the margintop for this tutorial but you can use an other direction/position, for example you can use a marginleft as you can see in this demo.

You can create a lot of cool effect this way, so go a head and give it a try!



Passing 646-363 exam is not difficult if you have right resources. pass4sure offers you incredible online training for 642-982 and 642-373 exam with 100% pass guarantee on first time.

See a demo here

Written by: OSH Editorial

No Bio yet...

Share this Story

If you enjoyed reading, consider sharing the love with the rest of the world.

6 Comments

babalos

February 18, 2010

Cool, simple but this very cool. Thanks for sharing!

Mr perfect

February 19, 2010

Wow this is very simple, i like these basic idea’s.

Amadeus

February 20, 2010

Wouldn’t it be easier and cleaner to just use CSS to apply the ani bg as a background image to the image itself, and then just animate the background position property?

Mark Dijkstra

February 20, 2010

Yes you could do it this way. Thanks for the share :)

KSLovers

February 24, 2010

l like this. thanks

Sammy

January 9, 2011

Great! thnks for sharing !

Add Your Comment

Your name

June 23, 2017

We use Gravatars on OpensourceHunter, they are little icons that appear next to your name on this site and on many others. You can get a Gravatar account for free and any other site that supports it will show your avatar too. Get your Gravators account here!