|Views Total:||161 views|
|Official Page:||Go to website|
|Last Update:||July 3, 2022|
Have you attempted to make your own wave shapes using SVG? It might seem easy at first glance but it’s actually harder than you would have imagined.
Dynamowaves.js seems to address this issue by providing a lightweight JS library that allows users to create highly customizable waves dynamically with low complexity and with easier use of SVG.
How to use it:
1. Download and load the Dynamowaves.js library in the document.
2. Add a basic wave to the page. It is worth noting that this SVG wave will automatically change shape as the page refreshes.
3. Customize the background color of the wave.
<dynamo-wave style="fill:steelblue"> </dynamo-wave>
4. Set the direction of the wave. Default: bottom.
<dynamo-wave data-wave-face="top"> </dynamo-wave> <dynamo-wave data-wave-face="bottom"> </dynamo-wave> <dynamo-wave data-wave-face="left"> </dynamo-wave> <dynamo-wave data-wave-face="right"> </dynamo-wave>
5. Determine whether to automatically change the wave’s shape as you scroll down/up the page.
<dynamo-wave data-wave-observe="true"> </dynamo-wave>