Эффект реалистичных дождевых капель на стекле через HTML5 canvas и плагин RainDay
Вообще шикарный эффект, в котором капельки скатываются или скапливаются (В прямой зависимости от демо) по запотевшему стеклу. Выглядит просто великолепно!
Для начала посмотрите ДЕМО
Установка:
1#: В самый низ вашего CSS вставляйте:
|
1 2 3 4 |
#background { width: 100%; height: 100%; } |
2#: После /head вставляйте:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<img id="background" alt="background" src="" /> <script src="/js/rainday.js"></script> <script> window.onload = function () { run(); } function run() { var image = document.getElementById('background'); image.onload = function () { var engine = new RainyDay({ image: this }); engine.rain([ [2, 2, 5], // Поиграйтесь с этими значениями [1, 2, 2] // И с этими тоже ], 500); }; image.crossOrigin = 'anonymous'; image.src = 'http://i.imgur.com/OVQkDRE.jpg'; }</script> |
Осталось лишь залить JS файл из прикреплённого архива в папку js
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
пробую вставить этот еффект в шаблон, ни чего не выходит, следовал инструкции, максимум что получается - выводится над хидером картинка заднего фона, капли так и не заработали
Можно ссылку на страницу, где ты поставил данный скрипт?
Действительно что то тут не так...
_https://mubaidr.js.org/rainyday.js