Build a Javascript animation - 1 website page

Durum: Closed
Ödül: $250
Alınan Girdiler: 17
Kazanan: ytppa

Winner

Yarışma Özeti

Attached is the design mockup of the home page.

It is a one page design.
It is a water ripple effect animation.
It is to be built in Javascript and the water ripple animation must be activated by mouse over.
We want two versions,
1. A water ripple animation coming from the bottom left hand corner of the screen.
2. A water ripple animation coming from directly behind the logo near the centre of the screen.
Further detail:
On mouse over center logo, light purple coloured ripples need to come from behind the logo.
If use mouses over logo, multiple ripples will come out.

We really like the smoothness of the water effect in the provided mp4 however it isnt nearly as good looking as we want and the animation must generate from behind the logo.

The start of the page is a red logo with a blue background "Honan-Concept" and when mouse over a red/pink ripple comes out.

Please feel free to darken the colours or change them to look better but the branding colours are blue and dark red/pink

Any questions please ask.

Aranan Beceriler

Winner

Benzer Yarışma İlan Et

İşveren Geribildirimi

“Understood the requirements of our animation well. Will hire again.”

claytonjohn, Australia.

Bu yarışmadan başlıca girdiler

brunocabra1 Brazil

0
valor312 China

0
ScottContina United States

0
mattsrinc Slovenia

0
aminansar Pakistan

0
rustom861 Bangladesh

0
emilianojn Argentina

0

Daha Fazla Girdi Görüntüleyin

Genel Açıklama Panosu

dulangab
- 4 yıl önce
I have updated the #24 entry
- 4 yıl önce
dulangab
- 4 yıl önce
#sealed
- 4 yıl önce
ammaralipro
- 4 yıl önce
kindly check #21
- 4 yıl önce
ksumon4711
- 4 yıl önce
working on. please wait for some time
- 4 yıl önce
aminansar
- 4 yıl önce
Hi! Hope you are doing well. Please checkout the improved version in the entry #12 . Live link is provided where you can interact with the animation. Please don't share it to anyone. Thanks
- 4 yıl önce
aminansar
- 4 yıl önce
The initial shape now changes into rectangles as the animation progresses and animation for bottom left-hand side has been added as well. Entry #12
- 4 yıl önce
Yarışma Sahibi
- 4 yıl önce
http://honan.predikktadev.com/ - here is a version the client does not like.,
- 4 yıl önce
1. ksumon4711
  - 4 yıl önce
  Hi dear sir i have a question you want only animation or full web pages design???
  - 4 yıl önce
aminansar
- 4 yıl önce
Hi! please checkout the entry #6 . If you don't see the ripples moving, please visit the link that i have sent you as a comment in the entry.
- 4 yıl önce
1 mesaj daha görüntüle
1. aminansar
  - 4 yıl önce
  Do you mean no CSS and only Javascript? Or something else? Please can you comment in the entry that i have submitted? Tell me in what areas my animation needs to improve so that i can give a solution ASAP.
  - 4 yıl önce
2. aminansar
  - 4 yıl önce
  I used pure CSS and JS. No library/plugin or framework was used
  - 4 yıl önce
yaraM2
- 4 yıl önce
how exactly u want the ripple to look like?
- 4 yıl önce
1. Yarışma Sahibi
  - 4 yıl önce
  https://youtu.be/r8t4nEOdh38 - but better and in javscript
  - 4 yıl önce
itsmerenjith
- 4 yıl önce
Can you upload logo psd or png
- 4 yıl önce
1. Yarışma Sahibi
  - 4 yıl önce
  Just use a placeholder for now untill I upload
  - 4 yıl önce
deepakrawat3993
- 4 yıl önce
Hello CH,
can i use jquery ?
- 4 yıl önce
1. Yarışma Sahibi
  - 4 yıl önce
  If you want, but I have already seen too many of this https://sirxemic.github.io/jquery.ripples/ which isnt what I want
  - 4 yıl önce
raotouseefahmad1
- 4 yıl önce
Can you please give the assests
I will do it in a better way
- 4 yıl önce
1. aminansar
  - 4 yıl önce
  If the assets are not provided, you can create them yourself
  - 4 yıl önce
2. Yarışma Sahibi
  - 4 yıl önce
  I dont have them currently but can provide later, I am more interested in the animation itself.
  - 4 yıl önce
aminansar
- 4 yıl önce
Can we include css as well or do you want this in pure Javascript only? BTW css animations are better in terms of performance and load on the user's computer resources
- 4 yıl önce
1. Yarışma Sahibi
  - 4 yıl önce
  Yes sure
  - 4 yıl önce
ytppa
- 4 yıl önce
Hi. Does the ripples needed to be as on the example - abstract rounded rectangle? Or simple circles?
- 4 yıl önce
1. Yarışma Sahibi
  - 4 yıl önce
  It might look better if they started as the "abstract rounded rectangle" and blended into something else?
  - 4 yıl önce
aminansar
- 4 yıl önce
Can you make it #sealed please? It would be very fair
- 4 yıl önce