Canvas/JavaScript animation and interactive interface
- or -
Post a project like this3753
$1.0k
- Posted:
- Proposals: 6
- Remote
- #383610
- Awarded
Description
Experience Level: Expert
Estimated project duration: 3 - 4 weeks
General information for the website: Just looking for the canvas/javascript interactive piece
Num. of web pages/modules: 1
Description of every page/module: This is an interactive piece for a homepage, only the canvas animation is of concern to this project.
Description of requirements/features: - When you first come to homepage, circles emerge from the core. They randomly move outward in slight spiral movement. As the cirlces appear, they show the services listed in them. As they settle (but still keeping some subtle movement), the headlines fades in. On mouseover, the circle enlarges (is clickable) and the corresponding circles randomly move aside to accommodate the bigger circle.
- On mouseover - circles become bigger.
- Each circle is clickable to that service page.
- Letters also change colour – all except the black circle has a dark grey text rollover state. The black circle has a bright blue text rollover state.
- They should animate within 5 seconds
- Random subtle movement before the circles settle together quickly.
- The one's surrounding the mouse-over shrink a bit to make space for the one that enlarges due to mouse over.
Similar urls: http://www.consumerbarometer.com/#?app=home&viewMode=0
Extra notes: If you're interested in doing this project please let me know if you've done anything like this before, and what libraries you would use to achieve the desired effect.
I've attached a pdf showing the progression of the animation and how the user's cursor interacts with it.
Num. of web pages/modules: 1
Description of every page/module: This is an interactive piece for a homepage, only the canvas animation is of concern to this project.
Description of requirements/features: - When you first come to homepage, circles emerge from the core. They randomly move outward in slight spiral movement. As the cirlces appear, they show the services listed in them. As they settle (but still keeping some subtle movement), the headlines fades in. On mouseover, the circle enlarges (is clickable) and the corresponding circles randomly move aside to accommodate the bigger circle.
- On mouseover - circles become bigger.
- Each circle is clickable to that service page.
- Letters also change colour – all except the black circle has a dark grey text rollover state. The black circle has a bright blue text rollover state.
- They should animate within 5 seconds
- Random subtle movement before the circles settle together quickly.
- The one's surrounding the mouse-over shrink a bit to make space for the one that enlarges due to mouse over.
Similar urls: http://www.consumerbarometer.com/#?app=home&viewMode=0
Extra notes: If you're interested in doing this project please let me know if you've done anything like this before, and what libraries you would use to achieve the desired effect.
I've attached a pdf showing the progression of the animation and how the user's cursor interacts with it.
Jonathan D.
100% (1)Projects Completed
1
Freelancers worked with
1
Projects awarded
100%
Last project
19 Jan 2014
Canada
New Proposal
Login to your account and send a proposal now to get this project.
Log inClarification Board Ask a Question
-
There are no clarification messages.
We collect cookies to enable the proper functioning and security of our website, and to enhance your experience. By clicking on 'Accept All Cookies', you consent to the use of these cookies. You can change your 'Cookies Settings' at any time. For more information, please read ourCookie Policy
Cookie Settings
Accept All Cookies