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

[tossshik]

It makes you wet порадовало :) Поздравляю!

[Umkus]

Спасибо! )

[Mordraug]

Название и слоган у вас уже замечательные :)

[Timosha]

мне одному непонятно что такое «мокрый пол»? :)

[homm]

Смотрите сами.

[LoneCat]

Это когда под изображением есть его отражение, отраженное по вертикали, сжатое где-то вдвое, и полупрозрачное, с увеличивающейся прозрачностью по мере отдаления от места стыка, что как-бы и создает эффект что изображение стоит на некой поверхности, которая его отражает. Так-то!
© Ваш К.О.

[Prosto]

«сжатое где-то вдвое»?! Если оно стоит перпендикулярно поверхности, а это подразумевается, то никаких сжатий! Под каким бы углом вы на него не смотрели.

[abo]

Opera Version 10.00
Build 1750
просто зеркальное отображение

[homm]

Стоит включить картинки?

[abo]

да, как-то не подумал про включение картинок когда они отображаются :)

[homm]

Не понял из вашего сообщения, это сарказм?
То, что какие-то отображаются, еще не значит что все загружены. Как вариант нужная картинка не догрузилась.

[abo]

нет, я осознал свою ошибку

[n1tr0k1ll3r]

10.01 1844 Всё в порядке. Хотя в самом начале на доли секунды отображается просто зеркальное.

[flaresun]

Скорее всего так происходит до загрузки css

[danilissimus]

ыыыы
зашел. думаю, круто.
потом смарю, релама яндеха. думаю — чо за х.?
потом вижу, что домен .narod.ru ))))

[homm]

Гыыы. Лол! Бугагага.

[acy]

муахахаахах, жжжжош, сцуко!!!1
+1!

[danilissimus]

блин, извините, невыспавшийся моск сделал свое дело :(

[Dalairen]

Иногда лучше выспаться.

[amid]

Есть ещё аналог — cow.neondragon.net/stuff/reflection/

[leonard]

Там картинки не под углом стоят.

[Umkus]

Не приходил в голову такой вариант. По-пробую.

[Umkus]

Стоп. Canvas не поддерживается в IE, так что вариант с полным canvas'ом не выйдет. В текущей реализации для IE используется css-свойство filter:flipV

[deniamnet]

о! ава-двойник! ))

[pavel_manylov]

Лицензия то какая у неё? — Использовать и дополнять самому можно?

[Umkus]

ГуглоКод позволил выбрать GPL. Но в коде iWet.js я специальо отметил @copyright: you haz it
Используйте как вам хочется.

[BaBL]

а почему не BSD Licence тогда? она есть в списке доступных.

[Umkus]

Так вот где Public Domain спрятался! Спасибо за наводку :)

[DaFive]

Хорошо, только при загрузке моргают отражения в полную величину без прозрачности, а затем уже становятся залитыми в градиент, уходящим в черный. Или со скоростью у меня туго. FF 3.5.1.

[Storm2k]

FireFox 3.6.1 Beta 1, также сперва полностью отрисовывается, потом становится полупрозрачным.

[hannimed]

В IE такая же картина. Особенности браузеров. В Опере всё чётко.

[Umkus]

Да, есть такой минус. Opera, Chrome и, возможно, Safari тут на высоте.

[veitmen]

На правой картинке, в отражении отчетливо виден пингвин. К чему бы это?

[Storm2k]

Пока вы не сказали, и правда думал там пингвин стоит :)

[p1xel]

Пингвины стремятся к захвату мира

[leonard]

Где? В упор не вижу. (Смотрел на картинку минут пять :)

[veitmen]

В отражении правой картинке. Присмотритесь к коряге которая отражается. Ну ведь как пить дать пингвин!

[note]

Пока не пригляделся тоже думал, что там пингвин))

Скрипт понравился, папе поздравления :)

[WayBe]

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

В вообще — нра! Респект!
Может доделаете? ;)

[WayBe]

впрочем, вопросы с перспективой уже отпали… ;)

[Umkus]

Ещё, само собой, буду дописывать. Версия 0.1 к тому распологает.

[zn_md]

psd исходничек для mask.png бы не помешал…

[Umkus]

Изначально он был) По какой-то причине я его уволил. Верну, если нужен.

[zn_md]

ну желателен :)

[mace]

Отлично, большое спасибо! Как раз искал что-то подобное на днях.

[nobr]

Жаль, что бэкграунд только однотонный чёрный. Или всё же можно поменять?

[Agent_Smith]

было бы хороше еще белую версию

[Umkus]

В течении суток выложу исходный psd маски и перекрашу пол :)

[Umkus]

Бось это не возможно. Ещё один минус.

[nobr]

Можно попробовать после загрузки DOM яваскриптом вытащить цвет фона родительского элемента, а затем отрисовать картинку. Конечно, если на фоне рисунок, то этот вариант не поможет.

[nobr]

Только сейчас понял механизм построения картинки. Мой вариант тоже не пройдёт :)

[Mephistophele]

Что-то у меня отображается «слабо мокрый» пол видна ооооооочень маленькая часть картинки в отображени. Посильнее «намочить» можно?

[Umkus]

Ну, всё-таки, это пол, а не зеркало :) Так же, возможно, у нас по-разному откалиброваны мониторы.

[firstbyte]

Весело и, как оказалось, просто… Вот только нашёл в коде

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

[Umkus]

Это остатки борьбы с FF, и выбрасывающим им Exception'ом при попытке отрисовать изображение в канвасе. Один из предложенных в интернете вариантов форсирования прелоуда картинки. Приберусь к следующему релизу.

[1zzy]

В Chrome 3.0.195.32 не работает

[Umkus]

Очень странно, потому что у меня работает

[Zyava]

Я думал у меня с Firefox что-то не так, а у Вас я смотрю тоже баннер яндекса разваливается на части.

[1zzy]

Смотри сам

[oknechirik]

папе здоровья!
забавный коммент «makes PIZSATO with each of them»

[Umkus]

А, так я, там ещё и опечатался ))
Спасибо от папы! Всем спасибо от папы)

[maxic]

А чем не устраивает cow.neondragon.net/stuff/reflection/
?

[maxic]

Причем работает с любыми бекграундами (хоть наложенные друг на друга) и нормально отрисовывается и отлично ресайзится!