I want to create an effect and i dont know how
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:
<canvas class="footer_canvas__4LiyD" width="1225" height="200"></canvas>
(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.
Someone also told me that it was using a Canvas API in JavaScript so it is not possible to control it by CSS. Is it true?
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
besides the techniques of drawing on canvas, there will be a lot maths/physics to apply.
I would suggest watching some video's of 'Frank's Laboratory' on youtube. He does a lot of canvas animations/interactions and explains the process really well
https://www.youtube.com/c/Frankslaboratory
YouTube
Franks laboratory
Creative coding experiments, generative art & game development with vanilla JavaScript & HTML canvas.
No frameworks and no libraries. Every project is explained line by line as I write the code using just plain vanilla JavaScript & HTML5 canvas element.
If you want to SUPPORT me you can use the links below and get some one my EXTENDED classe...
He dosnt do at all the effect im looking for. I understand that he do things with liquid particle but i think the effect im looking for is simpler than that and dont really use this effect. but thanks for the ressource his video seem great!