Can I use CSS animation for this?

Help
, , ,
1

I’m trying to recreate this effect from The Legend of Zelda: The Wind Waker in CSS:

I already have the wave assets (from a texture pack) and have roughly planned out how I want to structure it, but I feel like there’s something weird about my plan.

  • Water is a curvy SVG inside a div that goes up and down.
  • Seafoam consists of two divs with SVGs of the texture.
    • They are animated along a clip-path that follows the waterline, scrolling left to right.
    • They fade in, move up (how to make them follow the waterline?), and fade out.
  • In JS, I make new seafoam elements fade in every few seconds and remove old ones.

I’m wondering if CSS animation is the right way to do this, or if I should (or can) animate this with SVGs. I’ve only worked with simple CSS animation before so maybe I’m being a bit ambitious.

2 Likes
2

This is far outside what I usually do (I’m not a graphics guy at all), but SVG does have animation functions.

1 Like
3

Thank you! I was looking at those but having some trouble figuring out how to create multiple elements and how I’d handle all those moving parts. I’m currently experimenting with SVG.js, which is very promising.