Tilt эффект для фотографий

Запись от 03.04.2017

Недавно поучаствовал в разработке клевой open source библиотеки на javascript.
Она даёт изображениям эффект называемый tilt (вернее похожий на него эффект).

Выглядит это примерно так:


Сама библиотека работает следующим образом: ваша картинка с классом .tilt-effect подменяется div-элементом с некоторым набором картинок, которые накладываются друг на друга с прозрачностью, а при наведении курсора мыши с помощью css трансформаций смещаются по каждой оси в соответствии с настройками из атрибута data-tilt-options.

Для моих задач базовой функциональности не хватало и я, не побоюсь этого слова, форкнул!

В процессе доработок — появилось несколько новых опций в библиотеке:

  • extraImgsScaleGrade — можно задать некоторое число (от -1 до 1, но больше, но не зачем), которое будет масштабировать каждое следующее изображение с указанным масштабом. Например, если указать -0.05, то каждое следующее изображение будет отмасштабировано с помощью scale() на 5% меньше предыдущего. Так можно добиться эффекте туннеля.
  • resetOnLeave — позволяет сохранять трансформации после покидания активной области курсора мыши. По умолчанию true.
  • element.mouseMoveWatcher — селектор любого DOM-элемента, который будет вотчиться скриптом на предмет передвижений мыши. Например, можно настроить его на весь документ, тогда изображение будет «плавать» даже, если курсор мыши на странице далеко от изображения. Еще это может быть полезно, если поверх изображения расположен некоторый текст и другие элементы. Без этой опции наведение курсора мыши на перекрывающий элемент сбрасывает трансформации, или останавливает, если resetOnLeave=true.
  • element.viewWatcher — по умолчанию расчет трансформаций производится относительно созданного элемента. С помощью этой опции можно указать селектор DOM-элемента, и производить расчеты относительно него.
  • customImgsOpacity — позволяет задать прозрачность персонально каждому созданному слою. В качестве значения принимается массив со значениями opacity для каждого слоя. Прикольного эффекта можно добиться при таких настройках [0.1, 0.1, 0.1, 0.2, 0.3, 0.4, 0.8, 0.1, 0.07] (пример на 9 и более созданных слоев) или вроде такого. Если слоев больше, чем элементов в массиве, то все остальные слои примут значение opacity предыдущего.
  • extraImgs — опция позволяет отключить создание дополнительных слоев и играться с одной картинкой, что тоже может дать прикольный эффект.

Пример использования этих опций можно посмотреть здесь:
https://rawgit.com/Dok11/ImageTiltEffect/master/index.html

Ссылка мой пулл реквест:
https://github.com/codrops/ImageTiltEffect/pull/6

Ссылка на сам репозиторий:
https://github.com/codrops/ImageTiltEffect