Автор

28 12.2014
Эффект воды для сайта на 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>

 

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

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


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеjQuery

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

Красивый дизайн всегда положительно сказывается на его репутации. Ведь не секрет, если дизайн плох, то и находиться на таком ресурсе не вызывает интереса. Недавно в одном из премиум шаблонов заметил интересное меню, которое отлично вписывается в темный дизайн сайта. Эта навигация весьма привлекательная, и меня она заинтересовала. Одним из преимуществ такого меню является то, что оно написано полностью на css. Идея меню состоит в том, что ползунок, который находиться над верхней частью меню, плавно скользит к активным пунктам навигации.


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

Фон является неотъемлемой частью любого сайта, красивое оформление позволяет задать тон всему ресурсу. Здесь, перед веб-мастером, стоит не простая задача, ведь необходимо подобрать правильно цвета, чтобы пользователь не терялся на сайте и информация была хорошо видна. В данном уроке мы рассмотрим пример создания замечательного анимированного фона, который будет жить своей жизнь и менять цветовую палитру, смотрится весьма удивительно, и позволяет привлечь внимание посетителей.


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

Все чаще пользователи просят нас навести примеры реализации ховер-эффектов. Эти эффекты позволяют не только скрыть, но и оживить необходимые элементы. В сегодняшнем уроке мы предоставим вашему вниманию замечательный набор прикольных ховер-эффектов, в работе которых используются современные CSS техники и 3D эффекты. Такие эффекты станут отличным дополнением для изображений или мультимедийных контентов на ресурсе. Данные ховеры должны Вас вдохновить на собственные, креативные решения для ваших сайтов.


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

Мы столкнулись с интересной задачей, а именно реализацией эффекта "до-после" для изображений, данный эффект позволяет наглядно продемонстрировать какие изменения были произведены с изображением с помощью разделительной линии. Для этого нам понадобиться небольшой плагин TwentyTwenty.js работа которого будет обеспечиваться с помощью двух библиотек jQuery. Эффект достаточно простой, но отлично справляется с поставленной задачей. Такой эффект станет отличным дополнением до сайта фотографа.


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close