Требуется выполнить качественную, кроссбраузерную верстку промо-страницы с анимированными элементами, спец. эффектами на канвас и даже возможно совмещение всего этого с зацикленными флешовыми видео, подготовленными в AfterEffets.
От вас потребуется:
Уверенные знания canvas, js, jquery, css, html5, а может даже и flash.
Понимание достоинств и недостатков различных методов реализации.
Желание сделать реально качественный продукт на основе качественных исходников.
Указана нижняя граница бюджета. Верхняя планка ограничивается здравым смыслом, но может быть изменена в случае обоснования. Предлагаю утвердить финальную сумму после утрверждения финального фронта работ и критериев готовности. За реально классную работу мы готовы заплатить хороший бонус.
Привлечение внимания к контейнеру событий
Чтобы выиграть время до полной прогрузки "тяжелого" контентаю, до момента прогрузки персов и слоев с пламенем, водой и паром, хэдер и футер уже присутствуют, а на темном фоне необходимо изобразить какой-то экшн, который должен будет акцентировать внимание пользователя на том, что сейчас будет что-то интересное и вносить понимание того что страница не зависла и "все щас будет". Не хочу делать банальный прелоад-оверлей.
"Пре-экшн" реализовываем на canvas, при этом не сильно увлекаемся с кол-вом частиц, их трансформациями, чтобы маломощные компьютеры с ума не сошли. Хочется получить что-то отдаленно похожее на:
только менее ядовитого цвета, возможно даже полупрозрачным и с большими делеями и бурлениями, чтобы юзер прям ждал.
Так же, для вдохновения можно глянуть в сторону:
Необходимо чтобы у пользователя было ощущение схожее с тем, фильме Терминатор 2 появлялся на парковке. Т.е. визуальные эффекты, свет. помигивания. В данном случае дым может очень даже подойти. В общем он должен ждать что вот-вот что-то случится.
Максимальный тайминг 2-5 секунд, надо смотреть на живом примере.
Столкновение стихий
Сразу после того как флеш-контент прогружен, запускается анимация столкновения стихий.
С разных сторон на встречу друг другу появляется огонь и вода и в середине сталкиваются Пример:
При этом не разлетаясь как в примере, а как бы противоборствуюя друг другу в середине страницы. В результате столкновения появляется пар (возможно, было бы правильней реализовать на canvas, потому что разместив пар в том же слое видео что огонь и вода – мы не сможем сделать его взаимодействия с объектами страницы). Чтобы создать ощущение динамики, за языки пламени и струи(брызки воды) должны быть подвижными, метаморфировать, но представлять собой зацикленное 3-5-7 секундную сцену, которая повторяется по кругу. Можно сделать несколько вариантов метаморфоз пламени и воды, которые мы на фронте нужно поочередно переключать чтобы было ощущение "внезапности" стихий.
Для настроения:
-
-
-
-
-
Нужно добиться того чтобы даже при остутствии каких-либо дальнейших экшенов на странице, смотреть на воду и огонь было интересно по крайней мере в течении 10-15 секунд (это с запасом) и их взаимодействие завораживало.
Максимальный тайминг 2-3 секунды.
Появление персонажей
Слои с персонажами должны стремительно появиться (вылет) с левой и правой стороны браузера в тотм момент, когда первый цикл "столкновения стихий" близок к завершению. Пример:
Но нужно чтобы персонажи при достижении центральной части сайта не отскакивали друг от друга как каучуковые, а замедляли скорость движения прапорционально приближению к центру страницы и останавливались в контрольных точках.
Останов в точках нужно обеспечить дополнительным визуальным эффектами (брызги сильней, пламя жарче, ярче, вспышка какая-то и больше пара)
Максимальный тайминг 1.5-3 секунды.
Появление офферов
Сразу по завершению предыдущего этапа, в центре страницы должны появиться 3 велкам-оффера. Их появление необходимо тоже сопроводить визуальными эффектами, сочетаемыми с общим контентом страницы.
Максимальный тайминг на каждый оффер 0,7-1 секунда.
Ожидание действий кастомера
После успешного выполнения всех этапов анимации проекта, пользователь может взаимодействовать с офферами (ховер или клик). После выбора оффера, открывается стандартный визард регистрации (его верстать не надо). Нужно подумать над интерактивом, например, лайтовая css-анимация офферов (лево\право\перспектива) в зависимости от положения курсора.
Спасибо. Жду откликов. :)