Ефекти прокрутки (скролінгу) на сьогоднішній день задоволені поширені. Коли користувач прокручує сторінку вниз, контент не просто рухається вгору і вниз, а стає живим і цікавим. На жаль, до цього дня немає можливості реалізувати ефекти при прокрутки за допомогою тільки коду CSS. Якщо ви не знайомі з j # 097; vascript, то вам не пощастило.
Знайомство з Stroll.js
Stroll.js - це невелика JS-бібліотека, яка дозволяє вам створити привабливі анімації, і застосувати їх до прокручування. Суть полягає в тому, що у вас є група пунктів в прокручуємо списку, і ви використовуєте Stroll.js для того, щоб зробити прокрутку більш привабливою.
Домашня сторінка проекту (показана вище) обладнана декількома демо, які ви можете випробувати для того, щоб побачити, які є ефекти. Самі анімації розроблені за допомогою простих трансформацій на CSS3, тому ви без зусиль зможете вносити зміни в них.
Давайте створимо власне демо!
Кожен раз, коли нам трапляються цікаві проекти на кшталт Stroll.js, ми негайно хочемо випробувати їх, власноруч щось створити. Читання нудних документацій - це, безсумнівно, добре і корисно, але рідко можна здобути справжню враження, поки сам не спробуєш. Саме тому сьогодні ми цим займемося.
Почнемо з того, що нам відомо, що у нас буде список, так як навколо всього цього і крутиться Stroll.js: анімувати прокручуваний списки. У демо пункти списку представляли собою прості рядки тексту, але нам хотілося зайти далі, і подивитися, як Stroll.js, буде вести себе в реальній ситуації. Ми зробили так, щоб кожен пункт списку містив зображення, заголовок і текст.
Як видно, ми почали з невпорядкованого списку, а потім поставили йому дочірні пункти, які містять в собі три елементи, про які ми вже говорили.
Якщо ми пориємося в документації, то побачимо, що тип ефекту заснований на застосованому до неупорядкованого списку класу. Для початку ми використовуємо ефект «flip». Також j # 097; vascript визначатиме батьківський пункт списку, тому нам потрібно його створити.
Далі нам знадобиться наповнити контент всередині пункту списку. Ми використовуємо зображення, заголовок і текст-наповнювач.
Нарешті, ми розширимо наш список так, щоб він включав в себе в загальному 8 пунктів. Може здатися, що цього недостатньо, але вони адже будуть досить об'ємними, значить у нас буде достатньо контенту для прокрутки.
На даному етапі у вас вже повинен бути розміщений весь необхідний контент. Зараз все це виглядає як величезна купа мотлоху, але в наступних етапах ми все це оформимо належним чином.
Тут нічого особливого немає, просто ми скидаємо деякі параметри CSS, і виставляємо колір фону для body. Ясна річ, що в реальному проекті ви будете використовувати більш детальний скидання, але для демо ми не задавалися такою метою.
Що стосується оформлення зображень, то тут ми додамо поле товщиною в 20 пікселів для того, щоб було трохи простору, а також параметр border-radius рівний 50% (не забудьте про браузерні префікси), щоб мініатюри були круглими. Ми також вибудуємо зображення по лівому краю, щоб текст відображався збоку від них, а не під ними.
Що стосується шрифтів, то тут нам треба позначити стилі h2 і для paragraph. Ми використовували напівжирний шрифт без зарубок для заголовків, і стандартне оформлення тега paragraph зі шрифтом із зарубками. Також звертаємо вашу увагу на те, що для paragraph ми використовуємо кілька світліший шрифт.
Ми підібралися до найбільшого шматочку коду CSS - фінальної частини, яка зробить ідеальними наші пункти списку. Виставляємо позиціонування на відносне, ширину на 800 пікселів, а висоту - на 510. Потім застосовуємо поля і відступи, а також необхідно переконатися в тому, що параметр list-style виставлений на None.
Обов'язково потрібно приділити увагу перенаполненію (overflow). Виставите overflow-x на hidden, і overflow-x на scroll, так як наш список повинен бути прокручувати.
Тепер, коли ви майже закінчили роботу над оформленням нашого невпорядкованого списку, прийшов час виставити стилі для пунктів списку (list-item). Знову ж, виставляємо позиціонування (relative), висоту на 200 пікселів, відступи (Padding) на 20 пікселів. Потім виставляємо кольору для фону і шрифтів, вказуємо параметру overflow значення auto, а параметр z-index виставляємо на 2.
Складність тут полягає в другому селекторі. Ми використовуємо nth-child (odd) для того, щоб урізноманітнити кольору кожного пункту списку, що дозволяє нам виділити їх серед тексту. Це не підтримується в IE, але і Scroll.js також не підтримується, тому ми все одно ним скористаємося. Тим не менш, не забудьте використовувати Selectivizr для того, щоб підвищити рівень підтримки ваших селектор. В цілому, якщо ефекти прокрутки не підтримуються практично ні в одному браузері, то вам потрібно постаратися розширити підтримку хоча б іншого візуального оформлення.
Велика частина роботи вже виконана! Наш список виглядає вражаюче, і все, що нам залишилося зробити, це оживити його за допомогою j # 097; vascript. Це буде не складно, повірте нам!
Отже, на початку цього керівництва ми обіцяли вам, що вам не потрібні будуть знання j # 097; vascript для того, щоб все довести до кінця. Проте, зараз ми пропонуємо вам трохи j # 097; vascript!
Насправді, вам потрібно лише скопіювати і вставити невеликий уривок коду j # 097; vascript, щоб все запрацювало.
Вставте цей код в кінець тіла вашого HTML-документа.
Бачите? Не так вже й погано. Все, що вам залишилося зробити, це оформити його і переконатися в тому, що ви використовували правильний ID. У нашому проекті ми використовували #main, але ви можете використовувати власні позначення.
На цьому ми закінчили розробку! Для того щоб змінити ефект, вам потрібно просто застосувати інший клас до неупорядкованого списку. У нашому демо ми використовували flip, curl та tilt.
Роздуми про те, якими ефектами можна прикрасити власні дизайни, допомагають нам зануритися в світ цікавих можливостей. Правда, з будь-яким ефектом можна перестаратися. Можна ідеально оформити сторінку, а можна і зіпсувати враження про неї, і грань тут дуже тонка. Використовуйте Scroll.js дуже мудро і витончено, і тоді ефект не змусить себе чекати.