Publish your project for free and start receiving offers from freelance contractors in serveral minutes after publication!
3 000 ₴

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

project complete


Главная состоит из 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


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



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



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

Client's feedback about the contractor Дмитрии Симонове

Quality
Professionalism
Price
Availability
Terms

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

Freelancer's feedback about the client Романе Мак

Payment
Task formulation
Requirements
Availability

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

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



  1. proposal concealed by client
  2. proposal concealed by client
  3. proposal concealed by client
  4. proposal concealed by client
  5. proposal concealed by client
  6.  freelancer isn't working in the service any longer
  7. proposal concealed by client
  8. proposal concealed by client
  1. proposal concealed by client
  2. proposal concealed by client
  3. proposal concealed by client
  4. proposal concealed by client
  • Егор Слепцов
    Complain | 10 May at 09:41 |

    Здравствуйте. Возможно ли выполнение проекта без СЕО оптимизации?

  • а в макете сцена картинкой идет - ее самому разрезать ? и типа эффект загорающихся фар - машина уже со включенными на картинке

  • Роман Мак — project author
    Complain | 10 May at 18:25 |

    Дмитрий, нет. Нарезать самостоятельно ничего не нужно. Я предоставлю все сцены в слоях исполнителю. В каждой сцене от 7 до 10 слоев.
    Свет от фар на отдельном слое. При верстке нужно учесть, когда этот слой (фары) при скроллинге появится и начнет двигаться вместе с автомобилем.

  • Денис Шпот
    Complain | 10 May at 15:49 |

    Машина, поезд и прочее движется произвольно или зависит от скрола, тоесть скролишь вниз и машина едет вправо, вверх скролл - машина назад?

  • Роман Мак — project author
    Complain | 10 May at 18:28 |

    Денис, вы все правильно описали. Все зависит от скролла. Скролл вниз - машина вправо, скролл вверх - машина назад.