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

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

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

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



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

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

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

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

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

    * Пост посвящаю отцу, у которого сегодня ДР :)

    Средняя зарплата в IT

    113 000 ₽/мес.
    Средняя зарплата по всем IT-специализациям на основании 5 091 анкеты, за 2-ое пол. 2020 года Узнать свою зарплату
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

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

      +4
      It makes you wet порадовало :) Поздравляю!
        0
        Спасибо! )
        +2
        Название и слоган у вас уже замечательные :)
          –10
          мне одному непонятно что такое «мокрый пол»? :)
            +1
            Смотрите сами.
              +14
              Это когда под изображением есть его отражение, отраженное по вертикали, сжатое где-то вдвое, и полупрозрачное, с увеличивающейся прозрачностью по мере отдаления от места стыка, что как-бы и создает эффект что изображение стоит на некой поверхности, которая его отражает. Так-то!
              © Ваш К.О.
                +1
                «сжатое где-то вдвое»?! Если оно стоит перпендикулярно поверхности, а это подразумевается, то никаких сжатий! Под каким бы углом вы на него не смотрели.
              0
              Opera Version 10.00
              Build 1750
              просто зеркальное отображение
                +1
                Стоит включить картинки?
                  +2
                  да, как-то не подумал про включение картинок когда они отображаются :)
                    0
                    Не понял из вашего сообщения, это сарказм?
                    То, что какие-то отображаются, еще не значит что все загружены. Как вариант нужная картинка не догрузилась.
                      +2
                      нет, я осознал свою ошибку
                  +2
                  10.01 1844 Всё в порядке. Хотя в самом начале на доли секунды отображается просто зеркальное.
                    0
                    Скорее всего так происходит до загрузки css
                  –41
                  ыыыы
                  зашел. думаю, круто.
                  потом смарю, релама яндеха. думаю — чо за х.?
                  потом вижу, что домен .narod.ru ))))
                    +12
                    Гыыы. Лол! Бугагага.
                      –7
                      муахахаахах, жжжжош, сцуко!!!1
                      +1!
                        –3
                        блин, извините, невыспавшийся моск сделал свое дело :(
                          –1
                          Иногда лучше выспаться.
                        0
                        Есть ещё аналог — cow.neondragon.net/stuff/reflection/
                          +1
                          Там картинки не под углом стоят.
                          • НЛО прилетело и опубликовало эту надпись здесь
                              –1
                              Не приходил в голову такой вариант. По-пробую.
                                0
                                Стоп. Canvas не поддерживается в IE, так что вариант с полным canvas'ом не выйдет. В текущей реализации для IE используется css-свойство filter:flipV
                                • НЛО прилетело и опубликовало эту надпись здесь
                            +1
                            о! ава-двойник! ))
                            +2
                            Лицензия то какая у неё? — Использовать и дополнять самому можно?
                              +1
                              ГуглоКод позволил выбрать GPL. Но в коде iWet.js я специальо отметил @copyright: you haz it
                              Используйте как вам хочется.
                              • НЛО прилетело и опубликовало эту надпись здесь
                                  0
                                  Так вот где Public Domain спрятался! Спасибо за наводку :)
                              +1
                              Хорошо, только при загрузке моргают отражения в полную величину без прозрачности, а затем уже становятся залитыми в градиент, уходящим в черный. Или со скоростью у меня туго. FF 3.5.1.
                                0
                                FireFox 3.6.1 Beta 1, также сперва полностью отрисовывается, потом становится полупрозрачным.
                                  0
                                  В IE такая же картина. Особенности браузеров. В Опере всё чётко.
                                    +2
                                    Да, есть такой минус. Opera, Chrome и, возможно, Safari тут на высоте.
                                  +4
                                  На правой картинке, в отражении отчетливо виден пингвин. К чему бы это?
                                    0
                                    Пока вы не сказали, и правда думал там пингвин стоит :)
                                      0
                                      Пингвины стремятся к захвату мира
                                        0
                                        Где? В упор не вижу. (Смотрел на картинку минут пять :)
                                          0
                                          В отражении правой картинке. Присмотритесь к коряге которая отражается. Ну ведь как пить дать пингвин!
                                          0
                                          Пока не пригляделся тоже думал, что там пингвин))

                                          Скрипт понравился, папе поздравления :)
                                          0
                                          Замечательный, судя по всему, плагин.
                                          И сильно замечательные минусы ;) — Размер изображения заменяется с трудом(200 × 200 по умолчанию)
                                          Жаль не описаны параметры — например не ясно, каким образом псевдо-перспективу задавать, и т.д.

                                          В вообще — нра! Респект!
                                          Может доделаете? ;)
                                            0
                                            впрочем, вопросы с перспективой уже отпали… ;)
                                              0
                                              Ещё, само собой, буду дописывать. Версия 0.1 к тому распологает.
                                              0
                                              psd исходничек для mask.png бы не помешал…
                                                0
                                                Изначально он был) По какой-то причине я его уволил. Верну, если нужен.
                                                  0
                                                  ну желателен :)
                                                +1
                                                Отлично, большое спасибо! Как раз искал что-то подобное на днях.
                                                  0
                                                  Жаль, что бэкграунд только однотонный чёрный. Или всё же можно поменять?

                                                  Free Image Hosting at www.ImageShack.us
                                                    0
                                                    было бы хороше еще белую версию
                                                      +4
                                                      В течении суток выложу исходный psd маски и перекрашу пол :)
                                                      0
                                                      Бось это не возможно. Ещё один минус.
                                                        0
                                                        Можно попробовать после загрузки DOM яваскриптом вытащить цвет фона родительского элемента, а затем отрисовать картинку. Конечно, если на фоне рисунок, то этот вариант не поможет.
                                                          0
                                                          Только сейчас понял механизм построения картинки. Мой вариант тоже не пройдёт :)
                                                      0
                                                      Что-то у меня отображается «слабо мокрый» пол видна ооооооочень маленькая часть картинки в отображени. Посильнее «намочить» можно?
                                                        0
                                                        Ну, всё-таки, это пол, а не зеркало :) Так же, возможно, у нас по-разному откалиброваны мониторы.
                                                        0
                                                        Весело и, как оказалось, просто… Вот только нашёл в коде

                                                        newImg.src = src;
                                                        newImg.src = newImg.src;

                                                          0
                                                          Это остатки борьбы с FF, и выбрасывающим им Exception'ом при попытке отрисовать изображение в канвасе. Один из предложенных в интернете вариантов форсирования прелоуда картинки. Приберусь к следующему релизу.
                                                          0
                                                          В Chrome 3.0.195.32 не работает
                                                            0
                                                            Очень странно, потому что у меня работает
                                                              0
                                                              Я думал у меня с Firefox что-то не так, а у Вас я смотрю тоже баннер яндекса разваливается на части.
                                                                0
                                                            • НЛО прилетело и опубликовало эту надпись здесь
                                                                +2
                                                                папе здоровья!
                                                                забавный коммент «makes PIZSATO with each of them»
                                                                  +1
                                                                  А, так я, там ещё и опечатался ))
                                                                  Спасибо от папы! Всем спасибо от папы)
                                                                  0
                                                                  А чем не устраивает cow.neondragon.net/stuff/reflection/
                                                                  ?
                                                                    0
                                                                    Причем работает с любыми бекграундами (хоть наложенные друг на друга) и нормально отрисовывается и отлично ресайзится!
                                                                    • НЛО прилетело и опубликовало эту надпись здесь

                                                                    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                                                    Самое читаемое