MSN.ru 300х250 –> fullscreen. Пользователь загружает страницу и видит баннер, с названием модели. - презентация

1 MSN.ru 300 х 250 –> fullscreen

2 Пользователь загружает страницу и видит баннер, с названием модели.

3 Далее автоматом в баннере стартует анимация.

4 После анимации в баннер появляется образ автомобиля key visual и call to action.

5 Происходит плавный фейд-ин фуллскрин баннера и стартует анимация.

6 Анимация заканчивается переходом последнего кадра в образ автомобиля key visual и появлением надписи сверху. Вся область рамки становиться кликабельна.

7 Альтернативное представление расхлопа без заливки всего контента сайта

8 Анимация заканчивается переходом последнего кадра в образ автомобиля key visual и появлением надписи сверху. Вся область рамки становиться кликабельна.

9 Autorambler.ru fullscreen

10 Стартует анимация.

11 Анимация заканчивается переходом последнего кадра в образ автомобиля key visual и появлением надписи сверху. Вся область рамки становиться кликабельна.

12 Top х 400 flyscreen

13 Загружается баннер 240 х 400 вместе со страницей.

14 После окончания загрузки, блокируется режим прокрутки, страница отскроливается в область гарантированной видимости баннера. Из баннера постепенно проявляется горизонт до ширины в 1000 px и высоты 400px. А авто key visual скрывается под границей баннера

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

16 После анимации, финальный кадр авто в режиме motion blur переноситься в область баннера и скрывается за правой границей.

17 Финал, в кадре появляется снова образ авто key visual, надпись и ссылки кнопки на целевые страницы, Баннер также полностью кликабелен.