Разместите свой проект бесплатно и начните получать предложения от фрилансеров-исполнителей уже спустя минуты после публикации!
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. ставка скрыта заказчиком
  • Егор Слепцов
    10 мая в 09:41 |

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

  • Дмитрий Виниченко
    10 мая в 13:12 |

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

  • Роман Мак — заказчик проекта
    10 мая в 18:25 |

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

  • Денис Шпот
    10 мая в 15:49 |

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

  • Роман Мак — заказчик проекта
    10 мая в 18:28 |

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


Заказчик
Роман
Роман Мак
Украина Харьков  3  0
Проект опубликован
6 месяцев 29 дней назад
415 просмотров
Метки