Верстка промо-страницы с анимацией, canvas и flash
От вас потребуется:
- Уверенные знания canvas, js, jquery, css, html5, а может даже и flash.
- Понимание достоинств и недостатков различных методов реализации.
- Желание сделать реально качественный продукт на основе качественных исходников.
Общие тех. требования
- Кроссбраузерность ie9+, chrome, safari, firefox (свежих версий).
- Поддержка разрешений от 1024 до 1920px.
- Реализация "отдачи" изображений нужных форматов через media queries, чтобы отдавать легковесную графику под маленькие разрешения.
Макет
Макет предоставляю в psd с хорошо организованной иерархией слоев. На основе него необходимо сделать яркую промо-страницу.
Основные элементы:
- Хэдер - вбить заглушку.
- Футер - заглушка.
- Фон
- Ковбой
- Посейдон
- Пламя
- Вода
- Пламя (флеш или canvas, возможно несколько слоев)
- ВодаxN (флеш или canvas, возможно несколько слоев)
- ПарxN (canvas)
- Куски льда или земли по краям (png, левая и правая часть отдельно. Возможно даже отдельно несколько элементов левой и правой части, для создания parallax при движении мышью по окну браузера. Стандартное смещение координат элемента в зависимости от положения курсора мыши. Пример: http://codepen.io/adamrifai/pen/MYJxeM)
- Офферы (блок из 3х тизеров с остоящих из иконки и названия, имеющих состояние покоя, наведения и нажатия)
Чтобы выиграть время до полной прогрузки "тяжелого" контентаю, до момента прогрузки персов и слоев с пламенем, водой и паром, хэдер и футер уже присутствуют, а на темном фоне необходимо изобразить какой-то экшн, который должен будет акцентировать внимание пользователя на том, что сейчас будет что-то интересное и вносить понимание того что страница не зависла и "все щас будет". Не хочу делать банальный прелоад-оверлей.
"Пре-экшн" реализовываем на canvas, при этом не сильно увлекаемся с кол-вом частиц, их трансформациями, чтобы маломощные компьютеры с ума не сошли. Хочется получить что-то отдаленно похожее на: http://codepen.io/jackrugile/pen/hgdzl только менее ядовитого цвета, возможно даже полупрозрачным и с большими делеями и бурлениями, чтобы юзер прям ждал.
Так же, для вдохновения можно глянуть в сторону:
http://codepen.io/jackrugile/pen/tiemo
http://codepen.io/jackrugile/pen/fhapD
http://codepen.io/jackrugile/pen/Gving
Необходимо чтобы у пользователя было ощущение схожее с тем, фильме Терминатор 2 появлялся на парковке. Т.е. визуальные эффекты, свет. помигивания. В данном случае дым может очень даже подойти. В общем он должен ждать что вот-вот что-то случится.
Максимальный тайминг 2-5 секунд, надо смотреть на живом примере.
Столкновение стихий
Сразу после того как флеш-контент прогружен, запускается анимация столкновения стихий.
С разных сторон на встречу друг другу появляется огонь и вода и в середине сталкиваются Пример: http://www.pond5.com/ru/stock-footage/12278832/vo... При этом не разлетаясь как в примере, а как бы противоборствуюя друг другу в середине страницы. В результате столкновения появляется пар (возможно, было бы правильней реализовать на canvas, потому что разместив пар в том же слое видео что огонь и вода - мы не сможем сделать его взаимодействия с объектами страницы). Чтобы создать ощущение динамики, за языки пламени и струи(брызки воды) должны быть подвижными, метаморфировать, но представлять собой зацикленное 3-5-7 секундную сцену, которая повторяется по кругу. Можно сделать несколько вариантов метаморфоз пламени и воды, которые мы на фронте нужно поочередно переключать чтобы было ощущение "внезапности" стихий.
Для настроения:
http://www.pond5.com/ru/stock-footage/32687439/ogo...
http://www.pond5.com/ru/stock-footage/29476127/lav...
http://www.pond5.com/ru/stock-footage/11058579/bry...
http://www.pond5.com/ru/stock-footage/10864083/vsp...
http://www.pond5.com/ru/stock-footage/15631524/kap...
Нужно добиться того чтобы даже при остутствии каких-либо дальнейших экшенов на странице, смотреть на воду и огонь было интересно по крайней мере в течении 10-15 секунд (это с запасом) и их взаимодействие завораживало.
Максимальный тайминг 2-3 секунды.
Появление персонажей
Слои с персонажами должны стремительно появиться (вылет) с левой и правой стороны браузера в тотм момент, когда первый цикл "столкновения стихий" близок к завершению. Пример: http://www.klitschkovspovetkin.ru/
Но нужно чтобы персонажи при достижении центральной части сайта не отскакивали друг от друга как каучуковые, а замедляли скорость движения прапорционально приближению к центру страницы и останавливались в контрольных точках.
Останов в точках нужно обеспечить дополнительным визуальным эффектами (брызги сильней, пламя жарче, ярче, вспышка какая-то и больше пара)
Максимальный тайминг 1.5-3 секунды.
Появление офферов
Сразу по завершению предыдущего этапа, в центре страницы должны появиться 3 велкам-оффера. Их появление необходимо тоже сопроводить визуальными эффектами, сочетаемыми с общим контентом страницы.
Максимальный тайминг на каждый оффер 0,7-1 секунда.
Ожидание действий кастомера
После успешного выполнения всех этапов анимации проекта, пользователь может взаимодействовать с офферами (ховер или клик). После выбора оффера, открывается стандартный визард регистрации (его верстать не надо). Нужно подумать над интерактивом, например, лайтовая css-анимация офферов (лево\право\перспектива) в зависимости от положения курсора.
В итоге должна получиться яркая, красивая страница с сочными эффектами и продуманной не супер ресурсоемкой анимацией. Способы реализации предлагаю обсудить в скайпе.
Спасибо. Жду откликов. :)