Эффект воды на сайт

Легкий скрипт фонового эффекта воды на сайт при ведении курсора

Добро! Обалденный скрипт я нашел. Эффект расплескивающийся воды на фон сайта. Прекрасная реализация, вода выглядит как настоящая, хотя скрипт очень небольшой и весит всего ничего. Анимация происходит при движении курсора по монитору. От курсора будто идут волны, которые со временем увеличиваются и пропадают. На изображении, которое подобрано под фон, все это смотрится очень живо и красиво.

Подключение скрипта

Чтобы подключить данный скрипт эффекта воды нужно проделать всего 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 вы можете писать что угодно. Если у Вас уже готовый сайт и нет никакого фона, то на фоне появится изображение воды, а при движении курсора на ней будут появляться волны и блеск воды.

Не на каждом сайте разместишь такое, даже не знаю где именно можно сделать такой фон, но знаю одно — скрипт сделан качественно и очень реалистично и на добротном проекте, связанным с водой, этот эффект воды и волн будет смотреться очень круто. На этом все! Обязательно посмотрите «Демо» .

Похожие статьи