HTML5 animated background

HTML5 animated background

Let me share a cool prototype I’ve been working on. My goal is to produce a responsive web page with an animated background. To do so, I used Adobe Edge Reflow to create a responsive prototype, and Adobe Edge Animate to produce an animation using web standards. You can test the final result here with a recent browser (it also works perfectly on iOS): http://creativedroplets.com/samples/background/

Here is a video of my final web page:

A responsive web page

Producing the responsive web prototype with Adobe Edge Reflow was fast and easy.

My responsive prototype in Adobe Edge Reflow

My responsive prototype in Adobe Edge Reflow

I’ve just included one breakpoint to enhance the layout under 635 pixels. The main banner is a div with a background image. I’m using an Adobe Edge Web font called “Abel”. I’ll post tutorials about Adobe Reflow on this blog. In the meantime, you just need to understand that Reflow empowers designers who need to produce responsive prototypes.

A responsive HTML5 animation

I create my HTML5 animations with Edge Animate. One key feature of Edge Animate is the ability to design and produce responsive animations. You can use relative coordinates. Usually, when you design a transition from A to B, you start from a specific coordinate (x=15px, y=30px) and transition to another one (x=100px, y=200px). In my prototype, I want my animation to be played in the background of the page. It should cover the entire stage. To do so, you can use relative coordinates: The transition starts from 15px from the top of the stage, 30px from the left, and ends 20px from the right of the screen, 100px from the bottom. The stage dimensions are not fixed; the width is 100% and the height is 100%.

Set the stage dimensions to 100%/100% to produce a responsive animation.

Set the stage dimensions to 100%/100% to produce a responsive animation.

The elements have relative coordinates as you can see in the Position and Size panel on the left of the next screenshot. Notice the CSS properties in the timeline of my animation: The Top property of the rectangle shapes are expressed in %. The stage can be in landscape or portrait orientation; the animation can be played on a small or large screen; and my shapes will cover the entire surface of the screen.

Edge animate, the relative properties and the timeline.

Edge animate, the relative properties and the timeline.

You can test the animation here. Resize the window of your browser to notice how the shapes react: http://creativedroplets.com/samples/responsive-animation/

How to add the Edge animation in the background

First, you need a classic responsive web page. Include the content of your page in a principal DIV. In my sample, it’s the primary container.

From Edge Animate, publish your HTML animation and open the HTML file.

Copy the <script> section dedicated to the Edge.js framework, and add the Edge DIV element to your responsive web page. You should get something like this:

To place the animation in the background, you just need to set some CSS properties. Add a ‘updateBack’ class to the Edge animation DIV tag and update the <style> definition. Because the Edge Animation has to run in the background,  set the position property to fixed, and the z-index to 0. The primary container DIV that contains your page elements has to get a relative position and a higher z-index. That’s it. The Edge framework injects some CSS properties once the animation is loaded, that’s why the position fixed property is followed by !important, to force the browser to apply this property to the Edge animation DIV.

 

Fun – Communication between the page and the background animation

I also wanted to explore some funny tricks. In my prototype, the behavior of the user impacts the animation: if you scroll down to the bottom of the page, it will play a small animation in the back (three blue stars fly fading out). To enable a bridge between your classic HTML page and the background animation, use the Edge Animate JavaScript API. Here is the code I’m using to play the animation. In my Edge Animate project, I’ve created a symbol called ‘stars’. Within this symbol, I’ve added a ‘starting’ label on the timeline. By default, the animation is stopped at the first frame.

 

The "stars" symbol in my animation, with a "starting" label in the timeline.

The “stars” symbol in my animation, with a “starting” label in the timeline.

Here is the JavaScript I used to get the “Scroll to bottom” event in the page, and launch the “stars > starting” animation in my background animation.

I hope that this prototype will inspire you. You can try it live here: http://creativedroplets.com/samples/background/

To try Edge Animate and Edge Reflow, subscribe to the Creative Cloud and download these amazing tools.

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)

6 Comments

  1. great work, thanks for sharing, i guess its possible to put edge animations in all and each of the
    Regards. Alex

  2. That is sick! Thanks for sharing this,

    I will definitely put this in one of my client’s website in near future

    Regards. Prama

  3. help me to using animated backgrouds please

  4. How would you shrink and expand one of the stars at runtime?

  5. Can you show me your clearfix code? I tried making this, but I have a problem with the z-index part. Instead of the animation being at the back, it shows it and then shows my desktop at the bottom of the page. It’s really weird. http://aaronc.ddsites.net/finale/index.html

Submit a Comment

Your email address will not be published. Required fields are marked *