Build a Javascript animation - 1 website page

  • Tình trạng: Closed
  • Giải thưởng: $250
  • Các bài thi đã nhận: 17
  • Người chiến thắng: ytppa

Tóm tắt cuộc thi

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.

Các kĩ năng yêu cầu

Phản hồi của người thuê

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

Hình ảnh hồ sơ claytonjohn, Australia.

Những bài dự thi tốt nhất dự cuộc thi này

Xem thêm bài dự thi

Bảng thông báo công khai

  • dulangab
    dulangab
    • cách đây 4 năm

    I have updated the #24 entry

    • cách đây 4 năm
  • dulangab
    dulangab
    • cách đây 4 năm

    #sealed

    • cách đây 4 năm
  • ammaralipro
    ammaralipro
    • cách đây 4 năm

    kindly check #21

    • cách đây 4 năm
  • ksumon4711
    ksumon4711
    • cách đây 4 năm

    working on. please wait for some time

    • cách đây 4 năm
  • aminansar
    aminansar
    • cách đây 4 năm

    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

    • cách đây 4 năm
  • aminansar
    aminansar
    • cách đây 4 năm

    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

    • cách đây 4 năm
  • claytonjohn
    Chủ cuộc thi
    • cách đây 4 năm

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

    • cách đây 4 năm
    1. ksumon4711
      ksumon4711
      • cách đây 4 năm

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

      • cách đây 4 năm
  • aminansar
    aminansar
    • cách đây 4 năm

    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.

    • cách đây 4 năm
    1. aminansar
      aminansar
      • cách đây 4 năm

      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.

      • cách đây 4 năm
    2. aminansar
      aminansar
      • cách đây 4 năm

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

      • cách đây 4 năm
  • yaraM2
    yaraM2
    • cách đây 4 năm

    how exactly u want the ripple to look like?

    • cách đây 4 năm
    1. claytonjohn
      Chủ cuộc thi
      • cách đây 4 năm

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

      • cách đây 4 năm
  • itsmerenjith
    itsmerenjith
    • cách đây 4 năm

    Can you upload logo psd or png

    • cách đây 4 năm
    1. claytonjohn
      Chủ cuộc thi
      • cách đây 4 năm

      Just use a placeholder for now untill I upload

      • cách đây 4 năm
  • deepakrawat3993
    deepakrawat3993
    • cách đây 4 năm

    Hello CH,
    can i use jquery ?

    • cách đây 4 năm
    1. claytonjohn
      Chủ cuộc thi
      • cách đây 4 năm

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

      • cách đây 4 năm
  • raotouseefahmad1
    raotouseefahmad1
    • cách đây 4 năm

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

    • cách đây 4 năm
    1. aminansar
      aminansar
      • cách đây 4 năm

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

      • cách đây 4 năm
    2. claytonjohn
      Chủ cuộc thi
      • cách đây 4 năm

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

      • cách đây 4 năm
  • aminansar
    aminansar
    • cách đây 4 năm

    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

    • cách đây 4 năm
    1. claytonjohn
      Chủ cuộc thi
      • cách đây 4 năm

      Yes sure

      • cách đây 4 năm
  • ytppa
    ytppa
    • cách đây 4 năm

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

    • cách đây 4 năm
    1. claytonjohn
      Chủ cuộc thi
      • cách đây 4 năm

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

      • cách đây 4 năm
  • aminansar
    aminansar
    • cách đây 4 năm

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

    • cách đây 4 năm

Xem thêm bình luận

Làm thế nào để bắt đầu với cuộc thi

  • Đăng cuộc thi của bạn

    Đăng cuộc thi của bạn Nhanh chóng và dễ dàng

  • Nhận được vô số bài dự thi

    Nhận được vô số Bài dự thi Từ khắp nơi trên thế giới

  • Trao giải cho bài thi xuất sắc nhất

    Trao giải cho bài thi xuất sắc nhất Download File - Đơn giản!

Đăng cuộc thi ngay hoặc tham gia với chúng tôi ngay hôm nay!