Заверстать мини-лэндинг в 1 экран (desktop + mobile-responsive)
3 000 руб. за проект
•
безналичный расчёт
Всем привет!
Необходимо заверстать мини-лэндинг в 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 экранов на следующей неделе.
Если есть вопросы - пишите. Жду ваших предложений.
Необходимо заверстать мини-лэндинг в 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 экранов на следующей неделе.
Если есть вопросы - пишите. Жду ваших предложений.
В заказе есть исполнитель
При переводе заказа из архивного в актуальный, текущий исполнитель будет снят с задачи.
Выберите тип сделки
С безопасной сделкой вы всегда сможете вернуть средства, если что-то пойдет не так. С простой сделкой вы самостоятельно договариваетесь с исполнителем об оплате и берете на себя решение конфликтов.