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

Shop Scripts

s1962.ru - Максимальная раскрутка Вашего проекта! TriStroy - Магазин цифровых товаров! bonuswm.org - сервис раздачи бонусов WM Дешевый хостинг vipip Реклама в системе обмена посетителями и обмена письмами 1traf BonusBox Автоматический серфинг Ремонт офисных кресел, доставка питьевой воды FreeViral.ru - система бесплатной раскрутки и продвижения сайтов autodengi SEOBudget GO-links Система обмена посещениями, бесплатная раскрутка сайтов free-kassa redsurf Доставка питьевой воды Королевская Коллекция скриптов Программа для раскрутки сайта HazardCD Std ANONIM - Сервис Анонимных и Коротких ссылок

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

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:
Комментарий:
Введите два слова, показанных на изображении: *
Это интересно
Поиск и оплата штрафов ГИБДД/Налогов/Исполнительных производств
Новости Портала

Станьте мастером массажа камнями не выходя из дома! (2020) HD

Съёмка проводится от первого лица, повторять движения за преподавателем удобно. Этот курс подойдёт как для вашего старта в массаже, так и для дополнения уже имеющегося опыта. Зачем изучать массаж ...

Кроп как основной инструмент фотографа (2020) HD

Этот класс посвящен кропу – одному из главных инструментов фотографа. Посмотрев занятие, вы лишитесь некоторых предубеждений против кропа. Например, сравнив фотографии, сделанные full frame и ...

С. Иванова - Заготовки. Огурцы, помидоры, капуста, грибы

Хрустящие огурчики — соленые, маринованные, малосольные — всегда желанные гости на столе. Зимой они помогают нам восполнить запас витаминов. Без них трудно представить настоящий праздник с ...
Реклама Партнеров
Поддержите проект
Статистика

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