[Vuejs]-How to create animated "wave" effect in vuejs?

by

3👍

✅

You do not necessarily need Vue.js or even js to achieve that. You can do it with just CSS.

In the first example, it seems to be simply an image (white wave) positioned :after the div with the background picture. It is on the top of the actual div, you can use z-index for that.

The second example is a bit funkier. It is SVG (white wave) that is animated to move to the left. So it could really be the same picture as from the first example but you would just add animation to move the element to the left infinitely.

Have a look here. I created pretty much the same effect with SVG.

Also, have a look here – you can customise your own wave easily.

Hope it helps.

👤Jakub A Suplicki

Leave a comment