Значение слова СКРОЛЛИНГ. Что такое СКРОЛЛИНГ?

Что такое параллакс скроллинг?

Давайте отделим два слова друг от друга и разберем каждый по отдельности.

Параллакс — это зрительная разница в расстоянии между объектами на переднем и заднем плане. Скроллинг — это прокрутка экрана, то есть перемещение графики и текста в двухмерном пространстве.

Ну а параллакс скроллинг — это техника в веб дизайне, когда элементы фона на переднем и заднем плане двигаются с разной скоростью при прокрутке окна браузера. Это создает эффект трехмерного пространства.

Как создать параллакс скроллинг на своем сайте?

Убедитесь, что кнопка Назад работает правильно

Легко потеряться на странице, когда кнопка «Назад» возвращает на начало вместо положения, с которого переходите по ссылке при скроллинге. Ожидаете, что вернетесь к тому же фрагменту, а тут – нужно заново прокручивать материал. Такое никому не понравится.Фотохостинг Flickr – пример, как соответствовать ожиданиям пользователей. Сайт «запоминает», где они были и возвращает туда же.

Видео

Настройте визуальный фидбэк при загрузке контента

Пользователь не любит сюрпризов и хочет знать, что происходит на странице в любое время. Визуализация статуса системы – важный принцип интерфейса.Визуальный фидбек делает дизайн интуитивно понятным. Если сайт загружает материалы, нужен четкий знак, что это действительно происходит. Разместите индикатор прогресса, чтобы показать, что новый контент скоро появится.Демонстрировать работу систему можно с помощью loop-анимации.

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

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

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

Scroolly спешит на помощь

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

  1. el-top = vp-bottom - 100px (элемент начинает появляться)
  2. el-bottom = vp-bottom - 100px (элемент заканчивает появляться)
  3. el-center = vp-center + 30vp (элемент начинает поворот)
  4. el-center = vp-center - 30vp (элемент заканчивает поворот)
  5. el-top = vp-top + 100px (элемент начинает исчезать)
  6. el-bottom = vp-top + 100px (элемент заканчивает исчезать)

А весь сценарий описывается так:

Где vp – viewport, а el – элемент. Также можно пользоваться абстракциями doc для документа и con для контейнера элемента. А теперь об этом подробнее и с картинками…

У каждого из них есть опорные точки, которые можно использовать в синтаксисе scroolly:

viewport: vp-top, vp-center, vp-bottom элемент: el-top, el-center, el-bottom контейнер: con-top, con-center, con-bottom документ: doc-top, doc-center, doc-bottom

Вот несколько примеров описания областей действия правил c помощью синтаксиса scrolly:

Спасибо!

Пожалуйста, проверьте ваш e-mail с письмом: «LPgenerator: Пожалуйста, подтвердите подписку»

Щелкните по ссылке, приведенной в этом письме, и подтвердите ваш адрес электронной почты.

Подтверждение подписки необходимо для подтверждения ваших намерений получать от нас письма, а также для того, чтобы убедиться, что ваш адрес не был добавлен в базу злоумышленниками.

Теги

Adblock
detector