Верстка стартовой страницы
Необходимо сверстать сайт (адаптив) в соответствии с ТЗ и макетами (псд выбранному исполнителю).
Указывайте в заявке цену, сроки, а также примеры аналогичных работ.
Общее описание:
Страница полноэкранная. Логотип привязан к левой части экрана, акорзина, телефон и вход - к правой. Меню всегда в центре. Ярлычок «немного о
нас» всегда по-центру и привязан к нижнему краю экрана. При клики на него
страница будет откатыаться вниз. Кнопки-стрелки привязаны к краям экрана и
ценруются по высоте. Переключатель «праздники/каталог» работает по принципу
тумблера. Кнопка возле правой стрелки открывает «режим плитки». Каждый товар
или праздник будет представлен стилизованным изображением шарика. У каждого
слайда будет свой цвет фона, цвет блика за шаром, абстрактная геометрическая
композиция, название, шар и слой с доп. элементами. Все эти элементы с
определенной отдельной анимацией исчезают и появляются при переключении
слайдов.
Дополнительные элементы слегка двигаются по вертикали игоризонтали в зависимости от положения курсора. (параллакс) При движении
курсора влево, они сдвигаются вправо, при движении вниз - сдвигаются вверх и
т.д.
Вся область изображения шарика кликабельна.
При наведении на эту область рядом с курсором будет появлятьсябабл «в каталог». Формы этого сообщения будут разные ( около 5 шт.) и будут
рандомно меняться при каждой смене слайда.
При клике на кнопку режима плитки пользователю откроется полныйсписок того, что было в слайдах. При этом будут использованы те же изображения
шаров, только без бликов, геометрической композиции и дополнительных элементов.
Страница с плиткой занимает 100% ширины экрана, но она имеет вертикальную
прокрутку. Если количества продуктов недостаточно для завершения полного ряда
плиток, то дублируются первые плитки пока строка не заполнится полностью Вся область плитки кликабельна. При наведении плитка и изображениеувеличиваются и появляется название с кнопкой
Анимация:
Все элементы на странице появляются не одновременно, а снебольшой задержкой (как бы хаотично). Эффект появления как тут на втором
экране появляются названия работ https://chaptr.studio/. Скорость быстрая
После появления элементов навигацииснизу выскакивает ярлычок «о нас»
Появление/смена слайда: 1) появляется фон с эффектомувеличивающегося из центра круга (https://tympanus.net/Development/ElasticCircleSlideshow/). 2) Слева/справа подъезжает шар и доп. элементы, замедляясь кконцу движения. 3) Прорисовывается анимация геометрической композиции под шаром и Появляется название. Для данногоконкретного слайда анимация для геометрической композиции - это быстрое, но
плавное всплывание кружков в хаотичном порядке. Названиепоявляется с таким же эффектом как и навигация на странице
Шар в центре постоянно движется по траектории восьмерки,создавая ощущение парящего в воздухе шара. Размах траектории маленький,
скорость очень медленная.
Смена слайдов: При клике на стрелку шар уезжает в противоположную сторону отприезжающего шара, а геометрическая композиция очень быстро исчезает с эффектом
фэйд аут и далее происходит анимация появления описанная выше.
При клике на тумблер «каталог праздники»ползунок переезжает в соответствующее положение
При клике на ярлычок «о нас» страница плавно откатиться вниз изапуститься анимация логотипа из шариков.
Они плавно одновременно, но с небольшой задержкой подлетят ксвоему месту, образуя логотип компании. Первымподлетит большой красный, затем - белый, затем - красный маленький. Эта
анимация проиграется только один раз при входе на страницу и будет статична до
следующего обновления /перезагрузки страницы
Также можно спуститься к этому блоку и простым скроллингомстраницы.
В версии с плитками при наведении на одну из них она будетувеличиваться искажая и границы соседних блоков. Плиткаувеличивается как только курсор пересек ее видимую границу. Приблизительный
эффект можно посмотреть тут https://web.archive.org/web/20140710040214/http://www.mcdonalds.co.uk/ukhome/promotions/favourites.html
Адаптация:
Страница должна подстраиваться под разрешение экрана изменяяразмер шара, доп элементов и графической композиции. Фон и блик всегда занимают 100% экрана, а все остальноеуменьшает размер исходя из разрешения. На макете показан максимальный размер
элементов, при больших разрешениях они просто будут центроваться. На
разрешениях меньше 1024 и ниже отключаем все сложные эффекты, а в плиточной
версии переходим на 4 плитки в ряд. Ниже 1000 переходим на таб версию, в
которой есть только плиточная версия . От 1000 до 769 используем 3 плитки в
ряд, а 768 и ниже будет моб версия - 2 плитки в ряд. Если плиток недостаточно
для завершения ряда, используем заливку рандомным цветом. В моб и таб версии отсутсвует анимация и эффекты при наведении
Необходимо сверстать сайт (адаптив) в соответствии с ТЗ и макетами (псд выбранному исполнителю).
Указывайте в заявке цену, сроки, а также примеры аналогичных работ.