Skrollr
Skrollr беше може би първата библиотека за „parallax“ ефекти с поддръжка за iOS. Тогава още iOS поради оптимизации заключваха DOM-а при scroll и не можеше да се правят промени по CSS property-та на елементите. Вместо това след края на scroll-а стиловете просто се прилагаха изведнъж и често пъти се получаваше и едно прескачане.
„Parallax“ по-горе е в кавички, тъй като тук, подобно на AOS нямаме 3D ефект, а сами по себе си променяме стилове при scroll. Все пак в зависимост от това как го ползваме, можем да приложим стиловете така, че все пак някои елементи да се движат по-бързо/по-бавно от останалите и тогава името „parallax“ си е съвсем намясто.
По-долу ще покажем пример, в който използваме съвсем основни възможности на skrollr.
Преди обаче да ви зарибя прекалено ще кажа, че в голяма степен skrollr е отживелица. По библиотеката не е имало активна разработка от септември 2014. Към момента, в който пиша статията, това са почти 5 години. Все още работи добре на браузърите, на които тествам, но вероятно при по-особено обстоятелства има бъгове, а основното предизвикателство винаги са били мобилни устройства.
Като цяло не се препоръчва да го ползвате занапред. Статията надолу е повече като исторически урок.
Пример – HTML
Започваме с основен HTML код за intro секция със заглавие, а после 4 секции с текст и картинка:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Parallax with Skrollr</title>
</head>
<body>
<section class="intro">
<h1 class="intro__title">Skrollr Demo</h1>
</section>
<section class="text-image">
<div class="shell">
<div class="text-image__text">
<h2 class="text-image__title">Lorem ipsum dolor sit.</h2>
<div class="text-image__content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error laboriosam molestias voluptatum ut quos ratione dolore minus, sit velit incidunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi velit, dolorem aut sint numquam deserunt, non id repellat odit deleniti quia maiores dignissimos sequi dolor et nemo eum modi vel.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et natus culpa magni, maxime iure totam.</p>
</div>
</div>
<div class="text-image__image">
<img src="images/01.jpg" width="400" height="600" alt="" />
</div>
</div>
</section>
<section class="text-image">
<div class="shell">
<div class="text-image__text">
<h2 class="text-image__title">Lorem ipsum dolor sit amet.</h2>
<div class="text-image__content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam pariatur, ipsum fugit eum voluptatibus molestias, alias quidem impedit, provident error quo ipsa consequuntur, maxime blanditiis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis optio delectus, facere nemo deleniti, deserunt quibusdam corporis mollitia voluptatibus, aspernatur modi alias eaque iusto dolorem distinctio debitis quaerat ab. Quisquam praesentium voluptate corporis quibusdam iste eos minima sapiente vero vel ab rem, hic, doloribus adipisci.</p>
</div>
</div>
<div class="text-image__image">
<img src="images/02.jpg" width="400" height="600" alt="" />
</div>
</div>
</section>
<section class="text-image">
<div class="shell">
<div class="text-image__text">
<h2 class="text-image__title">Lorem ipsum.</h2>
<div class="text-image__content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, nihil?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, sequi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas aut temporibus quam corporis magni quae sequi excepturi, pariatur ratione sit.</p>
</div>
</div>
<div class="text-image__image">
<img src="images/03.jpg" width="400" height="600" alt="" />
</div>
</div>
</section>
<section class="text-image">
<div class="shell">
<div class="text-image__text">
<h2 class="text-image__title">Lorem ipsum dolor sit amet, consectetur.</h2>
<div class="text-image__content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta velit fugit voluptatibus recusandae neque pariatur delectus tempora earum distinctio architecto. Dignissimos sapiente autem modi non laborum asperiores, omnis recusandae consequuntur!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed mollitia aperiam placeat rem nobis praesentium non excepturi eum totam, est cum id, similique odit. Neque sapiente reiciendis quibusdam nobis qui.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<div class="text-image__image">
<img src="images/04.jpg" width="400" height="600" alt="" />
</div>
</div>
</section>
</body>
</html>Пример – CSS
Нека след това продължим и с малко CSS, за да изглежда страницата добре:
@charset "utf-8";
* { margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; }
body { background: #E0E0E0; color: #333; font: normal 14px/1.35 Arial, Helvetica, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-family: Verdana, Helvetica, sans-serif; padding: 0.5em 0 1.5em; text-align: center; }
h1 { font-size: 3em; }
h2 { font-size: 2.4em; }
h3 { font-size: 2.2em; }
h4 { font-size: 1.8em; }
h5 { font-size: 1.4em; }
h6 { font-size: 1em; }
p { padding-bottom: 1em; }
.shell { width: 80%; max-width: 1400px; margin: 0 auto; }
.intro { padding: 5% 15%; }
.text-image { padding: 3em 0; overflow: hidden; }
.text-image:nth-child(even) { background: #FFF; }
.text-image .shell { display: flex; align-items: center; }
.text-image:nth-child(even) .shell { flex-direction: row-reverse; }
.text-image__image { margin: 0 2em; }Най-общо имаме:
- reset
- базови стилове на body, заглавия и параграфи
- основни shell стилове
- стилове за секциите, които сме добавили:
- intro
- text-image
За text-image съм използвал display: flex, така че текстът да е в една колона, а картинката – в друга. Освен това при :nth-child(even) разменяме реда, така че да се редуват картинка в дясно и в ляво. Редуваме и фоновия цвят (бяло и светлосиво).
Пример – skrollr
Следва да изтеглим ядрото на skrollr от https://github.com/Prinzhorn/skrollr и да го заредим на страницата. Освен това трябва и да го инициализираме:
<script type="text/javascript" src="skrollr.min.js"></script>
<script>
const s = skrollr.init();
</script>Да, но без конфигурация това инициализиране не ни върши никаква работа.
Как точно да конфигурираме skrollr?
Доста е лесно, но на моменти може да е тегаво. Направено е да работи с data атрибути директно в markup-а:
<div class="shell" data--200="transform: translateX(-75%); opacity: 0;" data-100-top="transform: translateX(0); opacity: 1;">Тези data атрибути съдържат стилове, които да бъдат приложени при толкова px scroll. Действат в голяма степен като keyframe-ове: „на толкова пиксела да е прозрачно, а като достигне толкова пиксела вече да се вижда“. И skrollr се грижи за всяка междинна стойност на scroll да покаже съответната полупрозрачност.
След data атрибута добавяме тире и от колко px искаме да започне анимацията. Примерно: data-100 означава 100px над fold линията.
Да уточним, че fold линията е тази линия, която бележи края на екрана и скрива съдържанието надолу. За да видите какво има под fold линията трябва да scroll-нете.
Можем да използваме и отрицателни числа. Така data--200 (забавно е как имаме тире и минус едно след друго) означава 200px под fold линията. С други думи – тези стилове се прилагат когато елемент вече наближи да се покаже, но още е скрит. И когато реално стигне fold-а, част от анимацията вече е изтекла.
Готино и лесно да се напише. Единствено тегаво, когато имаме повечко елементи, които искаме да анимираме. Тогава вече почва да писва да се пише само едно и също. А ако се наложи да правим промяна вече идва цяло ново ниво на отчаяние.
Какви стилове можем да използваме?
Кажи-речи всичко, за което се сетите.
По-горе примерът е с комбинация от transform: translate и opacity, но има и друг пример с transform: rotate:
<div class="text-image__image" data-0="transform: rotate(-30deg);" data--200-top="transform: rotate(5deg);">Можете да променяте и margin-и, padding-и или цветове ако искате. За последните задължително трябва да се ползва rgb() или hsl(), защото skrollr не поддържа HEX стойности. Просто не може правилно да ги анимира от един цвят към друг, тъй като представляват 3 отделни канала.
Това обаче може да коства ресурси
Все пак е препоръчително или да не прекалявате със стойностите, които анимирате или поне да наблягате повече на opacity и transform. Това е защото тези два стила конкретно се изпълняват от видео картата на компютъра, а не от процесора. Той е достатъчно зает с много други работи:
- изчисляването на това колко сме scroll-нали на страницата
- всякакъв друг JavaScript, който имаме на сайта си
- JS, който даже не е на нашия сайт, ами в друг browser tab, който потребителите са отворили
- не само JS, ами множество функционалности, които браузъра има да организира
- защо даже говорим само за browser-а; посетителят на сайта ни може в това време да има отворени какви ли не други програми на компютъра си
Обаче едва ли играе игри, докато гледа сайта ни. Така можем спокойно да си позволим да ползваме графичната му карта за анимации. Не само, че тя в момента е слабо натоварена, ами и е проектирана да бъде специализирана в анимации и местене на пиксели по екрана. Така можете да се уверите, че сайтът ще върви гладко и анимациите, които имате няма да са насечени. Защото, ако една анимация не е гладка – по-добре изобщо да я нямаме.
Demo
Самият пример можете да видите реализиран на https://magadanski.com/demo/parallax-skrollr/. Той показва само основна употреба, но с повече въображение можете да постигнете още много. Не забравяйте обаче, че библиотеката официално не се поддържа от септември 2014, така че горното е по-скоро за пример какво е възможно. Очаквайте следващия урок, в който ще представим и друга подобна библиотека – ScrollMagic.