Irtal
Irtal
KPCKevin Powell - Community
Created by Irtal on 6/26/2024 in #front-end
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.
4 replies
KPCKevin Powell - Community
Created by Irtal on 6/22/2024 in #back-end
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:
<canvas class="footer_canvas__4LiyD" width="1225" height="200"></canvas>
<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. 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.
5 replies