Скролить что это, что значит Скролить

Технологии для реализации специфических механизмов скроллинга

▍CSS-свойство position: sticky

position: stickyданный
Синий элемент «упирается» в верхнюю часть контейнера и не прокручивается вместе с остальными элементамиВот

▍Прокрутка с привязкой к определённым точкам

нестабиленВот
Если пользователь, прокручивая содержимое, уводит элемент за верхнюю границу контейнера, браузер автоматически изменит положение элемента так, чтобы он был бы виден целикомВот

Не скрывайте контент, возьмите его под контроль

Android-приложение Google Fit показывает только часть первой карточки под большой круговой диаграммой. Оно как бы намекает: там еще есть что посмотреть! Это интуитивный и элегантный подход, поскольку дополнительные элементы не бросаются в глаза. Они хорошо воспринимаются, в то же время оставляя пространство для основной диаграммы.

В таком подходе нет ничего нового. В 2006 году Джаред Спул уже говорил о том, как обрезка фото может повысить очевидность скролинга.

На сайте можно добиться чего-то подобного, задав для блока с картинкой высоту около 90% от максимальной высоты экрана. Понадобится всего одна строчка CSS или простой скрипт (если вам нужна поддержка старых браузеров).

А что если совместить это с анимацией и сделать контент слегка прозрачным? Тогда внимание пользователя не будет отвлекаться от той самой главной картинки:

MP4

Только будьте осторожнее с уровнем прозрачности. Если контент слишком бледный — это уже не круто. Да, и не забудьте убрать прозрачность, когда пользователь начнет скролить страничку или взаимодействовать с контентом 🙂

Значение слова

Понятие «скролить» в русском языке полностью совпадает с иностранным оригиналом и означает «перелистывать, сдвигать текст на экране».

Иногда можно услышать «скролл» как существительное. Среди художников и архитекторов так иногда называют красивый завиток.

Сравнение технологий и инструментов

API Intersection Observer Плавная прокрутка Точки привязки в CSS  CSS-эффект параллакса CSS-свойство position: sticky
Закрепление элементов +
Эффект параллакса +
Управление динамикой анимации ± ±
Использование контрольных точек ± +
Динамическая пакетная обработка элементов +
Поддержка эффектов горизонтального скроллинга + + + + +
Подходит для продакшна (хорошая браузерная поддержка) ± ± ± + ±
Полная свобода в анимировании
Поддержка разработчиком n/a n/a n/a n/a n/a
Работа с DOM, Canvas, WebGl, SVG +
Поддержка изменения размеров элементов + + + + +
Ограничивает анимацию только релевантным разделом + + + +
Различает направления скроллинга ±
Технология, встроенная в браузер + + + + +
ScrollTrigger Locomotive Scroll ScrollScene ScrollMagic
Закрепление элементов + ± + +
Эффект параллакса + + + +
Управление динамикой анимации + ± ± ±
Использование контрольных точек + ± ± ±
Динамическая пакетная обработка элементов + +
Поддержка эффектов горизонтального скроллинга + + + +
Подходит для продакшна (хорошая браузерная поддержка) + ± + +
Полная свобода в анимировании + ± + +
Поддержка разработчиком + + +
Работает с DOM, Canvas, WebGl, SVG + ± + +
Поддержка изменения размеров элементов + + + ±
Ограничивает анимацию только релевантным разделом + ± ±
Различает направления скроллинга + ± + +
Технология, встроенная в браузер

Теги

Adblock
detector