HTML, CSS and Javascript animation
- or -
Post a project like this1267
£606(approx. $756)
- Posted:
- Proposals: 16
- Remote
- #3040165
- Awarded
Software Engineer | Full Stack Developer | WordPress | Shopify | Email Marketing | Domains & Web Hosting | Linux Dev Opps
London
3713133307741350038294752945474770647447083569164325879144762827727902550709
Description
Experience Level: Expert
Estimated project duration: 1 - 2 weeks
Deadline for work: monday 26th October
Please provide in your quote the amount of time you expect this to take.
We need a developer asap to come on board and create an animated header
It consists of three circular devices:
A masked glow
A sine wave
An equaliser
These elements are required to animate passively, but also be responsive to a user’s mouse position.
Glow
The glow should become affected by the position of the mouse. The closer to the center the mouse is, the more outward movement the glow would have.
See https://animation-tests-8e7f20.webflow.io
Wave
This should have a slow, persistent ripple when in a passive state. On interaction, the waves should pick up pace and depth, again based on the distance of the mouse from the centre of the circle. The wave should begin, and chase its tail until it closes.
An early example is at https://codepen.io/matt-isherwood/pen/ZEWrZpb
Equaliser
This again should have a slow persistent ‘noise’. On interaction, the bands should pick up pace and spike further, again based on the distance of the mouse from the centre of the circle.
An example is at the following URL, but our version would not need to be as extreme or ‘explosive’.
https://www.behance.net/gallery/89511827/Centre-for-French-baroque-music-Brand-design?tracking_source=project_owner_other_projects
2.
Deliverables
We require each circle as a standalone piece, built and delivered using HTML, CSS and Javascript.
Where possible, variables should be used in the code to maintain editability of colours, timings, and animation amounts.
For reference – there’s a requirement for these devices to be used in an interface similar to this, https://www.vividcreative.com/animations/ (scroll this page to see the different examples)
A passive state and single loop of the animations to be used on tablet and mobile should also be considered.
Please provide in your quote the amount of time you expect this to take.
We need a developer asap to come on board and create an animated header
It consists of three circular devices:
A masked glow
A sine wave
An equaliser
These elements are required to animate passively, but also be responsive to a user’s mouse position.
Glow
The glow should become affected by the position of the mouse. The closer to the center the mouse is, the more outward movement the glow would have.
See https://animation-tests-8e7f20.webflow.io
Wave
This should have a slow, persistent ripple when in a passive state. On interaction, the waves should pick up pace and depth, again based on the distance of the mouse from the centre of the circle. The wave should begin, and chase its tail until it closes.
An early example is at https://codepen.io/matt-isherwood/pen/ZEWrZpb
Equaliser
This again should have a slow persistent ‘noise’. On interaction, the bands should pick up pace and spike further, again based on the distance of the mouse from the centre of the circle.
An example is at the following URL, but our version would not need to be as extreme or ‘explosive’.
https://www.behance.net/gallery/89511827/Centre-for-French-baroque-music-Brand-design?tracking_source=project_owner_other_projects
2.
Deliverables
We require each circle as a standalone piece, built and delivered using HTML, CSS and Javascript.
Where possible, variables should be used in the code to maintain editability of colours, timings, and animation amounts.
For reference – there’s a requirement for these devices to be used in an interface similar to this, https://www.vividcreative.com/animations/ (scroll this page to see the different examples)
A passive state and single loop of the animations to be used on tablet and mobile should also be considered.
Danielle H.
100% (1)Projects Completed
1
Freelancers worked with
1
Projects awarded
100%
Last project
23 Nov 2020
United Kingdom
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