Umkus 12 ноя 2009 в 01:38

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

1 мин

1.9K

Веб-разработка *

+69

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

tossshik 12 ноя 2009 в 03:31

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

Umkus 12 ноя 2009 в 08:19

Спасибо! )

Mordraug 12 ноя 2009 в 04:10

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

Timosha 12 ноя 2009 в 04:25

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

homm 12 ноя 2009 в 04:28

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

LoneCat 12 ноя 2009 в 04:43

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

Prosto 12 ноя 2009 в 14:07

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

abo 12 ноя 2009 в 04:42

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

homm 12 ноя 2009 в 05:52

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

abo 12 ноя 2009 в 06:24

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

homm 12 ноя 2009 в 08:02

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

abo 12 ноя 2009 в 08:16

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

n1tr0k1ll3r 12 ноя 2009 в 07:38

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

flaresun 12 ноя 2009 в 08:23

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

danilissimus 12 ноя 2009 в 04:54

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

homm 12 ноя 2009 в 06:43

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

acy 12 ноя 2009 в 08:58

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

danilissimus 12 ноя 2009 в 11:45

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

Dalairen 12 ноя 2009 в 18:50

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

amid 12 ноя 2009 в 05:01

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

leonard 12 ноя 2009 в 07:51

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

НЛО прилетело и опубликовало эту надпись здесь

Umkus 12 ноя 2009 в 08:22

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

Umkus 12 ноя 2009 в 08:53

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

НЛО прилетело и опубликовало эту надпись здесь

deniamnet 12 ноя 2009 в 15:45

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

pavel_manylov 12 ноя 2009 в 05:37

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

Umkus 12 ноя 2009 в 08:17

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

BaBL 12 ноя 2009 в 08:45

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

Umkus 12 ноя 2009 в 08:54

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

DaFive 12 ноя 2009 в 06:14

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

Storm2k 12 ноя 2009 в 06:47

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

hannimed 12 ноя 2009 в 06:59

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

Umkus 12 ноя 2009 в 08:23

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

veitmen 12 ноя 2009 в 06:28

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

Storm2k 12 ноя 2009 в 06:48

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

p1xel 12 ноя 2009 в 07:48

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

leonard 12 ноя 2009 в 07:52

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

veitmen 12 ноя 2009 в 07:54

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

note 12 ноя 2009 в 08:58

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

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

WayBe 12 ноя 2009 в 07:48

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

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

WayBe 12 ноя 2009 в 07:50

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

Umkus 12 ноя 2009 в 08:29

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

zn_md 12 ноя 2009 в 08:01

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

Umkus 12 ноя 2009 в 08:18

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

zn_md 12 ноя 2009 в 08:19

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

mace 12 ноя 2009 в 08:16

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

nobr 12 ноя 2009 в 08:49

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

Agent_Smith 12 ноя 2009 в 09:04

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

Umkus 12 ноя 2009 в 10:02

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

Umkus 12 ноя 2009 в 10:03

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

nobr 12 ноя 2009 в 12:58

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

nobr 12 ноя 2009 в 13:00

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

Mephistophele 12 ноя 2009 в 09:14

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

Umkus 12 ноя 2009 в 10:10

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

firstbyte 12 ноя 2009 в 09:34

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

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

Umkus 12 ноя 2009 в 10:01

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