Scroll for more

Какво е Parallax

За първи път се сблъсках с parallax ефект през 2011. Името идва от усещане за триизмерност на съдържанието в един сайт. Това може да идва от фонови изображения, които остават статични (или се движат бавно), докато другото съдържание на страницата се движи с нормална скорост при scroll-ване надолу. Може да идва и от допълнителни елементи, които също да се движат с различна скорост.

Ако не се лъжа, сайтът където видях нещо подобно за първи път беше точно това:

През 2011 технологиите бяха доста по-различни и е трудно да се каже на колко браузъри това се поддържаше.

Сайтът на Nike ми беше даден като пример от клиент, за нещо, което трябваше да наподобим.

Помня, че така и не разгледах source code-а на сайта в детайли, а просто взех сам решение как бих могъл да постигна нещо такова.

Сайтът, който трябваше да разработя беше за неправителствена организация, бореща се за опазване на природата. По тази причина в дизайна имаше различни дървесни листа, чиято идея беше да се движат с различна скорост на сайта при scroll. Имаше по-малки, които трябваше да са уж в далечината и да се движат по-бавно, а имаше и по-големи (по-близко до посетителите на сайта), които пък трябваше да преминат набързо през екрана и да изчезнат.

Направих тези листа абсолютно позиционирани на страницата, като top позицията им изчислявах с функция от scroll-а на страницата и “близостта” / “отдалечеността” им от посетителите на сайта.

Накрая работеше, но не вървеше особено гладко, макар и ефектът да беше доста елементарен. Просто кодът не беше добре оптимизиран.

Как е по-добре да се направи?

Има множество начини за постигане на parallax ефект. Някои по-удачни от горния. В тази поредица ще разгледаме 4 такива:

  1. parallax с фиксиран фон
  2. анимиране на елементи при показването им на екрана
  3. parallax чрез skrollr, който преди беше много модерен, но вече не се поддържа официално; и за ScrollMagic като алтернатива
  4. custom parallax

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

В последните уроци обаче ще да дам доста обстоен примерен код за custom parallax ефект. По мое лично мнение custom ефектите са най-трудни, но предлагат и най-големи възможности.

С големите възможности идват и големи отговорности

Бен Паркър

Ще разгледаме в детайли кои са тези отговорности и как да не се застреляме сами в крака.

Вашият коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *

Този сайт използва Akismet за намаляване на спама. Научете как се обработват данните ви за коментари.