Эффект основан на WebGL, а скрипт, реализующий его, занимает всего 18кб без сжатия.
Пример:
HTML:
|
1 2 3 |
<div class="webgl-wrap"> <canvas id="webgl"></canvas> </div> |
CSS:
|
1 2 3 4 5 |
.webgl-wrap { width: 100%; height: 500px; margin: 20px 0; } |
Обратите внимание:
Тестируя скрипт локально или с неподходящими текстурами эффект может не работать
JS:
Подключаем скрипт stage_waves.js
В скрипте используются текстуры brick.jpg и noise.png, заменив которые можно изменить форму и цвет волн.
Другие текстуры можно скачать в теме: "Бесшовные графические фоны"
Оттенок для каждой линни волн (всего их 4), можно редактировать в строках:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
vec3 randcol(float i) { i = fract(i/4.); if(i < .25) { return vec3(1,0,0); } else if(i < .5) { return vec3(0,1,0); } else if(i < .75) { return vec3(0,0,1); } else if(i < 1.) { return vec3(1,1,1); } } |
Найдено на codepen.io у пользователя Liam Egan
Смотрите также:
Анимированный эффект тумана на фоновом изображении средствами CSS
Летящие облака как средство анимации блока (страницы) без использования JavaScript
jQuery плагин Vegas, его установка, настройки, анимация, методы, события и примеры
Добавить комментарий:
Ваш комментарий отправлен!
красиво!!!! а как это применить на сайте?
Например, как фон сайта, страницы или подвала
Если тематика сайта позволяет 🙂