Build a Javascript animation - 1 website page

  • Status: Closed
  • Prize: $250
  • Entries Received: 17
  • Winner: ytppa

Contest Brief

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.

Recommended Skills

Winner
Featured Contest
Post a Contest Like This

Employer Feedback

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

Profile image claytonjohn, Australia.

Top entries from this contest

View More Entries

Public Clarification Board

  • dulangab
    dulangab
    • 4 years ago

    I have updated the #24 entry

    • 4 years ago
  • dulangab
    dulangab
    • 4 years ago

    #sealed

    • 4 years ago
  • ammaralipro
    ammaralipro
    • 4 years ago

    kindly check #21

    • 4 years ago
  • ksumon4711
    ksumon4711
    • 4 years ago

    working on. please wait for some time

    • 4 years ago
  • aminansar
    aminansar
    • 4 years ago

    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 years ago
  • aminansar
    aminansar
    • 4 years ago

    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 years ago
  • claytonjohn
    Contest Holder
    • 4 years ago

    http://honan.predikktadev.com/ - here is a version the client does not like.,

    • 4 years ago
    1. ksumon4711
      ksumon4711
      • 4 years ago

      Hi dear sir i have a question you want only animation or full web pages design???

      • 4 years ago
  • aminansar
    aminansar
    • 4 years ago

    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 years ago
    View 1 more message Processing...
    1. aminansar
      aminansar
      • 4 years ago

      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 years ago
    2. aminansar
      aminansar
      • 4 years ago

      I used pure CSS and JS. No library/plugin or framework was used

      • 4 years ago
  • yaraM2
    yaraM2
    • 4 years ago

    how exactly u want the ripple to look like?

    • 4 years ago
    1. claytonjohn
      Contest Holder
      • 4 years ago

      https://youtu.be/r8t4nEOdh38 - but better and in javscript

      • 4 years ago
  • itsmerenjith
    itsmerenjith
    • 4 years ago

    Can you upload logo psd or png

    • 4 years ago
    1. claytonjohn
      Contest Holder
      • 4 years ago

      Just use a placeholder for now untill I upload

      • 4 years ago
  • deepakrawat3993
    deepakrawat3993
    • 4 years ago

    Hello CH,
    can i use jquery ?

    • 4 years ago
    1. claytonjohn
      Contest Holder
      • 4 years ago

      If you want, but I have already seen too many of this https://sirxemic.github.io/jquery.ripples/ which isnt what I want

      • 4 years ago
  • raotouseefahmad1
    raotouseefahmad1
    • 4 years ago

    Can you please give the assests
    I will do it in a better way

    • 4 years ago
    1. aminansar
      aminansar
      • 4 years ago

      If the assets are not provided, you can create them yourself

      • 4 years ago
    2. claytonjohn
      Contest Holder
      • 4 years ago

      I dont have them currently but can provide later, I am more interested in the animation itself.

      • 4 years ago
  • aminansar
    aminansar
    • 4 years ago

    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 years ago
    1. claytonjohn
      Contest Holder
      • 4 years ago

      Yes sure

      • 4 years ago
  • ytppa
    ytppa
    • 4 years ago

    Hi. Does the ripples needed to be as on the example - abstract rounded rectangle? Or simple circles?

    • 4 years ago
    1. claytonjohn
      Contest Holder
      • 4 years ago

      It might look better if they started as the "abstract rounded rectangle" and blended into something else?

      • 4 years ago
  • aminansar
    aminansar
    • 4 years ago

    Can you make it #sealed please? It would be very fair

    • 4 years ago

Show more comments

How to get started with contests

  • Post your contest

    Post Your Contest Quick and easy

  • Get tons of entries

    Get Tons of Entries From around the world

  • Award the best entry

    Award the best entry Download the files - Easy!

Post a Contest Now or Join us Today!