CODEWITHSUNDEEP
javascriptcsshtml
learningtech
learningtech

Reputation: 33683

How to animate a ball travelling pre-defined paths in HTML5, Javascript and CSS?

my boss asked me to create an HTML5, Javascript and CSS animation program where several balls travel at a constant velocity across pre-defined curved paths. The pre-defined paths will probably spell out an english word (in cursive hand-writing). When a ball arrives at a point of intersection between 2 or more paths, the program should display a speech bubble with some text/graphics. The program must work in IE8, FF, Chrome, Safari, ipad safari, iphone safari, android browser and black berry browser.

Does anyone know how I might begin? Are any of these options available to me?

Any suggestions on how I am to implement this project would be great

nice to have feature - when a ball arrives at point of intersection, it randomly chooses one of the points

Upvotes: 1

Views: 1055

Answers (3)

Spudley
Spudley

Reputation: 168665

I would suggest using a Javascript library such as Raphael for this kind of thing.

Raphael allows you to draw items on the browser and animate them.

There are examples of complex animations available on the Raphael homepage (including animate-along-a-predefined-path examples).

It is actually a very easy-to-use graphics library, and best of all it even works in older versions of IE (as far back as IE6). It uses SVG for its graphics, except in old IEs, where it uses VML.

Hope that helps.

[EDIT]

By the way -- Raphael 2.0 has been released today. Make sure you grab the latest version when you donwnload.

Upvotes: 5

Zach Lysobey
Zach Lysobey

Reputation: 15714

SixRevisions recently had an article listing 10 javascript frameworks. There are some notable ommissions from this list, but for the most part they are addressed in the comments section. I haven't had time to check them all out, but I really like Raphael

Perhaps worth mentioning is Adobe's new beta product: Adobe Edge whic apparently provides a flash-like interface for making html5/js animations

Upvotes: 1

Robert Noack
Robert Noack

Reputation: 1306

You can check some examples at http://jsanim.com/ that might help you.

Upvotes: 2

Related Questions