Пример:
Поводите курсором по изображению.
Установка:
Добавляем на сайт библиотеку 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) уже смогу разобраться. Благодарю!
Есть возможность данную рябь не привязывать к движению и щелчку мыши, а сделать автоматической?
Вот пример
Хотел бы себе на сайте сделать такую рябь на фоне, но не ясно как это реализовать в Joomla.
Я Joomla плохо знаю, но думаю ничего сложного.
Подключайте скрипт к нужному блоку с
и все.
А вот если и сам блок нужно создать, то тут нужно уже разбираться, как они там делаются.
Красивый эффект!