Feb
Cool animation, 2 images and a little bit of jQuery
By: OSH Editorial In: Animations Tutorials jQuery

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.
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
Once you have selected the word HELLO you can press delete and you should have the same result as below.
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.
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.
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
Related Posts
Keep reading with more great articles!
More Categories
- Adobe AIR
- Advertisement
- AJAX
- Analytics
- Animations
- Announcement
- API
- Apple
- Bookmark
- Browser
- Calendar
- Charts
- CMS
- CSS
- css3
- Design
- Desktop
- E-commerce
- Editor
- Fireworks
- Flash
- Forms
- Forum
- Framework
- FreeBee
- Gallery
- Gimp
- Giveaway
- Icons
- Illustrator
- Images
- Inspiration
- Interview
- Javascript
- jQuery
- Layout
- Menu
- MooTools
- Photoshop
- PHP
- Poll
- Popup
- Prototype
- Quicktip
- Resources
- RSS
- Script.aculo.us
- Site of the month
- Stats
- Tables
- Template
- Tips and tricks
- Tools
- Tooltip
- Tutorials
- Upload
- Vector
- Video
- Web OS
- Wordpress
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
February 21, 2019
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!