Какво е Parallax
За първи път се сблъсках с parallax ефект през 2011. Името идва от усещане за триизмерност на съдържанието в един сайт. Това може да идва от фонови изображения, които остават статични (или се движат бавно), докато другото съдържание на страницата се движи с нормална скорост при scroll-ване надолу. Може да идва и от допълнителни елементи, които също да се движат с различна скорост.
Ако не се лъжа, сайтът където видях нещо подобно за първи път беше точно това:
През 2011 технологиите бяха доста по-различни и е трудно да се каже на колко браузъри това се поддържаше.
Сайтът на Nike ми беше даден като пример от клиент, за нещо, което трябваше да наподобим.
Помня, че така и не разгледах source code-а на сайта в детайли, а просто взех сам решение как бих могъл да постигна нещо такова.
Сайтът, който трябваше да разработя беше за неправителствена организация, бореща се за опазване на природата. По тази причина в дизайна имаше различни дървесни листа, чиято идея беше да се движат с различна скорост на сайта при scroll. Имаше по-малки, които трябваше да са уж в далечината и да се движат по-бавно, а имаше и по-големи (по-близко до посетителите на сайта), които пък трябваше да преминат набързо през екрана и да изчезнат.
Направих тези листа абсолютно позиционирани на страницата, като top позицията им изчислявах с функция от scroll-а на страницата и „близостта“ / „отдалечеността“ им от посетителите на сайта.
Накрая работеше, но не вървеше особено гладко, макар и ефектът да беше доста елементарен. Просто кодът не беше добре оптимизиран.
Как е по-добре да се направи?
Има множество начини за постигане на parallax ефект. Някои по-удачни от горния. В тази поредица ще разгледаме 4 такива:
- parallax с фиксиран фон
- анимиране на елементи при показването им на екрана
- parallax чрез skrollr, който преди беше много модерен, но вече не се поддържа официално; и за ScrollMagic като алтернатива
- custom parallax
Първите ще бъдат лесни и почти-готови решения, които могат да се приложат бързо.
В последните уроци обаче ще да дам доста обстоен примерен код за custom parallax ефект. По мое лично мнение custom ефектите са най-трудни, но предлагат и най-големи възможности.
С големите възможности идват и големи отговорности
Бен Паркър
Ще разгледаме в детайли кои са тези отговорности и как да не се застреляме сами в крака.