Что такое параллакс

Что такое параллакс

Я впервые столкнулся с эффектом параллакса в 2011 году. Название происходит от ощущения трехмерного содержания на сайте. Это может происходить из-за того, что фоновые изображения остаются статичными (или движутся медленно), в то время как другой контент на странице перемещается с нормальной скоростью прокрутки. Это также может происходить из дополнительных элементов, которые также движутся с разной скоростью..

Если не ошибаюсь, сайт, на котором я впервые увидел нечто подобное, был именно таким:

В 2011 году технология была совсем другой, и трудно сказать, в скольких браузерах она поддерживалась..

Сайт Nike был предоставлен мне в качестве примера одним покупателем для чего-то, что мы должны были имитировать..

Читать также:  Бандлеры

Я помню, что никогда подробно не рассматривал исходный код сайта, а просто решил для себя, как я могу добиться чего-то подобного..

Сайт, который мне пришлось разработать, предназначался для неправительственной организации, борющейся за охрану природы. По этой причине в дизайне были разные листья деревьев, идея которых заключалась в том, чтобы перемещать сайт с разной скоростью при прокрутке. Были более мелкие, которые должны были находиться на расстоянии и двигаться медленнее, а также были более крупные (ближе к посетителям сайта), которые должны были быстро проходить по экрану и исчезать..

Я сделал эти листы абсолютно позиционированными на странице, вычислив их верхнее положение с помощью функции прокрутки страницы и их «близости» / «расстояния» от посетителей сайта..

Читать также:  Скроллер

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

Как лучше сделать?

Есть много способов добиться эффекта параллакса. Некоторые более подходящие, чем приведенные выше. В этой серии мы рассмотрим 4 таких:

  1. параллакс с фиксированным фоном
  2. анимировать элементы по мере их появления на экране
  3. параллакс через skrollr, который раньше был очень современным, но официально больше не поддерживается; и для ScrollMagic в качестве альтернативы
  4. настраиваемый параллакс

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

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

Читать также:  Шоу прокрутки (Часть 1 HTML + CSS)

С большими возможностями приходят большие обязанности

Бен Паркер

Мы подробно рассмотрим эти обязанности и как не прострелить себе ногу..

Понравилась статья? Поделиться с друзьями:
Что нужно знать пользователю?