Верстка стартовой страницы

Необходимо сверстать сайт (адаптив) в соответствии с ТЗ и макетами (псд выбранному исполнителю).
Указывайте в заявке цену, сроки, а также примеры аналогичных работ.

Общее описание:

Страница полноэкранная. Логотип привязан к левой части экрана, акорзина, телефон и вход - к правой. Меню всегда в центре. Ярлычок «немного о нас» всегда по-центру и привязан к нижнему краю экрана. При клике на него страница будет откатываться вниз. Кнопки-стрелки привязаны к краям экрана и

центруются по высоте. Переключатель «праздники/каталог» работает по принципу тумблера. Кнопка возле правой стрелки открывает «режим плитки». Каждый товар или праздник будет представлен стилизованным изображением шарика. У каждого

слайда будет свой цвет фона, цвет блика за шаром, абстрактная геометрическая композиция, название, шар и слой с доп. элементами. Все эти элементы с определенной отдельной анимацией исчезают и появляются при переключении

слайдов.

Дополнительные элементы слегка двигаются по вертикали и горизонтали в зависимости от положения курсора. (параллакс) При движении курсора влево, они сдвигаются вправо, при движении вниз - сдвигаются вверх и т.д.

Вся область изображения шарика кликабельна.

При наведении на эту область рядом с курсором будет появляться бабл «в каталог». Формы этого сообщения будут разные ( около 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 плитки в ряд. Если плиток недостаточно

для завершения ряда, используем заливку рандомным цветом. В моб и таб версии отсутсвует анимация и эффекты при наведении

Указывайте в заявке цену, сроки, а также примеры аналогичных работ.