Эффект водной ряби на фоновом изображении

Данный плагин основан на WebGL и добавляет на элементы слой воды , который колеблется при взаимодействии с курсором.

Пример:

Поводите курсором по изображению.

Установка:

Добавляем на сайт библиотеку jQuery и скрипт jQuery Ripples

И подключаем к нужному селектору, который имеет background-image (поддерживаются только URL-адреса):

Подключение из примера выше:

Настройки:

Название По умолчанию Описание
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') для обновления размеров эффекта.

jQuery Ripples на github.com

Перевод: Atuin

Фотография: CharlesRondeau

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!

Комментарии:

  • Андрей:

    Хотел бы себе на сайте сделать такую рябь на фоне, но не ясно как это реализовать в Joomla.

    Ответить
    • Alexander:

      Я Joomla плохо знаю, но думаю ничего сложного.
      Подключайте скрипт к нужному блоку с

      background-image

      и все.
      А вот если и сам блок нужно создать, то тут нужно уже разбираться, как они там делаются.

      Ответить