Be the first to write a review
Making Cool Stuff with Advanced CSS Animator
Practical applications and how you can make use of this new tool in your everyday workflow
Last time, Nancy introduced you to the DMXzone Advanced CSS Animator and showed you the basics for using it, along with some very basic examples. In this installment, Nancy will show you practical applications and how you can make use of this new tool in your everyday workflow.
Applying the Animator
The first thing to do is to select the trigger to start the chain of events we are about to create. I am going to use the onClick event to act as my trigger so I need to make each number into a link and because I am using the CSS Advanced Animator to define what happens when the link is clicked, I'll just put javascript:; into the link box in Dreamweaver's Property Inspector and that will create the a tag that I need to define my link in the Behaviors Panel. Next, I select the a tag in the Document Inspector at the base of Dreamweaver's document window and select the Tag Inspector Panel and the Behaviors tab on that panel and from there, the Advanced CSS Animator. As in the previous example, when I click on the first link, I am going to set the opacity of the first picture to show and the other pictures to hide. Likewise, when I select the second link, I want to set the second picture to show and hide the others and so forth. This is similar to what we did before, but this time, we are showing one picture that is stacked and hiding the others with a fading transition.
That's it for this time. We'll be cooking up some more advanced uses of the Advanced CSS Animator in the future, so stay tuned!
Sliding Panels Extension
Just as a side note – you can also use the Sliding Panels DMXzone extension to create amazing sliding effects out of the box. See for more info http://www.dmxzone.com/go?17564
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.