Freelancer: ytppa
Share:
Report Entry

Ripples with a mount of customizable parametres

Hi. I've created a short implementation, made on a pure JS, with no need to load external scripts. I've made a simple example to show how script works. The animation is quite lite so the slow PC's would not lag. This script could be configured. For example you can variate a maximum frequency of appearing this ripples, Speed of it's growing, maximum size of that bubbles. starting color and opacity, and so on. In this example i've made the option - ripples appears only when user moves cursor over some element (blue first screen, for example). But of cource it could react on each cursor moves anywere on the page. Here are some animations https://drive.google.com/open?id=1gta1U54wYFv6toTAtMjIaa3TtgwK7KU0 Also i think it could looks some better in the cases user don't move the mouse, if it would have it's own stable minimum frequency. https://drive.google.com/open?id=1h2j3PqQettcqqH2GYLZJ2E3NmuXkC-WT Tell me if i missed something and we'll discuss the modifications.

Contest Entry #4 for Build a Javascript animation - 1 website page

Public Clarification Board

  • aminansar
    aminansar
    • 1 month ago

    Amazing! I love it the version #12 . I would like to know what you used to make the shape change during the animation. Thanks

    • 1 month ago
  • ytppa
    ytppa
    • 1 month ago

    v12 - Shapes with gradient https://www.loom.com/share/cc25f8724f344be382847c8532ce8403

    • 1 month ago
  • ytppa
    ytppa
    • 1 month ago

    The main changes are in the ripples shape form animation. Now it changes while it grows.

    • 1 month ago
  • ytppa
    ytppa
    • 1 month ago

    v11 - on mouse over or click - https://www.loom.com/share/f22dd2fd119d47f199c43379e60fd29f

    • 1 month ago
  • ytppa
    ytppa
    • 1 month ago

    V10 - the same, but some quicker https://www.loom.com/share/a80ee00ae54f4e83b6f3018489fef4c1

    • 1 month ago
  • ytppa
    ytppa
    • 1 month ago

    Version 9 - Shape animation - truggers on mouse moves over the logo

    https://www.loom.com/share/823043ffe0464311b605287b44b81d20

    • 1 month ago
  • ytppa
    ytppa
    • 2 months ago

    So, at this moment, i think Version 7 looks most relevant.

    • 2 months ago
  • ytppa
    ytppa
    • 2 months ago

    Hi, Martin. I've tried several methods, at this moment a think it's the most soft a similar to water ripples. V7 - https://www.loom.com/share/d40c9e59d9ad4d87a0d23dc258085474

    • 2 months ago
    1. ytppa
      ytppa
      • 2 months ago

      Here are some other tries, wich i don't actually like :(

      v6 - https://www.loom.com/share/28d9c6b688e24d229c051ed699196df1

      • 2 months ago
    2. ytppa
      ytppa
      • 2 months ago

      V5 -
      https://www.loom.com/share/074bdceee9054fb7bd1adbff55e16753

      • 2 months ago
  • ytppa
    ytppa
    • 2 months ago

    Here is a variant, when 1 ripple appeas only on mouse over. https://www.loom.com/share/2f9ed9feadd74f19b8a6e797a5b0d860

    • 2 months ago
  • claytonjohn
    Contest Holder
    • 2 months ago

    Hi Artur I think you have the right idea of what we want, make the ripples more water like and natural? Also they need to travel the full length of the screen

    • 2 months ago
    1. ytppa
      ytppa
      • 2 months ago

      First of all, i've moved a mouse move listener to the centered logo area. And reconfigured ripples a little bit. Here is video - https://drive.google.com/open?id=1HNDaIFLLZso4E69-I-Iksz9nWYvXnHad

      • 2 months ago
    2. ytppa
      ytppa
      • 2 months ago

      I'll try to change the view of bubbles somehow, to make it look more natural. But at the same time i'm worried of total site performance and trying to do it as lite as it possible

      • 2 months ago
  • ytppa
    ytppa
    • 2 months ago

    Duplicating the main video link - https://drive.google.com/open?id=1gta1U54wYFv6toTAtMjIaa3TtgwK7KU0

    • 2 months ago
  • ytppa
    ytppa
    • 2 months ago

    Links to videosamples are in the descriprion under ther cut.

    • 2 months ago

Show more comments Processing...