Анимация радуги на флеше
Для сайта Rainbowproduction Co. сделал заставку на главную страницу: радуга, проявляющаяся слева направо и озаряющая всё вокруг. Фоновая картинка может быть любая, а размер радуги подстраивается под экран.
Весь процесс создания данной анимации занял у меня около часа. На флеше такие вещи делались достаточно просто и быстро: создаёшь анимацию одной звёзды, затем невидимый объект, который сеет звёзды вокруг себя (и подкрашивает их), затем двигаешь его по дуге, повторяющей форму радуги. Одновременно отдельным слоем проявляется нарисованная радуга. Если это делать на чистых html, css, javascript, svg — это займёт намного больше времени. Жаль, что технология macromedia flash уходит в прошлое...
Подкладываем произвольный фон
Цветные слои радуги накладываются с интересным эффектом — комбинация Overlay и Multiply в различных соотношениях. Таким образом создаётся впечатление, что над наложением радуги поработал дизайнер:
Анимация радуги на фоне дереваСмотрите также
Комментарии
2) Накладываем круговой градиент в виде радуги (на внешней кромке круга и на внутренней кромке радуги прозрачность уходит в ноль).
3) И самое интересное: делаем копию, получается два слоя.
4) Нижний слой накладываем с эффектом Overlay (Перекрытие) — тогда радуга "вживляется" в картинку, а не просто лежит поверх. Прозрачность ставим около 50%, потому что этот эффект слишком ненатуральный, и надо его смягчить.
5) Верхний слой — подстраховочный. При наложении в режиме Overlay радуга в некоторых местах может стать невидимой. Для этих мест и нужен верхний слой. Ставим ему прозрачность 30-50%.
