Разместите свой проект бесплатно и начните получать предложения от фрилансеров-исполнителей уже спустя минуты после публикации!

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

истекло время актуальности


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


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

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

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

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

слайдов.

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

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

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

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


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

Приложения 8

Просмотр приложений доступен только зарегистрированным пользователям.


  1. 3 дня3500 ₴
    Ivan Nukolaev
     283 

    Приветствую
    Меня зовут Иван,
    Сайты рисую в Adobe Muse,што позволяет делать прекрасную адаптпцыю сайта для любых устройств,настройки сео и оптимизации,закачку на хостинг ,вожможность потом редактировать.
    мой вайбер +380958306167
    email [email protected]
    пример последней работы трезвыйводила.рф

    Украина Яремча | 20 февраля в 23:10 |
  2.  фрилансер больше не работает на сервисе
  3. ставка скрыта фрилансером
  4. 10 дней15000 ₴
    Сергей Левшаков
     888  проверен   5   0

    .

    Украина Киев | 21 февраля в 08:52 |
  5. 15 дней3000 ₴
    MegaMozgg MegaMozgg
     205   6   0

    Пару уточнений Лс

    Украина Украина | 21 февраля в 09:09 |
  6. ставка скрыта фрилансером
  7. 7 дней4000 ₴
    Ярослав П.
     2548  проверен   38   0

    Здравствуйте. Обращайтесь. Большой опыт адаптивной верстки.
    Портфолио https://freelancehunt.com/freelancer/yaroslav15.html#portfolio
    скайп yo_yarik
    Некоторые работы тут http://codepoint.ml

    Украина Украина | 21 февраля в 10:24 |
  8. 5 дней3500 ₴
    Эрвин Тефиков
     785   21   0

    Верстаю макеты любой сложности лендинги крупные магазины и др.
    так же адаптивная вёрстка с использованием bootstrap так и без него
    пишите сверстаю быстро качественно и в сроки
    gulp / html / css > sass всё что пишу понимаю, выполню
    skype: tefikoff
    e-mail: [email protected]
    портфолио имеется

    Россия Санкт-Петербург | 21 февраля в 13:35 |
  9. 25 дней30000 ₽
    Владислав Ительмен
     319 

    Руслан, здравствуйте.
    Заинтересовал проект, скажите, макеты промежуточных состояний анимаций имеются?
    Могу выполнить тестовое задание.
    Примеры работ в портфолио.
    ___________________________

    С уважением,
    Владислав.

    • Портфолио: Itelmen.ru
    • E-mail: [email protected]

    Россия Санкт-Петербург | 22 февраля в 17:46 |

Заказчик
Ruslan Dani
Украина Киев  1   0
Проект опубликован
20 февраля в 22:46
252 просмотра
Поделиться