Be the first to write a review
Getting started with the Advanced CSS Animator
Nancy will introduce you to the DMXzone’s latest extension, the Advanced CSS Animator
In this article, Nancy will introduce you to the DMXzone’s latest extension, the Advanced CSS Animator. She will introduce you to the extension and take you through 3 very simple examples of how you can use it to create some wonderful CSS Animation. And, unlike CSS animation that only works in a few browsers, the Advanced CSS Animator has seamlessly integrated jQuery functions so they work in all major browsers.
Example 1: Move It!
Time to take this thing for a spin and kick the tires a bit. The name of the extension is Advanced CSS Animator, so let's MOVE IT! Use either template.html from the included files or if you prefer to make your own from scratch, make a new HTML document in Dreamweaver with the following code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
#box1 {
margin: 5px;
padding: 5px;
float: left;
height: 60px;
width: 200px;
border: solid #f00 2px;
}
</style>
</head>
<body>
<div id="box1">my box</div>
</body>
</html>
NOTE: It should be noted that, while I used the HTML5 doctype in these examples, HTML 4.01 or XHTML doctypes will work also.
The document contains one div and the CSS for this div makes it into a box 200px x 60px with a red border so you can see the box clearly. In its native state, the box is floated to the left. We're going to use the Advanced CSS Animator to make it move to the right when the box encounters the mouse and move back to its original position when the mouse moves away from the box. Save template.html as boxmove.html to keep the original document free of other code.
In your new document, select the box div and open the Advanced CSS Animator by clicking on the Behaviors Panel and selecting DMXZone/Advanced CSS Animator from the dropdown menu. In the Advanced CSS Animator dialogue box, select the CSS tab and dropdown Advanced CSS Properties. Select the TranslateX option and click the right arrow button to move the TranslateX behavior to the box on the right. You will notice that the Animate From column currently says Auto Detect. We want to tell the behavior where the box is sitting right now to establish a starting point. If we put 0 in the From box and then click in the Used Properties box, we can see that Auto Detect is now 0, meaning that box1 is already to the left of the document at the 0 position on the X axis. Now we want to move it so specify a value in the To input box (I used 500 to move the box 500 pixels to the right). Click again in the Used Properties box and make sure that the To value is now what you requested.
This completes the Used Properties dialogue, but you also will notice some options under Animation Properties below the Used Properties box. The first is Duration, or how long you want the transition to take. By default, the transition is 1000 or 1 second. You can add to that to make it move slower or enter a smaller number to get a faster animation. For right now, let's leave that at 1000 or 1 second. The other option under Animation Properties is Easing. If you click on the dropdown list next to Easing, you will see a LOT of built in transitions already built for you. The default is swing, but you can make it bounce in, bounce out, act like a piece of elastic or many more options as the object moves. Hours of playing for you! For now, let's leave it at the default, swing, and click OK.
There is another button for Advanced Animations but we'll leave that for another article. As soon as you click okay, you will see the item in the Tag Inspector. Be sure to check the event that triggers the CSS Animator because you'll want to make sure it's an event you can control or the behavior won't work. I selected OnMouseOver for the event so when I put the mouse on the box, it will perform the animation.
Save your document and click Live View in Dreamweaver CS5 to see it happen. Vroom .. isn't that cool?
The
Advanced CSS Animator is activated with the onMouseOver Event
in Example 1.
We can make it better though. A one-way animation isn't probably what you are going to use in real life so let's add another animation and trigger that one OnMouseOut so the second animation will be performed when the mouse leaves the box. Click on the box or select the div tag in the Document Inspector and open the Advanced CSS Animator again. The CSS Tab is probably already selected so once again, drop down the Advanced CSS Properties and select TranslateX and click the right arrow to move the TranslateX behaviour over to the Used Properties dialogue. But this time, select 500 for the From input box and 0 for the To input box. Leave the transition time at 1000 (1 second) and the Easing on swing. Click OK and set the Event box in the Tag Inspector to onMouseOut. Save the document.
Now when you click Live View in Dreamweaver CS5, the box will move to the right when you put the mouse over the box, but it will also move back to its original position when you take the mouse away. Forward, back. Forward back. Got a headache yet?
Okay, you think. This is very cute, but what can I DO with this? Actually, you can do a lot. Slide a box containing a detailed explanation of a term used in your document and use the onClick event to activate it. Use onMouseOut or a second click to make it move back out of the way. Use this technique to slide a second menu from behind a primary menu and use either onMouseOver or onClick to reveal the menu which slides to the right of the first one. These are a couple of examples, but the possibilities are endless.
Nancy Gill
In early 1996, Nancy Gill picked up her first book on HTML and permanently said goodbye to the legal field. She has been busy ever since developing web sites for businesses, organizations and social groups in Central California and occasionally beyond. Nancy has served as a member of Team Macromedia since late 2001, first with UltraDev and then moving to Dreamweaver when the programs were consolidated in 2002. She also serves as Assistant Manager for the Central California Macromedia User's Group.
Nancy is the co-author of Dreamweaver MX: Instant Trouble-Shooter and technical editor for several Dreamweaver and Contribute related books, including the well-known Dreamweaver MX 2004: A Complete Reference. She also penned the first ever Contribute article for Macromedia's Own Devnet "Getting Up to Speed with Contribute in 10 Minutes".
Nancy has three children, two in college and one in high school. Offline, she enjoys various sporting activities, is a wild NFL football fan and sings in the church choir.