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

Джим Коллинз, Мортен Хансен - Великие по собственному выбору

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

Дэвид Новак - Веди людей за собой

Дэвид Новак – СЕО компании Yum!Brands, владельца трех крупнейших ресторанных брендов: KFC, Taco Bell и Pizza Hut. Под его руководством работает 1 400 000 сотрудников из 117 стран мира, поэтому он как ...

Владимир Савенок - Ваши деньги должны работать. Руководство по разумному инвестированию капитала

Эта книга для тех, у кого есть свободные денежные средства, – и для тех, у кого они должны появиться вот-вот. Как грамотно распорядиться ими, чтобы ваши деньги росли быстрее рынка, работали на вас, ...
Реклама Партнеров
Поддержите проект
Статистика

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