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

индекс
236,88

Как сделать динамичный, переливающийся фон

На сайте новаторского магазина thinkgeek.com столкнулся с любопытным эффектом — переливающимся фоном (чтобы увидеть конфетку нужно поработать колёсиком прокрутки). Сделан он очень просто, и все же подобная техника попалась мне впервые.

image



1. Двухцветному изображению с прозрачным фоном присваивается определенная позиция на экране. Например черные роботы и серые зомби в нижнем конце экрана!

image

2. Фон выбирается тоже черно-серым, с плавным вертикальным переходом серого в черный. Если проскроллировать мышкой, то фон перемещается под картинкой с зомби и роботами. Когда картинка проплывает над серым цветом — серые детали сливаются с фоном. Когда она проплывает над черным цветом — черные детали сливаются с фоном. Есть еще и промежуточное состояние, когда видны оба цвета — оно то и создает самый интересный эффект.

image

Получается что-то похожее на голограмму.
Пример можно посмотреть тут и конечно на самом thinkgeek.com

UPDATE: pvasili подсказал еще один пример. Оригинал к сожалению не доступен, реконструкция находится тут (пример восстановлен не полностью, не хватает родной картинки с морем)
UPDATE2: Sir_Michael обратил внимание на сайт www.webleeddesign.com где используется тот же трюк, только не с разноцветным, а с частично прозрачным фоном.
+93
31 июля 2010, 23:24
190

комментарии (53)

НЛО прилетело и опубликовало эту надпись здесь
+21
skipidar #
Да, вы правы — техника очень проста. Мне понравилась идея, которую я и хотел предложить Вашему вниманию.
+33
jeje #
Та вы шо, вы на свет что-то родите или так и будете с угла тапками кидаться?
+4
vovich #
Не нравится не читай Капитан очевидность. Последнее время стало модно Гавром кидать в людей.
0
InfernoZ #
мир очевиден, просто есть верстальщики говнари
0
gymlyg #
У людей разный уровень. А свободу мысли никто не отменял. Если есть чем поделится из опыта — велкам!

+16
YaMars #
Все гениальное просто.
Сравнить хотя бы вас и колесо, вы это сложный биологический организм с волей и сознанием, а колесо всего лишь масса точек равноудаленных от центра. Тем не менее от колеса больше пользы.
+7
shinyweb #
Эта техника была объяснена еще в декабре прошлого года Крисом Коером, автором блога css-tricks.com в этом скринкасте
+2
skipidar #
Спасибо, подписался на RSS рассылку Криса
–4
rvsob #
–5
rvsob #
спешу поделится:

tsya.ru
0
rvsob #
Простите. Хабр подглючивал. Вот и повторил комментарий.
–8
SvnWeb #
судьба ошибок не прощает!
0
skipidar #
поправил, спасибо
–26
alfedorov #
как же вы заебали
+15
Goodkat #
и вы
–8
drfaustxx #
вы сами допустили ошибку в слове «поделиться» :-)
+6
SmartBye #
Это цитата.
–2
Yolenzo #
Идея для капчи =) Чтобы ввести код прокрутите фон до низу.
+4
DmitriyPopov #
Я вижу чем это поможет усложнить жизнь людям — но даже примерно не понимаю, чем она усложнит жизнь распознавателя…
поясните?
–2
Yolenzo #
Я алгоритма не знаю робота-распознавателя. Просто увидел эффект красивым для капчи (возможно и бесполезным), для получения кода активации, для какой-нибудь штуки-дрюки.
+1
Fesor #
Наверное потому и появляются такие вот странные и непонятные капчи…
0
recky #
ну для тех, кто предоставляет бесплатные сервисы с искусственными ограничениями (типа файл-хостеров) это неплохой способ дополнительно помучить халявщиков.
+1
Error_403_Forbidden #
Чтобы предлагать новые идеи для капчи, надо знать, как работает распознаватель. А судя по тому, как часто и много появляется новых капче-идей, становится ясно, что авторы толком нихрена не разбираются в распознавании образов.
Скорее всего, это дизайнеры :) А капчу должен писать программист
+1
spiritedflow #
Это была идея для капчи-наоборот :) Можно поставить на специальный сайт для роботов, где людям не место.
+8
stamir #
«Прочтите лицензионное соглашение до конца, и введите увиденный код»
+2
pvasili #
Где то был пример покрасивее с аквалангистом и фонариком(который в глубине загорался)
0
LuciferOverLondon #
На CSS Zen Garden вродь.
0
LuciferOverLondon #
Только там, насколько помню, ещё и png-полупрозрачность была задействована.
0
n1tra #
Очень интересно, не могли бы Вы скинуть ссылку?
+1
pvasili #
www.csszengarden.com/?cssfile=http://www.css-praxis.de/cssocean/zenocean.css — оригинал недоступен :(
Но описание техники осталось: www.askthecssguy.com/2006/11/props_to_the_css_zen_ocean_div.html
Может кто найдёт пример?
+2
skipidar #
Собрал пример с водолазом, жаль не нашел картинки с морем :(
Водолазу придется повисеть среди девственно белого пространства…

Автор дайвера кстати тоже использовал position:fixed который кое-как работает в IE только если добавить искусственный root контейнер — position:fixed относительно body очевидно не поддерживается IE до сих пор…
+1
pvasili #
Во — отлично с градиентным темным фоном(от светлого к темному) будет самое оно…
В оригинале был ещё подвал с бегающими крабиками. Не думал, что «рукопись сгорит», а то сохранил бы…
0
Source #
Крабиков отыскать не получилось, зато море, а так же оригинальный вариант css нашлись на web.archive.org

Так что любуйтесь версией приближенной к оригиналу
0
pvasili #
Во, псибо, мы прямо как археологи :)
Крабики в JS, вэбархив не засосал :( Жаль, не думал что «рукописи горят» в интернете.
Так бы обязательно сохранил в загашник.
–8
dgudkov #
А чем переливающийся фон поможет юзабилити сайта?
+8
n1tra #
а чем фон вообще помогает юзабилити сайта? :)
+1
Ampleev #
Зависит от цели сайта. Можно сделать фон, который испортит юзабилити; следовательно можно сделать фон, который его повысит. Например для сайта креативной студии целесообразно придумать необычный фон — как здесь в примере. Для сайта с большим количеством материалов для чтения целесообразно использовать фон, который не противоречит здоровью глаз при чтении с монитора… и т.д.
–3
dgudkov #
Вот и я об этом — особо ни чем. Поэтому гугл например этим не заморачивается. Так что это фича ради фичи. Нет улучшения юзабилити — нет увеличения денег.

Точно также когда-то увлекались мигающим текстом.
+1
fomichev #
>>Нет улучшения юзабилити — нет увеличения денег.

Это весьма, весьма сомнительное утверждение. Это все равно что «нет в ваших beatles скрипичной партии — нет музыки».
–1
dgudkov #
Вы как-то плавно удалились от вопроса влияния переливающегося фона на юзабилити. Ну да ладно, Бог с ним. Кому-то это нужно, а кому-то нет. Считаю вопрос закрытым без адекватного ответа.
+2
amureki #
Ох, ну зачем все мерить деньгами?
Мне понравилось это, я воспроизвел, доволен, красиво, сижу любуюсь. И плевать я хотел на то что это не влияет на юзабилити. Для этого есть другие вещи и способы.

Оставьте место для души…
–8
namata #
Я похожий эффект на простом gif использовал на kvoter.ru/
0
Gilberg #
Эффект в заголовке интересный, но заметил не сразу, и он ничуть не схож с приведенным здесь
0
stahon #
Что-то не так. В IE8 пример не работает, хотя www.thinkgeek.com/ работает нормально
0
stahon #
0
skipidar #
Да, вы правы, не сработало в IE8.
Пришлось воспользоваться background-attachment:fixed
+4
amureki #
Автору плюс, идея хоть и проста, но для меня была неочевидной. Пойду пробовать.=)
–1
4imzuk #
На Chrome 5.0.375.125 нет никаких эффектов.
+1
d1gga #
есть
0
4imzuk #
Пардон, пропустил самую главную чать про колесико.
0
kyrie #
Ух, класс. Думаю эта фишка станет популярной, как карамельные кнопочки в свое время, будет висеть на доброй половине личных блогов.
+4
Sir_Michael #
Самую крутую реализацию этого приема видел тут: www.webleeddesign.com/

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