Волны океана на HTML5 Canvas
Крутая реализация вздымающихся волн, которая выполнена средствами HTML5 Canvas
Для начала посмотрите ДЕМО
Моё тестирование в редакторе: КЛИК
Установка:
1#: В самый низ вашего CSS вставьте:
|
1 2 3 4 |
body { background: -webkit-radial-gradient(circle cover, #cfe6fc, #6eb3f7); background: radial-gradient(circle cover, #cfe6fc, #6eb3f7); } |
2#: На нужных страницах между body и /body поместите:
|
1 2 3 |
<canvas id="mycanvas"></canvas> <script src="/js/simplex-noise.min.js"></script> <script src="/js/ocean.js"></script> |
Осталось лишь залить два JS файла из прикреплённого архива в папку js
И зачем тут канвас? просто двигаются элементы
Если присмотреться и глянуть код, станет понятно, что элементы именно на канвас и не просто движутся, а постоянно меняют форму