Chapter 5. Using Wallaby Animations
Placing the Animation
Before we get started, keep in mind that, although your content will likely be more complex than this, the process we’re about to cover will be more or less the same regardless of the content’s complexity.
Now, even though the “splash” page is a widely known faux pas these days, for the sake of our basic example let’s say that you want to make one anyway. With that in mind, let’s assume you’ve created the following HTML document named enter.html with a link that says “Enter site”:
enter.html <!DOCTYPE html> <!-- Created with Adobe(R) technology --> <html> <head> <meta charset="utf-8"></meta> </head> <body> <a href="main.html">Enter Site</a> </body> </html>
In order to finish the page, you want your animation to appear above the “Enter Site” link on this page. We’ll use our scrolling marquis example from Chapter 2 as the animation to be placed.
Begin by copying the files necessary for the animation into the directory containing your existing HTML content. Let’s look at the files that were exported from our scrolling marquis animation, in Figure 5-1.
Copy the marquis_assets, marquis.css, and marquis.js ...