Заверстать мини-лэндинг в 1 экран (desktop + mobile-responsive)

3 000 руб. за проект • безналичный расчёт
30 ноября 2016, 17:44 • 2 отклика • 20 просмотров
Всем привет!

Необходимо заверстать мини-лэндинг в 1 экран.

Есть макеты - десктоп, планшет, смартфон.
Дизайнерские шрифты предоставляются.

Подробности реализации:
* Смена стилей на мобайл - респонсив
* Если у клиента есть touch - возможность переключения вкладок и преимуществ свайпом влево/вправо (андроид, ай-ос, виндоус)
* Поле телефона на мобилках - нативная нумерная клавиатура (только цифры без литеров)
* Валидация поля не нужна
* Тесты во всех популярных браузерах

Реализация слайдера на фоне:
* На десктопе и планшете - фоновые картинки "текут" (справа налево десктоп и снизу вверх на планшете) по кругу, примерно как тут
* Скорость можно задавать при инициализации класса скрипта (кол-во секунд за которое картинка проходит всю ширину экрана)
* Картинки никак не перелистываются
* Функция анимации - максимально простая, без лишних тяжелых функций и т.п. рекомендуеся использовать кэш-переменные для расчётов во время анимации
* При ресайзе ничего никуда не слетает, все параметры пересчитываются корректно, кэш-переменные обновляются
* Соотношение сторон картинки равно соотношению сторон экрана браузера (не монитора, а именно браузера) - можно реализовать через overflow обертки картинки (другими словами, если браузер 16:9, то и картинку обрезаем до 16:9, если браузер 4:3, то и картинка 4:3)
* Размер картинки меняется скриптом, а позиционирование картинки в обертке для обрезания через css (position: absolute; margin: auto;)
* Реализация класса слайдера объектно через Base.js, анимация через GreenSock, в остальном по необходимости можно юзать jQuery, без дополнительных плагинов каруселей и прочего
* Запуск скрипта на onload первых двух картинок, остальные картинки подгружаем лениво после загрузки остального содержимого страницы (лениво, друг за другом грузим сразу все картинки, а не ждем когда анимация дойдёт до отсутствующей)
* Процесс загрузки - показываем все блоки на своих местах, картинки при этом до момента загрузки скрываем css-ом через visibility: hidden, когда первые две картинки загрузятся - они плавно появляются и одновременно начинают "плыть" (суть в том, чтобы все было плавно и технично)
* Для определенной ширины экрана грузим свой набор картинок, чтобы на ширину 1000 не грузить картинку на 2560 (наборы с шириной - 800, 1280, 1920, 2560), в случае ресайза - оставляем подгруженный набор и тянем его.

Инфраструктурные моменты:
* Структура папок:
– index.html (сама страница)
– blocks (папка с блоками по БЭМу)
– – внутри находятся папки блоков
– – – внутри папок блоков css и картинки для конкретного блока
– js (папка со скриптами)
– – ext (папка с внешними библиотеками)
– – далее скрипты с классами, написанными вами
* Все скрипты в конце html-файла, инициализация классов через $(function(){ });
* Написание слайдера исключительно в объектном стиле на Base.js, без мешанины, длинных функций и непонятно названных переменных
* Именование css-классов понятным образом в стиле БЭМ
* Обнуляем стандартные стили браузеров
* Кроссбраузерное подключение нестандартных шрифтов, например вот так
* Из плагинов можно юзать - jQuery (в т.ч. Mobile), Base.js, GreenSock, Underscore

Срок реализации от 1 до 1,5 дней.
В случае если и вам и нам понравится - сделаем ещё 1 полноценный лэндинг на 8-9 экранов на следующей неделе.

Если есть вопросы - пишите. Жду ваших предложений.
Файлы