Пример:
Поводите курсором по изображению.
Установка:
Добавляем на сайт библиотеку jQuery и скрипт jQuery Ripples
- Скачать: jquery.ripples.js
- Скачать: jquery.ripples-min.js
И подключаем к нужному селектору, который имеет background-image (поддерживаются только URL-адреса):
|
1 |
$('.selector').ripples({option}); |
Подключение из примера выше:
|
1 2 3 4 5 |
$('.selector').ripples({ resolution: 256, dropRadius: 20, perturbance: 0.04 }); |
Настройки:
| Название | По умолчанию | Описание |
|---|---|---|
imageUrl |
null | URL изображения для использования в качестве фона. Если он отсутствует, плагин будет использовать вместо него значение CSS background-image. |
dropRadius |
20 | Размер капли в пикселях, возникающей при щелчке или перемещении мыши. |
perturbance |
0.03 | Количество преломления, вызванного рябью. 0 означает, что рефракция отсутствует. |
resolution |
256 | Ширина и высота текстуры WebGL для визуализации. Чем больше это значение, тем более плавным будет рендеринг и тем медленнее будет распространяться рябь. |
interactive |
true | Будет ли запускать щелчок и движение мыши эффект. |
crossOrigin |
"" | Атрибут crossOrigin для использования с поврежденным изображением. Подробнее: MDN. |
Методы:
-
drop
Вызывается
$('.selector').ripples('drop', x, y, radius, strength), чтобы вручную добавить каплю в относительные координаты элемента (x, y).radiusуправляет размером капли, аstrengthамплитудой результирующей ряби. -
destroy
Вызывается
$('.selector').ripples('destroy'), чтобы удалить эффект из элемента. -
hide / show
Вызывается
$('.selector').ripples('hide')и$('.selector').ripples('show'), чтобы переключать видимость эффекта. -
pause / play
Вызывается
$('.selector').ripples('pause')и$('.selector').ripples('play'), чтобы переключать состояние эффекта. -
set
Вызывается
$('.selector').ripples('set', name, value), чтобы обновить свойства эффекта.Свойства, которые можно обновить:
- dropRadius
- perturbance
- interactive
- imageUrl - установка нового URL-адреса обновит фоновое изображение, используемое для эффекта, но CSS-свойство
background-imageостанется без изменений. - crossOrigin - установка этой настройки не будет иметь никакого эффекта, пока imageUrl не будет изменен
-
updateSize
Эффект изменяется автоматически при изменении ширины или высоты окна браузера. Когда изменяются размеры элемента, вам нужно вызвать
$('.selector').ripples('updateSize')для обновления размеров эффекта.
P.S.: Снимаю вопрос ("Можете отдельно выложить код HTML, CSS и JS для реализации этого эффекта?") - разобрался. Админу сайта всего наилучшего!
Здравствуйте!
Можете отдельно выложить код HTML, CSS и JS для реализации этого эффекта? Не могу понять как привязать JS к HTML-у (какие прописывать классы и т.д.) Прошу прощения - не программист, но с готовыми кодами по отдельности (HTML, CSS, JS) уже смогу разобраться. Благодарю!
Есть возможность данную рябь не привязывать к движению и щелчку мыши, а сделать автоматической?
$(document).ready(function() { $('.ripples').ripples({ resolution: 512, dropRadius: 20, perturbance: 0.04, interactive: false }); setInterval(function() { var $el = $('.ripples'); var x = Math.random() * $el.outerWidth(); var y = Math.random() * $el.outerHeight(); var dropRadius = 20; var strength = 0.08 + Math.random() * 0.08; $el.ripples('drop', x, y, dropRadius, strength); }, 400); });Вот пример
Хотел бы себе на сайте сделать такую рябь на фоне, но не ясно как это реализовать в Joomla.
Я Joomla плохо знаю, но думаю ничего сложного.
Подключайте скрипт к нужному блоку с
и все.
А вот если и сам блок нужно создать, то тут нужно уже разбираться, как они там делаются.
Красивый эффект!