Как стать автором
Обновить

Создаём правильный «мокрый пол» c перспективой изображения на Javascript

Разработка веб-сайтов *
В контексте одного из моих текущих проектов была поставлена задача сделать «мокрый пол». Картинок на пол планировалось класть огромное количество (но всего по паре на страницу, с заменой). В перспективе. В перспективе, кстати, временной и пространственной.

Не найдя ничего стоящего, я взялся написать свой велосипед. И, по-сидев два с лишним вечера, сочинилась небольшая js-библиотека с generic-названием iWet.

UPD: Версия 0.2
  • Добавил белую маску. См. Демо.
  • Выложил исходик маски в .psd
  • Вылечил баг с мельканием картинки при загрузке страницы
  • Добавил readme.txt и licence.txt
  • Минимальные косметические изменения кода



Почему разработчику могут не подойти другие «мокро-польные» решения:
  • Нужно изящное, кроссбраузерное, полностью клиентское решение
  • Исходные картинки неприкасаемы
  • Нужна перспектива изображений
  • Неудовлетворённость canvas'ом, который строит пиксельные «лесенки» при попытке искривить перспективу

Минусы, в общем-то, тоже не заставят себя ждать:
  • При ресайзе окна координаты отражения картинки не обновляются(пока?)
  • Перенос изображения при большом их количестве на вторую строку выглядит уродливо
  • Размер изображения заменяется с трудом(200 × 200 по умолчанию)
  • Виден процесс отрисовки при загрузке страницы
  • Невозможность использования неоднообразного заднего фона

В общем, смотрите сами. (Жмём F5)

Код распространяется под лицензией New BSD

Конструктивная критика приветствуется.

* Пост посвящаю отцу, у которого сегодня ДР :)
Теги:
Хабы:
Всего голосов 83: ↑76 и ↓7 +69
Просмотры 1.7K
Комментарии Комментарии 67