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



Библиотека WebGL позволяет создавать в браузере удивительные 3D игры, сцены и эффекты. Пока большинство из них только для развлечений, но некоторые могут быть уже сегодня использоваться на динамичных сайтах. Сегодня мы бы хотели привести пример реализации эффекта воды, который не оставит Вас равнодушным. Впечатляет, что так просто можно реализовать объемную графику прямо в окне браузера. Кроме этого данная технология стремительно набирает обороты и пользуется популярностью в веб-дизайнеров. Советуем Вам присмотреться к данной технологии.

 

ДЕМО
ИСХОДНИКИ

 

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

 

HTML

Стоит напомнить, что мы будем использовать небольшой плагин jQuery который называется ripples, именно данный плагин позволяет достичь такого эффекта, по этому после подключения, нам необходимо просто вызвать данную функцию, с помощью следующей команды:

<script 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>

 

В результате мы получаем достаточно простой но эффектный пример, в котором создается иллюзия колебания воды, такой эффект можно применить к различным разработкам на сайте.

Вот и все. Готово!


Top

🔖 Выбор по тегам ×

💌 Написать сообщение ×

Все поля обязательны для заполнения!