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.
Offentlig Præciserings Opslagstavle
-
aminansar
- 4 år siden
Amazing! I love it the version #12 . I would like to know what you used to make the shape change during the animation. Thanks
- 4 år siden
-
ytppa
- 4 år siden
v12 - Shapes with gradient https://www.loom.com/share/cc25f8724f344be382847c8532ce8403
- 4 år siden
-
ytppa
- 4 år siden
The main changes are in the ripples shape form animation. Now it changes while it grows.
- 4 år siden
-
ytppa
- 4 år siden
v11 - on mouse over or click - https://www.loom.com/share/f22dd2fd119d47f199c43379e60fd29f
- 4 år siden
-
ytppa
- 4 år siden
V10 - the same, but some quicker https://www.loom.com/share/a80ee00ae54f4e83b6f3018489fef4c1
- 4 år siden
-
ytppa
- 4 år siden
Version 9 - Shape animation - truggers on mouse moves over the logo
https://www.loom.com/share/823043ffe0464311b605287b44b81d20- 4 år siden
-
ytppa
- 4 år siden
So, at this moment, i think Version 7 looks most relevant.
- 4 år siden
-
ytppa
- 4 år siden
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
- 4 år siden
-
ytppa
- 4 år siden
Here is a variant, when 1 ripple appeas only on mouse over. https://www.loom.com/share/2f9ed9feadd74f19b8a6e797a5b0d860
- 4 år siden
-
Konkurrenceafholder - 4 år siden
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
- 4 år siden
-
ytppa
- 4 år siden
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
- 4 år siden
-
ytppa
- 4 år siden
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
- 4 år siden
-
ytppa
- 4 år siden
Duplicating the main video link - https://drive.google.com/open?id=1gta1U54wYFv6toTAtMjIaa3TtgwK7KU0
- 4 år siden
-
ytppa
- 4 år siden
Links to videosamples are in the descriprion under ther cut.
- 4 år siden
