Pull to refresh

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

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

image



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

image

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

image

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

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

Articles