Легкий скрипт фонового эффекта воды на сайт при ведении курсора
Добро! Обалденный скрипт я нашел. Эффект расплескивающийся воды на фон сайта. Прекрасная реализация, вода выглядит как настоящая, хотя скрипт очень небольшой и весит всего ничего. Анимация происходит при движении курсора по монитору. От курсора будто идут волны, которые со временем увеличиваются и пропадают. На изображении, которое подобрано под фон, все это смотрится очень живо и красиво.
Подключение скрипта
Чтобы подключить данный скрипт эффекта воды нужно проделать всего 3 шага:
1. Скачать файлы
И залить их в корень вашего сайта (index.html можно не заливать, если у Вас уже имеется файл html)
2. Подключить css
Можно посредством подключения css файла. Это нужно вставить в <head> следующий код:
<link media="screen" href="css/water.css" type="text/css" rel="stylesheet" />
А можно просто туда же вставить не такой длинный css:
<style>
* { margin: 0; padding: 0; }
html {
height: 100%;
}
body {
color: #fff;
background-image: url(../img/bg2.jpg);
height: 100%;
text-align: center;
}
</style>
или же css код:
* { margin: 0; padding: 0; }
html {
height: 100%;
}
body {
color: #fff;
background-image: url(../img/bg2.jpg);
height: 100%;
text-align: center;
}
вставить в уже имеющийся css файл (обычно это style.css)
3. Подключить и вставить javascript код
Вставить куда угодно (по феншую между <body> и </body>)
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.ripples.js"></script>
<script>
$(document).ready(function() {
try {
$('body').ripples({
resolution: 512,
dropRadius: 20, //px
perturbance: 0.04,
});
$('main').ripples({
resolution: 128,
dropRadius: 10, //px
perturbance: 0.04,
});
}
catch (e) {
$('.error').show().text(e);
}
$('.disable').show().on('click', function() {
$('body, main').ripples('destroy');
$(this).hide();
});
// Automatic drops
setInterval(function() {
var $el = $('main');
var x = Math.random() * $el.outerWidth();
var y = Math.random() * $el.outerHeight();
var dropRadius = 20;
var strength = 0.04 + Math.random() * 0.04;
$el.ripples('drop', x, y, dropRadius, strength);
}, 400);
});
</script>
Эффект подключен. Если вы только начинаете делать сайт, то в body вы можете писать что угодно. Если у Вас уже готовый сайт и нет никакого фона, то на фоне появится изображение воды, а при движении курсора на ней будут появляться волны и блеск воды.
Не на каждом сайте разместишь такое, даже не знаю где именно можно сделать такой фон, но знаю одно — скрипт сделан качественно и очень реалистично и на добротном проекте, связанным с водой, этот эффект воды и волн будет смотреться очень круто. На этом все! Обязательно посмотрите «Демо» .
Вот сайт, куда я разместил ваш код 143200.ru/water/