/ Ваше разрешение экрана: px / Ваш Ip адрес: {ip}

Shop Scripts

Скрипт фонового эффекта воды

17-07-2018, 10:38
Обалденный скрипт создает эффект расплескивающийся воды на фон сайта. Прекрасная реализация, вода выглядит как настоящая, хотя скрипт очень небольшой и весит всего ничего. Анимация происходит при движении курсора по монитору. От курсора будто идут волны, которые со временем увеличиваются и пропадают. На изображении, которое подобрано под фон, все это смотрится очень живо и красиво.

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

Чтобы подключить данный скрипт эффекта воды нужно проделать всего 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. Подключить и вставить jаvascript код

Вставить куда угодно (по феншую между <body> и </body>)
<script type="text/jаvascript" src="js/jquery.js"></script>
<script type="text/jаvascript" 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 вы можете писать что угодно. Если у Вас уже готовый сайт и нет никакого фона, то на фоне появится изображение воды, а при движении курсора на ней будут появляться волны и блеск воды.
Не на каждом сайте разместишь такое, даже не знаю где именно можно сделать такой фон, но знаю одно — скрипт сделан качественно и очень реалистично и на добротном проекте, связанным с водой, этот эффект воды и волн будет смотреться очень круто.
На этом все! Обязательно посмотрите «Демо» .

Нашли ошибку?
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Рекомендуем Вам зарегистрироваться или войти на сайт под своим логином, чтобы полноправно пользоваться сайтом и иметь доступ ко всем материалам.

Важно: если не отображается страница новости или ее часть просьба отключить блокировщик рекламы. Проблема может возникать из-за того что скрипт сайта реагирует на программы подобного типа.
Также Вы можете сообщить о проблеме или ошибке и ознакомиться с ответами пользователей.

Добавление комментария

Имя:*
E-Mail:
Комментарий:
Докажите, что Вы не Робот: *
Это интересно
Поиск и оплата штрафов ГИБДД/Налогов/Исполнительных производств
Новости Портала

Курс программирования на Python 3.6 для любого уровня с упором на практику (2019) PCRec

Вы создадите Telegram-бота на первом же уроке. Познакомитесь с основами data science и веб-разработки. Напишете собственный проект.

Основы Биоэнергетики (2019) WEBRip

Центр Эллариум является проекцией архаичных цивилизаций Магов Воды. В рамках нашей лаборатории идет воссоздание известных ранее технологий программирования энерго-информационных полей в рамках ...

Медитация. Исцеление женской судьбы (2013-2014) WEBRip

Во время этой медитации Вы попадете в женское пространство. Здесь Вы сможете осознать, что сдерживает Вас на пути к собственному счастью и освободиться от этого. Вы получите ключ Благословения от ...
Реклама Партнеров
Поддержите проект
Статистика

 
Скрипт социальных кнопок