Есть рутинные действия, выполняя которые, никто не задумывается об их названии. Пример из классики — мольеровский герой, узнавший, что всю жизнь говорил прозой. Вряд ли вы испытаете подобную радость, узнав, что привычное движение при просмотре информации на компьютере в интернет-сленге означает «скролить», но все же…
Происхождение слова
Скролить от англ. «scroll» — свиток, спираль, крутить, прокручивать.
В английском языке в списке компьютерных терминов давно укрепилось выражение «scroll through the text» — прокручивать текст на экране.
Значение слова
Понятие «скролить» в русском языке полностью совпадает с иностранным оригиналом и означает «перелистывать, сдвигать текст на экране».
Иногда можно услышать «скролл» как существительное. Среди художников и архитекторов так иногда называют красивый завиток.
Примеры использования термина
На клавиатуре любого компьютера есть кнопка «scroll lock», запрет прокручивания текста на странице. Нажав на нее, скролить экран станет невозможно.
«Could you scroll down a few lines? » — Не могли бы вы прокрутить на несколько строк вниз?
Кроме того, скролом называют колесико компьютерной мышки. Скролить — также крутить его, вызывая ответное движение просматриваемой страницы.
Словарь интернет-сленга регулярно пополняется за счет заимствований, не добавляющих ничего нового к значению, зато звучащих интересней. Чтобы с легкостью пользоваться сленговым словарем, узнайте также, что такое топик, миракл, крафт.
scroll — [skrəʊl ǁ skroʊl] verb [intransitive, transitive] COMPUTING to move information on a computer screen up or down so that you can read it: scroll up/down • You can scroll up to the top of the document using this bar. * * * scroll UK US /skrəʊl/… … Financial and business terms
Scroll — Scroll, n. [A dim. of OE. scroue, scrowe (whence E. escrow), OF. escroe, escroue, F. [ e]crou entry in the jail book, LL. scroa scroll, probably of Teutonic origin; cf. OD. schroode a strip, shred, slip of paper, akin to E. shred. Cf. ,… … The Collaborative International Dictionary of English
scroll — like, adj. /skrohl/, n. 1. a roll of parchment, paper, copper, or other material, esp. one with writing on it: a scroll containing the entire Old Testament. 2. something, esp. an ornament, resembling a partly unrolled sheet of paper or having a… … Universalium
scroll — (n.) c.1400, roll of parchment or paper, altered (by association with rolle roll ) from scrowe (early 13c.), from Anglo Fr. escrowe, O.Fr. escroe scrap, roll of parchment, from Frank. *skroda shred (Cf. M.Du. schroode shred, O.H.G. scrot piece… … Etymology dictionary
scroll — /skrɔl, ingl. ˈskrəul/ o scrolling [vc. ingl., dal v. to scroll «far scorrere»] s. m. inv. (elab.) scorrimento … Sinonimi e Contrari. Terza edizione
scroll — ► NOUN 1) a roll of parchment or paper for writing or painting on. 2) an ornamental design or carving resembling a partly unrolled scroll of parchment. ► VERB ▪ move displayed text or graphics on a computer screen in order to view different parts … English terms dictionary
scroll — [skrōl] n. [ME scrowle, altered (? by assoc. with rowle, var. of rolle, ROLL) < scrowe < OFr escroue: see ESCROW] 1. a roll of parchment, paper, etc., usually with writing or pictures on it 2. an ancient book in the form of a rolled… … English World dictionary
scroll — or scrawl A mark intended to supply the place of a seal, made with a pen or other instrument of writing. A paper or parchment containing some writing, and rolled up so as to conceal it … Black’s law dictionary
Scroll — A scroll is a roll of papyrus, parchment, or paper which has been written, drawn or painted upon for the purpose of transmitting information or using as a decoration. It is distinguished from a roll (see below) by virtue of being intended for… … Wikipedia
Scroll — En un videojuego, se denomina scroll, desplazamiento, rollo o voluta al movimiento en 2D de los gráficos que conforman el escenario. Juegos Hablaremos de juegos de scroll horizontal cuando la acción se desarrolla horizontalmente (Sonic, Super… … Wikipedia Español
Скроллинг — форма представления информации, при которой содержимое (текст, изображение) двигается в вертикальном или горизонтальном направлении. Таким образом, скроллинг не изменяет содержимое, но передвигает «камеру».
Выделяют три типа скроллинга:
Кино и телевидение
Чаще всего, скроллинг применяют для того чтобы показать длинный список участвующих в съёмке и подготовке материала.
Широко известен скроллинг текста в начале фильмов серии «Звёздные войны».
В некоторых программах, в частности, новостных, применяется «бегущая строка» — горизонтальный скроллинг текста в нижней части экрана.
Компьютеры
Также скроллингом называют колесико мыши и само действие прокрутки содержимого окна.
В компьютерных и видеоиграх скроллинг позволяет игроку контролировать объект, перемещающийся по большому непрерывному пространству.
См. также
Это заготовка статьи о компьютерах. Вы можете помочь проекту, исправив и дополнив её. Это примечание по возможности следует заменить более точным.
Полезное
Смотреть что такое «Скроллинг» в других словарях:
скроллинг — прокрутка Ускоренное перемещение в вертикальном или горизонтальном направлении всего изображения или его части, отображаемой в выделенном окне на экране дисплея. Различают два вида прокрутки: непрерывная и построчная. [Л.М. Невдяев.… … Справочник технического переводчика
Shoot ’em up — Galaga, известный shoot em up 1981 года. Shoot em up (в переводе означает «перестреляй их всех») жанр компьютерных и видеоигр, в которых игрок, управляющий каким либо персонажем или техническим средством, сражается с большим количеством врагов… … Википедия
Shmup — Shoot em up жанр компьютерных и видеоигр, в которых игрок, управляющий каким либо персонажем или техническим средством, сражается с большим количеством врагов при помощи стрельбы. Процесс игры часто изображён в очень стилизованной манере. В… … Википедия
Wintermute Engine — Тип Игровой движок Разработчик Dead:Code Software Операционная система Windows Последняя версия … Википедия
Wme — Wintermute Engine логотип инструментария Тип Игровой движок Разработчик Dead:Code Software ОС … Википедия
Рельсовый шутер — Shoot em up жанр компьютерных и видеоигр, в которых игрок, управляющий каким либо персонажем или техническим средством, сражается с большим количеством врагов при помощи стрельбы. Процесс игры часто изображён в очень стилизованной манере. В… … Википедия
Shoot \’em up — Galaga, известный shoot em up 1981 года. Shoot em up жанр компьютерных и видеоигр, в которых игрок, управляющий каким либо персонажем или техническим средством, сражается с большим количеством врагов при помощи стрельбы. Процесс игры часто… … Википедия
Клик (нажатие клавиши) — У этого термина существуют и другие значения, см. Клик. Клик (англ. click щелчок) нажатие одной из кнопок указательного устройства ввода. Название происходит от особенности большинства компьютерных мышей. Содержание … Википедия
Sega Master System — Sega Master System … Википедия
История Mozilla Firefox — Объединить Mozilla Firefox … Википедия
Анимации, имеющие отношение к скроллингу веб-страниц, существуют уже многие годы. В последнее время подобные анимации стали распространённее. Возможно, дело тут отчасти в том, что устройства, используемые для работы в интернете, стали мощнее. Эти устройства способны нормально обрабатывать и выводить больше визуальных эффектов, чем раньше.
Существует множество технологий, связанных со скроллингом. Цель этой статьи заключается в том, чтобы дать обзор таких технологий и инструментов, которые помогут подобрать и создать то, что нужно в каждой конкретной ситуации. Я разделил бы технологии скроллинга на две широкие категории. В первую входят технологии для реализации специфических механизмов скроллинга, во вторую — технологии скроллинга общего назначения.
Технологии для реализации специфических механизмов скроллинга
В 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.
Подходит для продакшна (хорошая браузерная поддержка)
±
±
±
+
±
Полная свобода в анимировании
—
—
—
—
—
Поддержка разработчиком
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, scrolling) – это форма передачи информации, при котором текст или изображение передвигается в вертикальном либо в горизонтальном направлении, чтобы увидеть дополнительную информацию в окне.
Еще несколько лет назад о скроллинге отзывались негативно, полагая, что он отталкивает пользователей. Сегодня мнения экспертов в отношении скроллинга изменилось. Это связано, прежде всего, с тем, что в нашу жизнь вошли мобильные девайсы и сенсорные технологии. Просматривать текст на маленьком экране стало удобней, передвигая его непрерывно снизу – вверх или слева – направо.
Тот факт, что скроллинг стал обычным делом и хорошо воспринимается пользователями, подтверждают данные исследований. Оказывается, что:
Исследуя юзабилити страниц, эксперты Software Usability Research Laboratory пришли к выводу, что длинные тексты со скроллом пользователи читают быстрее, чем те же тексты, но с разбивкой на страницы.
Это следует учитывать при разработке сайта. Важно разбить текст на «точки прокрутки», т.е. выделить в информации ключевые моменты. Если это не делать, то может возникнуть «усталость от скроллинга», что приведет либо к эффекту «зомби-скроллинга», при котором пользователь не воспринимает информацию либо к «отказу в гневе», когда пользователь уходит с сайта.
Twitter стал первым, кто отказался от постраничного просмотра. Это один из самых успешных и известных скроллинговых веб-ресурсов. Такой формат подачи информации дает возможность смотреть публикации в хронологическом порядке.
Правила юзабилити скроллина
Прежде всего, нужно так организовать контент, чтобы его было легко прокручивать. Вот несколько практических советов, как это сделать:
Это феномен возникает, когда пользователь думает, что внизу страницы уже нет контента. Это происходит по двум причинам:
Чтобы дать понять пользователям, что на странице внизу еще есть полезная информация учтите следующее: