скрольте вниз что это значит
Что значит «скролить» в интернет-сленге?
Есть рутинные действия, выполняя которые, никто не задумывается об их названии. Пример из классики — мольеровский герой, узнавший, что всю жизнь говорил прозой. Вряд ли вы испытаете подобную радость, узнав, что привычное движение при просмотре информации на компьютере в интернет-сленге означает «скролить», но все же…
Происхождение слова
Скролить от англ. «scroll» — свиток, спираль, крутить, прокручивать.
В английском языке в списке компьютерных терминов давно укрепилось выражение «scroll through the text» — прокручивать текст на экране.
Значение слова
Понятие «скролить» в русском языке полностью совпадает с иностранным оригиналом и означает «перелистывать, сдвигать текст на экране».
Иногда можно услышать «скролл» как существительное. Среди художников и архитекторов так иногда называют красивый завиток.
Примеры использования термина
На клавиатуре любого компьютера есть кнопка «scroll lock», запрет прокручивания текста на странице. Нажав на нее, скролить экран станет невозможно.
«Could you scroll down a few lines? » — Не могли бы вы прокрутить на несколько строк вниз?
Кроме того, скролом называют колесико компьютерной мышки. Скролить — также крутить его, вызывая ответное движение просматриваемой страницы.
Словарь интернет-сленга регулярно пополняется за счет заимствований, не добавляющих ничего нового к значению, зато звучащих интересней. Чтобы с легкостью пользоваться сленговым словарем, узнайте также, что такое топик, миракл, крафт.
Обзор технологий скроллинга
Анимации, имеющие отношение к скроллингу веб-страниц, существуют уже многие годы. В последнее время подобные анимации стали распространённее. Возможно, дело тут отчасти в том, что устройства, используемые для работы в интернете, стали мощнее. Эти устройства способны нормально обрабатывать и выводить больше визуальных эффектов, чем раньше.
Существует множество технологий, связанных со скроллингом. Цель этой статьи заключается в том, чтобы дать обзор таких технологий и инструментов, которые помогут подобрать и создать то, что нужно в каждой конкретной ситуации. Я разделил бы технологии скроллинга на две широкие категории. В первую входят технологии для реализации специфических механизмов скроллинга, во вторую — технологии скроллинга общего назначения.
Технологии для реализации специфических механизмов скроллинга
В CSS существует несколько простых стандартных эффектов скроллинга, поддерживаемых современными браузерами. В некоторых случаях их применения может быть достаточно для того чтобы обеспечить особенные нужды некоего проекта.
▍CSS-свойство position: sticky
Синий элемент «упирается» в верхнюю часть контейнера и не прокручивается вместе с остальными элементами
Вот демонстрация такого скроллинга.
▍Эффект параллакса
Эффект параллакса — это, скорее, не особая технология, а специальный технический приём. Но, как бы там ни было, этот эффект может оказаться весьма кстати в тех случаях, когда нужно, чтобы при скроллинге разные части страницы двигались бы с разной скоростью. Данный приём хорошо описан в этом материале. Существует и немало примеров его реализации. Например — этот. Для меня главный минус этого приёма заключается в том, что сложно понять то, какие значения, дающие правильный эффект параллакса, нужно использовать для настройки перспективы и трансформаций.
Эффект параллакса: элементы движутся с разной скоростью.
Вот демонстрация эффекта параллакса.
▍Прокрутка с привязкой к определённым точкам
Использование скроллинга с точками привязки позволяет браузеру автоматически настраивать положение элементов, перемещая их в определённую позицию после того, как пользователь завершил обычную операцию скроллинга. Это может оказаться полезным в случаях, когда нужно, чтобы после завершения прокрутки некий элемент находился бы целиком в поле зрения пользователя. Однако соответствующий API пока ещё нестабилен, поэтому постарайтесь пользоваться самыми свежими его реализациями и с осторожностью относитесь к применению этого подхода к скроллингу в продакшне. Вот хорошая статья на эту тему.
Если пользователь, прокручивая содержимое, уводит элемент за верхнюю границу контейнера, браузер автоматически изменит положение элемента так, чтобы он был бы виден целиком
Вот демонстрация работы скроллинга с точками привязки.
▍Плавная прокрутка
Плавный скроллинг поддерживается средствами браузера при прокрутке страницы до определённого раздела с использованием метода window.scrollTo() в JavaScript, или даже с применением CSS-свойства scroll-behavior. В настоящее время для реализации плавного скроллинга со сглаживанием движений колеса мыши требуются специальные JavaScript-библиотеки. Но при применении таких библиотек нужно обеспечить их нормальное взаимодействие с другими технологиями скроллинга. Кроме того, использование плавного скроллинга — это далеко не всегда хорошая идея.
Технологии скроллинга общего назначения
▍Использование API Intersection Observer
API IntersectionObserver позволяет с успехом решать различные задачи, связанные со скроллингом, в том случае, если всё, что нужно для запуска анимации, — это знание о том, видим ли элемент в области просмотра, а так же о том, какая именно часть элемента видима. Это делает API IntersectionObserver отличным инструментом для запуска анимации, сопровождающей появление элемента на экране. Но, даже так, некоторые эффекты очень сложно (хотя и можно) реализовать с помощью этого API. Например — это запуск разных анимаций в зависимости от направления движения элемента. Этот API, кроме того, не особенно полезен в ситуации, если при скроллинге нужно запускать анимацию тогда, когда элемент находится где-то в середине области просмотра, то есть, не появляется в области просмотра и не исчезает из неё.
▍Использование события scroll
Инструменты для создания механизмов скроллинга общего назначения
Существует несколько мощных библиотек для реализации скроллинга, которые нацелены на то, чтобы дать разработчику полный контроль над анимациями, выполняемыми при прокрутке страниц, а так же на то, чтобы как можно сильнее облегчить разработчику жизнь, не заставляя его самостоятельно заниматься сложными вычислениями.
▍ScrollMagic
Библиотека ScrollMagic даёт нам сравнительно простой API, позволяющий создавать различные эффекты при скроллинге. Эта библиотека может работать совместно с различными библиотеками для анимации, наподобие GSAP и Velocity.js. Правда, в последние несколько лет эта библиотека недостаточно хорошо поддерживается. Это привело к тому, что была создана библиотека ScrollScene.
▍ScrollScene
ScrollScene — это, в сущности, обёртка, которая направлена на то, чтобы повысить удобство работы с библиотекой ScrollMagic и (или) с API IntersectionObserver. Здесь используется собственная версия ScrollMagic, которая отличается лучшей поддержкой, чем обычный вариант библиотеки. Тут имеются и дополнительные возможности, наподобие проигрывания видео и поддержки контрольных точек, влияющих на анимацию. Кроме того, эта библиотека использует GSAP.
▍ScrollTrigger
Библиотека ScrollTrigger — это официальный GreenSock-плагин для GSAP. Эта библиотека отличается большим набором возможностей, её API кажется мне самым простым из API существующих библиотек для скроллинга. Используя эту библиотеку, вы полностью контролируете то, где именно начинается и заканчивается анимация скроллинга, вы можете анимировать при прокрутке всё что угодно (WebGL, canvas, SVG, DOM), можете закреплять элементы на время выполнения анимации. Этим возможности данной библиотеки не ограничиваются. Кроме того, эту библиотеку поддерживает GreenSock, получить помощь по её использованию можно на форумах GreenSock.
▍Библиотека, достойная упоминания: Locomotive Scroll
Сравнение технологий и инструментов
Вот сравнение технологий скроллинга.
| 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 | + | ± | + | + |
| Поддержка изменения размеров элементов | + | + | + | ± |
| Ограничивает анимацию только релевантным разделом | + | — | ± | ± |
| Различает направления скроллинга | + | ± | + | + |
| Технология, встроенная в браузер | — | — | — | — |
Итоги
Для реализации некоторых особых механизмов скроллинга, вроде закрепления элементов и эффекта параллакса, может быть достаточно стандартных возможностей CSS. По меньшей мере — это так при условии использования полифиллов для браузеров, которые соответствующие возможности CSS не поддерживают.
Я обычно, для настройки скроллинга, рекомендую использовать библиотеку ScrollTrigger. Она позволяет достичь всего, на что способен чистый CSS, а так же — многого другого. Эта библиотека берёт на себя заботу о браузерной поддержке тех или иных технологий, облегчает выполнение вычислений, что позволяет тому, кто её использует, просто заниматься своими делами.
Какие технологии вы используете при настройке скроллинга в своих проектах?
скрольте вниз что это значит
Что значит «скролить» в интернет-сленге?
Есть рутинные действия, выполняя которые, никто не задумывается об их названии. Пример из классики — мольеровский герой, узнавший, что всю жизнь говорил прозой. Вряд ли вы испытаете подобную радость, узнав, что привычное движение при просмотре информации на компьютере в интернет-сленге означает «скролить», но все же…
Происхождение слова
Скролить от англ. «scroll» — свиток, спираль, крутить, прокручивать.
В английском языке в списке компьютерных терминов давно укрепилось выражение «scroll through the text» — прокручивать текст на экране.
Значение слова
Понятие «скролить» в русском языке полностью совпадает с иностранным оригиналом и означает «перелистывать, сдвигать текст на экране».
Иногда можно услышать «скролл» как существительное. Среди художников и архитекторов так иногда называют красивый завиток.
Примеры использования термина
На клавиатуре любого компьютера есть кнопка «scroll lock», запрет прокручивания текста на странице. Нажав на нее, скролить экран станет невозможно.
«Could you scroll down a few lines? » — Не могли бы вы прокрутить на несколько строк вниз?
Кроме того, скролом называют колесико компьютерной мышки. Скролить — также крутить его, вызывая ответное движение просматриваемой страницы.
Словарь интернет-сленга регулярно пополняется за счет заимствований, не добавляющих ничего нового к значению, зато звучащих интересней. Чтобы с легкостью пользоваться сленговым словарем, узнайте также, что такое топик, миракл, крафт.
Скролить что это, что значит Скролить
Технологии для реализации специфических механизмов скроллинга
▍CSS-свойство position: sticky
▍Прокрутка с привязкой к определённым точкам
Не скрывайте контент, возьмите его под контроль
Android-приложение Google Fit показывает только часть первой карточки под большой круговой диаграммой. Оно как бы намекает: там еще есть что посмотреть! Это интуитивный и элегантный подход, поскольку дополнительные элементы не бросаются в глаза. Они хорошо воспринимаются, в то же время оставляя пространство для основной диаграммы.
В таком подходе нет ничего нового. В 2006 году Джаред Спул уже говорил о том, как обрезка фото может повысить очевидность скролинга.
На сайте можно добиться чего-то подобного, задав для блока с картинкой высоту около 90% от максимальной высоты экрана. Понадобится всего одна строчка CSS или простой скрипт (если вам нужна поддержка старых браузеров).
А что если совместить это с анимацией и сделать контент слегка прозрачным? Тогда внимание пользователя не будет отвлекаться от той самой главной картинки:
Только будьте осторожнее с уровнем прозрачности. Если контент слишком бледный — это уже не круто. Да, и не забудьте убрать прозрачность, когда пользователь начнет скролить страничку или взаимодействовать с контентом 🙂
Значение слова
Понятие «скролить» в русском языке полностью совпадает с иностранным оригиналом и означает «перелистывать, сдвигать текст на экране».
Иногда можно услышать «скролл» как существительное. Среди художников и архитекторов так иногда называют красивый завиток.
Обзор технологий скроллинга
Анимации, имеющие отношение к скроллингу веб-страниц, существуют уже многие годы. В последнее время подобные анимации стали распространённее. Возможно, дело тут отчасти в том, что устройства, используемые для работы в интернете, стали мощнее. Эти устройства способны нормально обрабатывать и выводить больше визуальных эффектов, чем раньше.
Существует множество технологий, связанных со скроллингом. Цель этой статьи заключается в том, чтобы дать обзор таких технологий и инструментов, которые помогут подобрать и создать то, что нужно в каждой конкретной ситуации. Я разделил бы технологии скроллинга на две широкие категории. В первую входят технологии для реализации специфических механизмов скроллинга, во вторую — технологии скроллинга общего назначения.
Технологии для реализации специфических механизмов скроллинга
В CSS существует несколько простых стандартных эффектов скроллинга, поддерживаемых современными браузерами. В некоторых случаях их применения может быть достаточно для того чтобы обеспечить особенные нужды некоего проекта.
▍CSS-свойство position: sticky
Синий элемент «упирается» в верхнюю часть контейнера и не прокручивается вместе с остальными элементами
Вот демонстрация такого скроллинга.
▍Эффект параллакса
Эффект параллакса — это, скорее, не особая технология, а специальный технический приём. Но, как бы там ни было, этот эффект может оказаться весьма кстати в тех случаях, когда нужно, чтобы при скроллинге разные части страницы двигались бы с разной скоростью. Данный приём хорошо описан в этом материале. Существует и немало примеров его реализации. Например — этот. Для меня главный минус этого приёма заключается в том, что сложно понять то, какие значения, дающие правильный эффект параллакса, нужно использовать для настройки перспективы и трансформаций.
Эффект параллакса: элементы движутся с разной скоростью.
Вот демонстрация эффекта параллакса.
▍Прокрутка с привязкой к определённым точкам
Использование скроллинга с точками привязки позволяет браузеру автоматически настраивать положение элементов, перемещая их в определённую позицию после того, как пользователь завершил обычную операцию скроллинга. Это может оказаться полезным в случаях, когда нужно, чтобы после завершения прокрутки некий элемент находился бы целиком в поле зрения пользователя. Однако соответствующий API пока ещё нестабилен, поэтому постарайтесь пользоваться самыми свежими его реализациями и с осторожностью относитесь к применению этого подхода к скроллингу в продакшне. Вот хорошая статья на эту тему.
Если пользователь, прокручивая содержимое, уводит элемент за верхнюю границу контейнера, браузер автоматически изменит положение элемента так, чтобы он был бы виден целиком
Вот демонстрация работы скроллинга с точками привязки.
▍Плавная прокрутка
Плавный скроллинг поддерживается средствами браузера при прокрутке страницы до определённого раздела с использованием метода window.scrollTo() в JavaScript, или даже с применением CSS-свойства scroll-behavior. В настоящее время для реализации плавного скроллинга со сглаживанием движений колеса мыши требуются специальные JavaScript-библиотеки. Но при применении таких библиотек нужно обеспечить их нормальное взаимодействие с другими технологиями скроллинга. Кроме того, использование плавного скроллинга — это далеко не всегда хорошая идея.
Технологии скроллинга общего назначения
▍Использование API Intersection Observer
API IntersectionObserver позволяет с успехом решать различные задачи, связанные со скроллингом, в том случае, если всё, что нужно для запуска анимации, — это знание о том, видим ли элемент в области просмотра, а так же о том, какая именно часть элемента видима. Это делает API IntersectionObserver отличным инструментом для запуска анимации, сопровождающей появление элемента на экране. Но, даже так, некоторые эффекты очень сложно (хотя и можно) реализовать с помощью этого API. Например — это запуск разных анимаций в зависимости от направления движения элемента. Этот API, кроме того, не особенно полезен в ситуации, если при скроллинге нужно запускать анимацию тогда, когда элемент находится где-то в середине области просмотра, то есть, не появляется в области просмотра и не исчезает из неё.
▍Использование события scroll
Инструменты для создания механизмов скроллинга общего назначения
Существует несколько мощных библиотек для реализации скроллинга, которые нацелены на то, чтобы дать разработчику полный контроль над анимациями, выполняемыми при прокрутке страниц, а так же на то, чтобы как можно сильнее облегчить разработчику жизнь, не заставляя его самостоятельно заниматься сложными вычислениями.
▍ScrollMagic
Библиотека ScrollMagic даёт нам сравнительно простой API, позволяющий создавать различные эффекты при скроллинге. Эта библиотека может работать совместно с различными библиотеками для анимации, наподобие GSAP и Velocity.js. Правда, в последние несколько лет эта библиотека недостаточно хорошо поддерживается. Это привело к тому, что была создана библиотека ScrollScene.
▍ScrollScene
ScrollScene — это, в сущности, обёртка, которая направлена на то, чтобы повысить удобство работы с библиотекой ScrollMagic и (или) с API IntersectionObserver. Здесь используется собственная версия ScrollMagic, которая отличается лучшей поддержкой, чем обычный вариант библиотеки. Тут имеются и дополнительные возможности, наподобие проигрывания видео и поддержки контрольных точек, влияющих на анимацию. Кроме того, эта библиотека использует GSAP.
▍ScrollTrigger
Библиотека ScrollTrigger — это официальный GreenSock-плагин для GSAP. Эта библиотека отличается большим набором возможностей, её API кажется мне самым простым из API существующих библиотек для скроллинга. Используя эту библиотеку, вы полностью контролируете то, где именно начинается и заканчивается анимация скроллинга, вы можете анимировать при прокрутке всё что угодно (WebGL, canvas, SVG, DOM), можете закреплять элементы на время выполнения анимации. Этим возможности данной библиотеки не ограничиваются. Кроме того, эту библиотеку поддерживает GreenSock, получить помощь по её использованию можно на форумах GreenSock.
▍Библиотека, достойная упоминания: Locomotive Scroll
Сравнение технологий и инструментов
Вот сравнение технологий скроллинга.
| 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 | + | ± | + | + |
| Поддержка изменения размеров элементов | + | + | + | ± |
| Ограничивает анимацию только релевантным разделом | + | — | ± | ± |
| Различает направления скроллинга | + | ± | + | + |
| Технология, встроенная в браузер | — | — | — | — |
Итоги
Для реализации некоторых особых механизмов скроллинга, вроде закрепления элементов и эффекта параллакса, может быть достаточно стандартных возможностей CSS. По меньшей мере — это так при условии использования полифиллов для браузеров, которые соответствующие возможности CSS не поддерживают.
Я обычно, для настройки скроллинга, рекомендую использовать библиотеку ScrollTrigger. Она позволяет достичь всего, на что способен чистый CSS, а так же — многого другого. Эта библиотека берёт на себя заботу о браузерной поддержке тех или иных технологий, облегчает выполнение вычислений, что позволяет тому, кто её использует, просто заниматься своими делами.
Какие технологии вы используете при настройке скроллинга в своих проектах?
Вертикальный скроллинг страницы средствами jQuery и кроссбраузерность
Далее представлена кроссбраузерная реализация скроллинга страницы средствами jQuery.