Build a Javascript animation - 1 website page

  • 状态: Closed
  • 奖金: $250
  • 参赛作品已收到: 17
  • 获胜者: ytppa

竞赛简介

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.

您还可能感兴趣的技能

雇主反馈

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

个人主页照片 claytonjohn, Australia.

此竞赛的顶尖作品

查看更多参赛作品

公共说明面板

  • dulangab
    dulangab
    • 4 年 之前

    I have updated the #24 entry

    • 4 年 之前
  • dulangab
    dulangab
    • 4 年 之前

    #sealed

    • 4 年 之前
  • ammaralipro
    ammaralipro
    • 4 年 之前

    kindly check #21

    • 4 年 之前
  • ksumon4711
    ksumon4711
    • 4 年 之前

    working on. please wait for some time

    • 4 年 之前
  • aminansar
    aminansar
    • 4 年 之前

    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 年 之前
  • aminansar
    aminansar
    • 4 年 之前

    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 年 之前
  • claytonjohn
    竞赛主办者
    • 4 年 之前

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

    • 4 年 之前
    1. ksumon4711
      ksumon4711
      • 4 年 之前

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

      • 4 年 之前
  • aminansar
    aminansar
    • 4 年 之前

    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 年 之前
    1. aminansar
      aminansar
      • 4 年 之前

      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 年 之前
    2. aminansar
      aminansar
      • 4 年 之前

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

      • 4 年 之前
  • yaraM2
    yaraM2
    • 4 年 之前

    how exactly u want the ripple to look like?

    • 4 年 之前
    1. claytonjohn
      竞赛主办者
      • 4 年 之前

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

      • 4 年 之前
  • itsmerenjith
    itsmerenjith
    • 4 年 之前

    Can you upload logo psd or png

    • 4 年 之前
    1. claytonjohn
      竞赛主办者
      • 4 年 之前

      Just use a placeholder for now untill I upload

      • 4 年 之前
  • deepakrawat3993
    deepakrawat3993
    • 4 年 之前

    Hello CH,
    can i use jquery ?

    • 4 年 之前
    1. claytonjohn
      竞赛主办者
      • 4 年 之前

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

      • 4 年 之前
  • raotouseefahmad1
    raotouseefahmad1
    • 4 年 之前

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

    • 4 年 之前
    1. aminansar
      aminansar
      • 4 年 之前

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

      • 4 年 之前
    2. claytonjohn
      竞赛主办者
      • 4 年 之前

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

      • 4 年 之前
  • aminansar
    aminansar
    • 4 年 之前

    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 年 之前
    1. claytonjohn
      竞赛主办者
      • 4 年 之前

      Yes sure

      • 4 年 之前
  • ytppa
    ytppa
    • 4 年 之前

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

    • 4 年 之前
    1. claytonjohn
      竞赛主办者
      • 4 年 之前

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

      • 4 年 之前
  • aminansar
    aminansar
    • 4 年 之前

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

    • 4 年 之前

显示更多评论

如何以竞赛开始

  • 发布您的竞赛

    发起您的竞赛 快速简单

  • 获取众多参赛作品

    获取大量参赛作品 来自世界各地

  • 悬赏最佳参赛作品

    悬赏最佳参赛作品 下载文件-简单!

立即发布竞赛 或者立即加入我们!