Верстка лэндинга.

Сверстать и запрограммировать лэндинг, схожий по механике с http://payonline.ru/applepay/

В приложенном архиве:

∙ шрифты, desktopи web версии(папка ProximaNova);

∙ графика (папка images);

∙ интерактивный прототип лэндинга с анимациями (папка IC-prototype, запускать index.html);

∙ макетыPSD+PNG.

Адаптивность (интервалы перестроения по ширинеэкрана):

Обычный непрерывный скролл:

∙ 0–375px (макет320x480(width 0–375).psd);

∙ 376–767px(макет 480x320(width 376–767).psd);

Поэкранный скролл:

∙ 768–1023px(макет 768x1024(width 768–1023).psd);

∙ 1024–1279px(макет 1024x768(width 1024–1279).psd);

∙ >1280px(макеты 1280x800(width 1280+).psd и 1920x1080(width 1280+).psd)

Анимация стартового экрана:

При загрузке страницы сначала показывается анимированныйзначок «%» в середине экрана. После этого плавно появляется (fade-in) основной контент.

Важны положение и масштаб значка — они показано в PNG-файлах для разныхразрешений, имеющих строку «start-screen_positions» в названии.

Пример анимации показан в интерактивном прототипе.

Параметры анимации появления основного контента(использованные в прототипе): time: 0.6; delay: 1.15; curve: "ease-in-out"

Анимированный значок «%» — в файле percent.svg в папке images.