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.

ทักษะแนะนำ

Winner
การประกวดแนะนำ
โพสต์การประกวดแบบนี้

คำติชมจากผู้ว่าจ้าง

“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 ข้อความ กำลังดำเนินการ...
    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 ปี ที่ผ่านมา

แสดงความคิดเห็นเพิ่มเติม

วิธีเริ่มต้นจัดการประกวด

  • ประกาศการประกวดของคุณ

    จัดการประกวดของคุณ รวดเร็วและง่ายดาย

  • รอรับผลงานจำนวนมหาศาล

    รอรับผลงานจำนวนมหาศาล จากทั่วโลก

  • มอบรางวัลให้แก่ผลงานที่ดีที่สุด

    มอบรางวัลให้แก่ผลงานที่ดีที่สุด ดาวน์โหลดไฟล์ - ง่ายดาย!

โพสต์การประกวดตอนนี้เลย หรือเข้าร่วมกับเราวันนี้!