Верстка главной с эффектом параллакс. Макеты в PSD.
3000 UAH
Главная состоит из 6 сцен со слоями, которые должны двигаться при скроллинге с эффектом параллакс относительно перспективы, а также 6 текстовых блоков под каждой из картинок с липким меню и pop-up окнами Регистрации/Стоимости/Входа.
Основные требования:
- Возможно использование HTML5, CSS3, JavaScript, TweenMax,GreenSock Animation Platform (GSAP)
- Верстка должна быть семантической и с учетом минимальных SEO требований (количество заголовков h1, атрибуты author и me для определения первоисточника и защиты текстов от нежелательного копирования и т.д.)
- Сайт должен быстро загружаться. Это зеленые зоны Google PageSpeed Insights (https://developers.google.com/speed/pagespeed/insights/) для компьютеров и мобильных устройств. Соответственно не использовать “тяжелые” скрипты и библиотеки.
Уточнения:
- Слои в сценах должны начинать двигаться только тогда, когда верхняя часть блока с этой сценой доходит до верхней части окна браузера. По движению слоев опираться на видео ниже (если вы не чувствуете глубину, то скорость движения слоев выставим сами). Фактически смотреть по перспективе – передний слой должен двигаться быстрее, чем последующие, самый дальний – медленнее всего.
- При переходе с картинки на текстовый блок нужно, чтобы появлялось липкое меню только в блоке с текстом и только в тот момент, когда верхняя часть текстового блока доходит до верхней части окна браузера, как на сайте http://www.nytimes.com/projects/2013/tomato-can-blues/index.html
Верстка должна быть адаптивной. По браузерам: нужно, чтобы эффект параллакса работал во всех браузерах и размер был привязан к ширине окна.
Версия для планшетов– также эффект параллакса для всех сцен.
Версия для телефонов– сцены без параллакса.
Сайт для примера с применением подобного эффекта:
http://www.nytimes.com/projects/2013/tomato-can-blues/index.html
Код для примера с применением подобного эффекта:
https://codepen.io/romanmak/pen/eaJozd
МАКЕТЫ + шрифты - https://www.dropbox.com/s/twaaz05vdeyf3q7/CANDY%20FISH%20PSD%20.zip?dl=0
Видео, как должен выглядеть эффект параллакса для сайта с нашими сценами (сделал для лучшего понимания Вами задачи):
По всем вопросам пишите в личку.
3. На сценах имеется значок включения/выключения звука. Планируется на сайте аудио воспроизведение. На каждой сцене свой белый шум, а также поверх шума сама аудио озвучка. То есть нужно, чтобы основная дорожка с голосом шла все время в течение скроллинга всей главной страницы, а на каждой сцене появлялся ее белый шум только тогда, когда эта сцена «в кадре». Но при этом при нажатии на кнопку отключения звука должен отключаться весь звук – и аудио дорожка, и белый шум.
Отзыв заказчика о сотрудничестве с Дмитрием Симоновым
Верстка главной с эффектом параллакс. Макеты в PSD.Дмитрий - очень ответственный исполнитель. Всегда на связи. Терпеливо разъяснял многие моменты и проделал большой пласт работы. Рекомендую к сотрудничеству.
Отзыв фрилансера о сотрудничестве с Roman Mak
Верстка главной с эффектом параллакс. Макеты в PSD.Роман порядочный заказчик. Всегда на связи. По проекту четко поставлена задача и приложено подробное ТЗ.
Рекомендую к сотрудничеству.
-
а в макете сцена картинкой идет - ее самому разрезать ? и типа эффект загорающихся фар - машина уже со включенными на картинке
-
Дмитрий, нет. Нарезать самостоятельно ничего не нужно. Я предоставлю все сцены в слоях исполнителю. В каждой сцене от 7 до 10 слоев.
Свет от фар на отдельном слое. При верстке нужно учесть, когда этот слой (фары) при скроллинге появится и начнет двигаться вместе с автомобилем. -
Машина, поезд и прочее движется произвольно или зависит от скрола, тоесть скролишь вниз и машина едет вправо, вверх скролл - машина назад?
-
Денис, вы все правильно описали. Все зависит от скролла. Скролл вниз - машина вправо, скролл вверх - машина назад.
-
Актуальные фриланс-проекты в категории HTML и CSS верстка
Перенос дизайна на WordPress
2000 UAH
Добрый день! Необходимо перенести готовый дизайн одностраничного лендинга на WordPress. Макет полностью готов (Figma), дизайн разрабатывать не нужно. Необходимо качественно сверстать страницу, адаптировать под мобильные устройства и настроить её на WordPress. Пожалуйста, в… HTML и CSS верстка ∙ 3 часа 1 минута назад ∙ 63 ставки |
Вывести посты из Инстаграма на сайт (опенкарт)
700 UAH
Здравствуйте. Нужно настроить функционал, чтобы на сайте (OpenCart) отображался блок с постами Instagram. Отзовитесь, кто делал и знает как ) Спасибо ) По стоимости договоримся, не знаю, сколько это стоит. HTML и CSS верстка, Веб-программирование ∙ 6 часов 38 минут назад ∙ 41 ставка |
Лендинг для школы английского
13 500 UAH
Ищем дизайнера + верстальщика лендинга (Wix / WordPress / Weblium) Привет! Ищем исполнителя на дизайн и верстку лендинга курса английского языка. Что нужно: — дизайн и верстка лендинга на 12 блоков; — две страницы оплаты: успешная / неуспешная; — адаптив под мобильные; —… HTML и CSS верстка, Дизайн интерфейсов (UI/UX) ∙ 9 часов 5 минут назад ∙ 104 ставки |
Верстка React/Tailwind компонента для друка бланка А4Необходимо исправить UI/UX дизайн и геометрию одного React-компонента (шаблон клинической карты для печати в PDF) Весь функционал, массивы данных и логика уже написаны и работают — нужна чисто косметика, правильные отступы и позиционирование элементов с помощью Tailwind CSS… HTML и CSS верстка, Javascript и Typescript ∙ 10 часов 11 минут назад ∙ 49 ставок |
Адаптивная вёрстка сайта с анимациейНужно сверстать сайт по готовому дизайну из Figma. Админка сайта - Laravel - viar-art.pl Сайт должен быть современным, адаптивным, быстрым и удобным для пользователя. Вёрстка должна точно соответствовать макету, корректно отображаться на мобильных устройствах, планшетах и… HTML и CSS верстка, Создание сайта под ключ ∙ 21 час 33 минуты назад ∙ 88 ставок |
Boca Raton