Эффект кругов на воде через плагин Droplets на jQuery
Очень интересный плагин, который создаёт на вашем сайте эффект кругов на воде (Будто бы идёт дождь). Плагин актуален в данный момент, так как за окном осень smile
Для начала посмотрите ДЕМО
Установка:
1#: После /head на нужных страницах вставляйте:
|
1 2 3 4 5 6 7 8 9 10 |
<script type="text/javascript" src="/js/jquery.droplets.js"></script> <script> $(document).ready(function() { $("#boxy").droplets({ maxRadius: 50, dropRate: 10, dropSpreadTime: 2000 }); }); </script> |
Немного разберём настройки:
maxRadius: 50 - максимальный размер окружностей
dropRate: 10 - количество одновременно появляющихся окружностей
dropSpreadTime: 2000 - время от появления до исчезания окружностей
2#: В самый низ вашего CSS вставляйте:
|
1 2 3 4 5 6 7 |
#boxy { position:absolute; height:500px; width:500px; overflow:hidden; z-index:-1; } |
3#: Следующий код в то место, где должен быть блок с эффектом:
|
1 |
<div id="boxy"></div> |
Осталось лишь залить JS файл из прикреплённого архива в папку js
