I want to create an effect and i dont know how
Warning:
I'm asking this question without any knowledge in code (Doing only a bit of CSS here an there). I'm a graphic designer who try to learn coding.
The effect:
So I was wondering how can create the effect in this container:
(I think that from inspecting the element in chrome...)
On the official Splatoon website:https://splatoon.nintendo.com/
I linked a small video of the effect I'm talking of at the end.
My Goal:
My goal is to recreate this effect to: first learn from it, and second, to modified it so I can twist it in my taste. I want eventually to be able to create this liquid effect so it follow my cursor instead of doing the effect when my cursor "dive" in it.
The story behind it:
Me (small Graphic designer) and my friend (small front end developer) are working a lot together on our portfolio. To do so, We create website so he can show his skill in front end and me in design. As we were looking for inspiration for animation of a design I made, We founded this effect on the Splatoon website that we both liked. We are not able to recreate this effect at all so we asking some help.
Thank you for all the help we will receive for this post!
Also I'm sorry in advance for my terrible English I'm not a native speaker at all.
Splatoon™ 3 for Nintendo Switch™ – Official Site
Enter the Splatlands! Ink your way to the top in online modes like Turf War and Salmon Run. Discover the mysteries of story mode. Only on the Nintendo Switch™ family of systems.
3 Replies
I'm afraid this isn't the channel for this, as this looks like a fully front-end question and you've asked it in #back-end. Please repost this in #front-end
as for the question, the very short answer is that canvas is an element that's generally used to create animations using the Canvas API in Javascript. Its contents isn't controlled by CSS at all
Clip-path can be animated with css, with JS to find mouse positions. It might not be hard if you can animate a sine wave with damping, idk.
@Irtal I'm going to lock this post as it's in the wrong channel, please feel free to repost it in the appropriate channel