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.

One thing that I want to put out there is that animation, CSS or otherwise, should not be used just for animation's sake. A little animation when it serves a purpose, such as to call attention to the state of a button, for example, can be very helpful and add value to the web page. On the other hand, zooming and popping all over the place takes away value from any project and can be most annoying, so we want to be sure we avoid that pitfall.

When planning your animation, ask yourself why you want a particular object to move. Is the movement something that helps distinguish a clicked button from the others? Or does a sliding panel allow the user to view content in a more orderly fashion instead of scrolling or flipping through a number of pages? These are good uses of animation and CSS animation does much of this easily. Let's take a look at a few examples.

Sliding Content

Anyone here remember the web of the mid 90's when we had pages that went on and on .. and on? Then we went through the circa-2000 web where the goal was to keep the web page content in browser height? What did that give us? More, albeit shorter pages. Where once we had 15 scroll-till-your-fingers-fall-off dissertations, now we had in its place 65 short click-till-you-fell-over pages that took 10 clicks to get what you wanted.

Enter Web 2.0 and ways to compartmentalize content. The Accordion allowed you to click a bar to reveal sections hidden till you needed them. Tabs were introduced to allow you to view what was behind Door #3. And then there is the slider. Click a button and more content comes careening invariably from .. somewhere. I'm going to show you how to do the latter today as it's quite useful. I was tempted to put a vroooom sound byte on the paragraph that does the sliding, but my kids won't let me do stuff like that any more.

So here we go The page for this is going to be very basic and I have colored the various sections in different colors. I know most of us wouldn't design a web page that looks like this, but I wanted to make sure you would see them easily.

Here's the mark up for the basic page. Copy it into a new Dreamweaver page and save it as slider.html and we'll get started.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Slider</title>
<style type="text/css">
#container {
      width: 600px;
      margin: 0px auto;
      border: solid #000 2px;
      min-height: 350px;
      font-family: Arial, Helvetica, sans-serif;
}
#container #header {
      background-color: #C96;
      height: 45px;
      text-align: center;
      padding-top: 5px;
}
#container #content {
      background-color: #FC3;
      min-height: 300px;
}
#container #content #nav {
      float: left;
      width: 80px;
      margin: 0;
}
#navlist {
      margin: 0;
      display: block;
      padding: 0;
}
#container #content #nav li {
      display: block;
      padding: 5px 0px 5px 5px;
      background-color: #FCF;
      list-style-type: none;
      margin-bottom: 5px;
      border-bottom: solid #000 1px;
      border-right: solid #000 1px;
}
#nav a {
      text-decoration: none;
}
#container #content #mainContent {
      float: left;
      font-size: 12px;
      margin: 10px;
}
#container #footer {
      background-color: #C9F;
}

/* ~~ miscellaneous float/clear classes ~~ */
.clearfloat {
      clear:both;
      height:0;
      font-size: 1px;
      line-height: 0px;
}
</style>
</head>

<body>
<div id="container">
<div id="header">
My Title
</div>
<div id="content">
<div id="nav">
<ul id="navlist">
<li><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
</ul>
</div>
<div id="mainContent">
<p>This is the default paragraph</p>
</div>
<br class="clearfloat" />
</div>

<div id="footer">
footer info
<br class="clearfloat" />
</div>

</div>
</body>
</html>

The structure itself is simple. We have a page with an 800 wide container that is centered in the browser. We have a header, a left hand navigation bar and a right side content page that will have additional content fly in from the right merely for effect. You will want to note a few CSS items here and I have purposefully added them later in the process so we can point them out as we go.

The first animation is the buttons. Rather than put the animation on the link (a) tag, I have put it on the LI tag so the entire box will move out when the mouse runs over it rather than just the link, which is just text, making for a better effect. I will select the first li tag in the list of tags under the Document window and open the Behaviors Panel on the Tag Inspector panel. I click on DMXzone/Advanced CSS Animator and the dialogue opens. I want to adjust the width of the li box so I click on width and the right arrow to move width to Used Properties. I already know that the li box is 80px wide because that is what was specified in the CSS for the page. So my starting width will be 80px and my finishing width will be 90px, which will move it out to the right just a little bit. I'll accept those values and set the event trigger to be onMouseEnter which gives me a little smoother transition than onMouseOver does. I need to have a way to return the nav buttons to their original position, so I'll repeat the procedure, but this time from 90 px to 80 px and use the onMouseLeave event which does a little better job then onMouseOut does. I'll test this in Live View and it does what I want so I'll repeat the procedure for the other two buttons. Take a look at the code for the finished buttons:

Now for the text that will change. We don't have these in our page yet, so let's create them with this code. Within the mainContent div, add this code:

<div id="mainContent">
<p id="paradefault"> this is the default paragraph</p>
<p id="para1">This is the first paragraph. Benchmarking against industry leaders, an essential process, should be a top priority at all times an important ingredient of business process reengineering building flexibility through spreading knowledge and self-organization. </p>
<p id="para2">This is the second paragraph. The balanced scorecard, like the executive dashboard, is an essential tool organizations capable of double-loop learning, by moving executive focus from lag financial indicators to more actionable lead indicators. While those at the coal face don't have sufficient view of the overall goals.</p>
<p id="para3">This is the third paragraph. Ut labore et dolore magna aliqua. Excepteur sint occaecat velit esse cillum dolore duis aute irure dolor. Quis nostrud exercitation sed do eiusmod tempor incididunt ut enim ad minim veniam. Ullamco laboris nisi lorem ipsum dolor sit amet, qui officia deserunt. Sunt in culpa sed do eiusmod tempor incididunt excepteur sint occaecat. Eu fugiat nulla pariatur. </p>
</div>

In this case, it's just an announcement so you will know the paragraph actually changed, but you could have anything that you wanted to change within each paragraph. The important thing here is that each paragraph needs to have an id so we can manipulate it with the Advanced CSS Animator. There are also some CSS changes to make in order to get the paragraphs to function correctly. I don't want them to fly in lower and lower so I'm going to make the content div relatively positioned so I can make the navigation, mainContent and fly in paragraphs positioned absolutely within them. By doing this, the paragraphs will fly in at the same position (at the top) of the content div. This is the CSS for the paragraphs:

The content div CSS should now look like this:

#container #content {
      background-color: #FC3;
      min-height: 300px;
      position: relative;
}

The nav will now be absolutely positioned and so will mainContent which will ensure those divs start at the top of the content div. And the paragraphs are absolutely positioned relative to the content div at 0 for the top and 0 for the left margin. The paragraphs that will fly in have 550 for the left position or off the right side of the page.

#mainContent #paradefault {
      display: block;
      width: 480px;
      top: 0px;
      left: 0px;
      position: absolute;
}
#mainContent #para1 {
      display: none;
      width: 480px;
      position: absolute;
      top: 0px;
      left: 550px;
}
#mainContent #para2 {
      display: none;
      width: 480px;
      position: absolute;
      top: 0px;
      left: 550px;
}
#mainContent #para3 {
      display: none;
      width: 480px;
      position: absolute;
      top: 0px;
      left: 550px;
}

You will also notice that the default paragraph has its display property set to block, which the paragraphs which are not yet seen are set to display:none so that they are invisible to begin with. Now we're ready to apply the Advanced CSS Animator behaviors. Select the first link again and add on to the behaviors for the links. Open the Advanced CSS Animator and select opacity and add it to the Used Properties box. We're first going to hide whatever we have in the page at the current time. Keep in mind that you don't always know what the user currently has in front of them, but you do know which link you are working with. We're working with the first tab and it governs the first paragraph, so we want to hide all the other paragraphs.

By default, the Advanced CSS Animator only works with one div at a time, but you can set up the opacity, select the default paragraph from the dropdown list and then click in the dropdown list and add in the others yourself. This will save you from individually having to apply the same behaviour three times. Add opacity to the Used Properties with a result of hide and then set the top to be 0 and the left to be 550px to move the paragraphs not being used out to the right of the page. Set the event trigger to be the onClick event in the Tag Inspector.

Now apply the Advanced CSS Animator again but this time select #para1 from the dropdown list and set the top to be 0 and the left to be 0 and the opacity to be show as the result. This will move the paragraph in to the page and absolutely position it within the mainContent div. Apply the same behaviors to the other two tabs and #para 2 and #para3 and test the result. This is a basic example but I think you get the idea. With the Advanced CSS Animator, you can add all kinds of multiple effects and you can apply them to multiple regions all at the same time! Pretty incredible, eh?

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.

See All Postings From Nancy Gill >>

Reviews

Be the first to write a review

You must me logged in to write a review.