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

Верстка главной с эффектом параллакс. Макеты в PSD.

проект завершен


Главная состоит из 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/) для компьютеров и мобильных устройств. Соответственно не использовать “тяжелые” скрипты и библиотеки.


Уточнения: 

  1. Слои в сценах должны начинать двигаться только тогда, когда верхняя часть блока с этой сценой доходит до верхней части окна браузера. По движению слоев опираться на видео ниже (если вы не чувствуете глубину, то скорость движения слоев выставим сами). Фактически смотреть по перспективе – передний слой должен двигаться быстрее, чем последующие, самый дальний – медленнее всего.
  2. При переходе с картинки на текстовый блок нужно, чтобы появлялось липкое меню только в блоке с текстом и только в тот момент, когда верхняя часть текстового блока доходит до верхней части окна браузера, как на сайте 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


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



По всем вопросам пишите в личку.



Обновление #1 от 11 мая в 09:56
Уточнение:
3. На сценах имеется значок включения/выключения звука. Планируется на сайте аудио воспроизведение. На каждой сцене свой белый шум, а также поверх шума сама аудио озвучка. То есть нужно, чтобы основная дорожка с голосом шла все время в течение скроллинга всей главной страницы, а на каждой сцене появлялся ее белый шум только тогда, когда эта сцена «в кадре». Но при этом при нажатии на кнопку отключения звука должен отключаться весь звук – и аудио дорожка, и белый шум.

Отзыв заказчика об исполнителе Дмитрии Симонове

Качество
Профессионализм
Стоимость
Контактность
Сроки

Дмитрий - очень ответственный исполнитель. Всегда на связи. Терпеливо разъяснял многие моменты и проделал большой пласт работы. Рекомендую к сотрудничеству.

Отзыв фрилансера о заказчике Романе Мак

Оплата
Постановка задачи
Четкость требований
Контактность

Роман порядочный заказчик. Всегда на связи. По проекту четко поставлена задача и приложено подробное ТЗ.
Рекомендую к сотрудничеству.

Дмитрий С. Дмитрий Симонов | Сейф Сейф



  1. ставка скрыта заказчиком
  2. ставка скрыта заказчиком
  3. ставка скрыта заказчиком
  4. ставка скрыта заказчиком
  5. ставка скрыта заказчиком
  6.  фрилансер больше не работает на сервисе
  7. ставка скрыта заказчиком
  8. ставка скрыта заказчиком
  1. ставка скрыта заказчиком
  2. ставка скрыта заказчиком
  3. ставка скрыта заказчиком
  4. ставка скрыта заказчиком