Какие сайты есть со скроллом слева направо

Как реализовать скроллинг слева направо чтобы не было конфликта с колесиком мыши

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

scrolling = setInterval(() => < let scrolled = targetElement.scrollLeft; targetElement.scrollTo(targetElement.scrollLeft + 1, 0); // scrolled to the end, start again if (scrolled === targetElement.scrollLeft) < targetElement.scrollLeft = 0; >>, 10); 

Но тут возникает проблема, когда подгружается данный код всё работает но к сожалению при использовании данного метода возникает проблема при скроллине колесиком мыши. Когда идет анимация, в браузере хрома невозможно скроллить с помощью колесика мыши, а в фаерфоксе например такого нет. Кто сталкивался с этой проблемой, и быть может у вас есть какой-нибудь другой способ решения данной проблемы. P.S: Стили контейнера следующие:

.providers

Отслеживать
задан 1 окт 2021 в 17:17
2,476 1 1 золотой знак 15 15 серебряных знаков 26 26 бронзовых знаков

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

В общем, я решил эту проблему с помощью изменения translateX в css, вместо скроллинга. И выглядит это в моем случае примерно вот так:

Обновил его контейнер:

.providers < &__wrapper < display: grid; grid-template-columns: max-content; grid-template-rows: repeat(2, 1fr); grid-auto-columns: 200px !important; grid-auto-flow: column; grid-gap: 20px; @media (max-width: 992px) < grid-template-rows: repeat(3, 1fr); grid-gap: 14px; >@media (max-width: 562px) < grid-template-rows: repeat(6, 1fr); >> > 

А вот и сама функция анимации:

function startScrollAnimation(targetElement) < const wrapper = $(targetElement); const elements = wrapper.find('>div'); const elementWidth = elements.width(); let x = 0; let gap = 20; let rows = 2; const width = window.innerWidth if (width < 992) < rows = 3 gap = 14 >if (width < 562) < rows = 6 >// высчитываем количество столбцов const columns = Math.floor(elements.length / rows) + (elements.length % rows === 0 ? 0 : 1) // высчитываем полную ширину контейнера с элементами const fullWidth = columns * (gap * 2 + elementWidth) - (wrapper.width() - (elementWidth - gap * 2)); let reverse = false // анимируем, если доходит до конца блока то анимация начинает идти в обратную сторону setInterval(() => < if (!reverse && Math.abs(x) >= fullWidth) < reverse = true >else if (reverse && Math.abs(x) reverse ? x++ : x--; wrapper.css(px)`>) >, 10); > 

Скроллинг

Исследуя юзабилити страниц, эксперты Software Usability Research Laboratory пришли к выводу, что длинные тексты со скроллом пользователи читают быстрее, чем те же тексты, но с разбивкой на страницы.

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

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

Правила юзабилити скроллинга

1. 1 Правильная организация контента

Прежде всего, нужно так организовать контент, чтобы его было легко прокручивать. Вот несколько практических советов, как это сделать:

• Напишите яркое эмоциональное начало с интригой, чтобы пользователю было интересно узнать его продолжение.
• На протяжении статьи приводите интересные факты, подтверждающие основную мысль, которые были бы важными для пользователей.
• Используйте тематические изображения. Они помогают разбить текст на логические блоки, привлекают и удерживают внимание. Лучший эффект дают уникальные снимки и инфографика.

1. 2 Избегание эффекта «ложного дна»

Это феномен возникает, когда пользователь думает, что внизу страницы уже нет контента. Это происходит по двум причинам:

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

Чтобы дать понять пользователям, что на странице внизу еще есть полезная информация, учтите следующее:

1. 1 Не используйте изображения, занимающие большую часть страницы. Именно они чаще всего вводят пользователей в заблуждение. Поставьте хорошо различимую стрелку вниз, если такое изображение уже есть.
2. 2 Разумно используйте белое пространство. Если его будет слишком много, особенно внизу страницы пользователи могут подумать, что информации больше не будет.
3. 3 Все элементы, которыми обычно завершают страницы, уберите с ее середины. Это могут быть рекламные баннеры, ссылки на другие сайты, призывы к действию и т.д.
4. 4 Осторожно используйте горизонтальную прокрутку. Пользователи могут быть не готовы к ней. Если у вас на сайте запланирован слайдер, то убедитесь, что его легко распознают.
5. 5 Не используйте горизонтальные линии, проходящие через весь экран. Если вы хотите отделить одну часть контента от другой, используйте фон разного цвета.
6. 6 Если вы используете кнопку «вверх», проследите, чтобы она постоянно оставалась на своем месте. Если она появится внезапно, пользователи могут подумать, что это конец страницы и перестанут скроллить.
7. 7 Используйте подсказки, указывающие, что на странице есть прокрутка. Это может быть стрелка или надпись «Читать далее».
8. 8 Располагайте прерванные изображения на линии сгиба. Так будет понятно, что дальше есть еще контент. Чтобы избежать четко ограниченных горизонталей, разместите изображения и другие элементы на разной высоте. В идеале, такие элементы должны иметь легко узнаваемую форму, чтобы любому посетителю было очевидно, когда элемент не отображен полностью.
9. 9 Установите общий ритм страницы, повторяя заголовки, чередуя цветовые блоки, используя иконки, стрелки или другие графические элементы. Пользователи интуитивно будут ему следовать, и у них не возникнет ощущения, что страница закончилась посередине.

Услуги, связанные с термином:

• SEO-продвижение сайтов
• Базовая оптимизация
• Прочие услуги по SEO
• Создание сайтов

Digest #2: изучаем виды скроллинга и признаки доступного сайта

Коснёмся темы юзабилити и обсудим два вопроса: как можно организовать прокрутку страниц и что поможет сделать сайт по-настоящему доступным для всех пользователей.

4 типа скроллинга (и их предназначение)

Кроме привычного нам простого скроллинга страниц сверху вниз, существуют и другие варианты прокрутки. Каждый из них может стать изюминкой вашего сайта.

Горизонтальный скроллинг

Прокрутка страниц слева направо используется гораздо реже, чем сверху вниз — и, возможно, зря. Такой способ просмотра подходит для сайтов с большим количеством фото и видео или с представлением контента в виде слайд-шоу. Однако если речь идёт о страницах, где преобладает текст, то горизонтального скроллинга лучше избегать.

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

Длинный скроллинг

Раньше, как правило, каждый раздел сайта размещался на отдельной странице, ссылка на которую помещалась в меню на главной. Теперь чаще встречаются одностраничные сайты, где все разделы расположены один за другим. В таких случаях и используется длинный скроллинг. Пользователь пролистывает экран за экраном, не отвлекаясь на переходы по ссылкам.

Длинная прокрутка удобна, когда нужно рассказать длинную историю и дополнить её красивой анимацией или когда необходимо показать фотоподборки и инфографику. Выглядит такой скроллинг красиво, но у него есть минусы: загружаются страницы с длинной прокруткой дольше, а ориентироваться на них посетителям сложнее. Поэтому здесь тоже позаботьтесь о навигации.

Бесконечный скроллинг

Все листали новостную ленту во «ВКонтакте» или в Instagram? Это и есть пример бесконечной прокрутки, когда контент на странице не кончается и «подвала» у сайта просто нет. Если у вас много разного контента и вы хотите дать возможность пользователю погрузиться в него с головой, присмотритесь к такому варианту.

Здесь снова нужно не забывать о хорошей навигации. Также бесконечные ленты контента могут быть слишком тяжеловесными для старых устройств, из-за чего страница может «притормаживать» при просмотре — это следует учитывать.

При параллакс-скроллинге сайт как будто разбивается на несколько слоёв

Параллакс-скроллинг

Параллакс-эффект заключается в движении переднего и заднего фона с разной скоростью. Такой ход придаёт прокрутке динамичности и удерживает внимание пользователя, особенно когда вместе с параллаксом используется дополнительная анимация.

Использование параллакс-эффекта может увеличить время загрузки страницы. К тому же движение элементов с разными скоростями иногда отвлекает от сути, которую вы стремитесь донести до аудитории. Так что используйте параллакс в меру: в небольших количествах он вряд ли кому-то навредит.

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

Как сделать сайт понятнее и доступнее

Люди принадлежат к разным культурам, говорят на разных языках, по-своему воспринимают мир и имеют свои ограничения по здоровью. Чтобы вашим сайтом могли воспользоваться 100% вашей потенциальной аудитории, сделайте его доступнее для разных пользователей, вне зависимости от их особенностей.

Согласно Положению о доступности веб-контента, выделяются четыре принципа доступности сайта. Чтобы соответствовать им, сайт должен быть.

. доступным для восприятия.

Пользователи с нарушениями зрения просматривают сайты с помощью программ для чтения с экрана. Что показано на картинках и фотографиях, им известно только из содержания тега «alt» в коде изображения. Если этот тег оставить пустым, для некоторых людей ваши иллюстрации останутся загадкой. Это лишь один из примеров неприспособленности сайта для всех без исключения категорий пользователей.

. доступным для использования.

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

К этому же пункту относится и тема капчи. Не все пользователи имеют возможность рассмотреть искажённые символы на экране и вписать их в поле ввода. В связи с этим появились аудиокапчи и проверки формата reCAPTCHA.

Такую капчу проходить гораздо удобнее

. понятным.

Для охвата мультиязычной аудитории сайт должен иметь альтернативные версии на необходимых языках или быть доступным для перевода онлайн-инструментами. Чтобы страницу можно было перевести онлайн, сделайте так, чтобы текст не был частью изображения — иначе его не получится считать. Также доносите информацию не только через текст, но и через визуальные образы, будь то фотографии или иконки.

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

. адаптированным к разному ПО.

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

Некоторые советы по повышению доступности сайта уже прозвучали, добавим к ним ещё несколько:

• обозначайте заголовки и подзаголовки правильно;
• сопровождайте видео субтитрами или транскрипцией;
• используйте контрастные цвета при оформлении страниц;
• обеспечьте навигацию по сайту с помощью клавиш;
• установите, если возможно, специальные расширения и плагины, позволяющие делать сайт доступнее.

Хватит делать сайты с бесконечной прокруткойǃ

TL;DR. Хотя бесконечная прокрутка подходит для некоторых случаев, но она может создать проблемы.

Бесконечная прокрутка может быть дезориентирующей, неконтролируемой и вызывать стресс у пользователей.

В этой статье мы объясним, почему нужно прекратить создание сайтов с бесконечной прокруткой. Но для начала рассмотрим краткую историю вопроса.

Краткая история скроллинга

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

scroll (свиток) (n.): c. 1400, “рулон пергамента или бумаги”

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

Когда в нашу жизнь вошли компьютеры, по-прежнему требовался способ перемещаться по большим фрагментам контента.

Эволюция свитков в компьютерах

1. Строки (и столбцы)

После появления веба дизайнеры изобрели/изучили множество способов пагинации/прокрутки контента. До интернета мы прокручивали строки на экране.

Горизонтальная прокрутка сделала скроллинг инструментом не только для чтения контента, но и для навигации по экрану.

2. Окна (не операционная система)

Наличие прокрутки подтолкнуло людей к созданию оконного интерфейса. С помощью окон можно одновременно просматривать несколько фрагментов содержимого.

В Диспетчере программ Windows 3.1 несколько «свитков»

3. Веб-страницы

Прокрутка решает самую фундаментальную проблему при просмотре веб-страниц. Однако она может вызвать много проблем для пользователей и может помешать им. Посмотрим внимательнее.

Варианты навигации по веб-страницам

Попытаюсь определить, как разработчики и дизайнеры создавали интерфейс для навигации по веб-страницам.

Начнём с некоторых серверных систем пагинации.

Разбивка страниц на основе смещения

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

-- All posts count SELECT COUNT(*) AS total FROM posts

После этого нужно подсчитать страницы. Предположим, мы показываем 10 элементов на странице:

-- First page items SELECT * FROM posts LIMIT 10

И если мы хотим перейти на страницу 3 , то нужно пропустить первые 30 элементов, используя смещение ( OFFSET ):

-- Third page items SELECT * FROM posts LIMIT 10 OFFSET 30

Клиенту отправляется информация следующим образом:

< "pagination": < "items_count": 100, "current": 3, "total_pages": 10 >, "items": [. ] >

Плюсы и минусы пагинации на основе смещения:

• Хорошо : легко перейти на любую страницу
• Хорошо : более свободный вариант для пользователя
• Плохо : проблемы с производительностью
• Плохо : при изменении данных могут отображаться повторяющиеся элементы

Пагинация по указателю

Большие данные затрудняют расчёт таблиц, так как данные постоянно прибывают (подумайте о Twitter). Таким образом, разработчики придумали новые методы разбиения данных на страницы: по указателям (cursor).

Каждой строке присваивается уникальный указатель. Не нужно обсчитывать всю таблицу и знать точное число страниц:

-- Get extra 1 item to get its cursor. SELECT * FROM posts ORDER BY id DESC LIMIT 11

Предположим, что у каждого сообщения уникальный указатель (ID в данном примере) для разбиения на страницы. Клиент получит следующую информацию:

< "pagination": < "next": 1234 // extra item's ID (cursor), null if end of data. >, "items": [. ] >

И вы можете запросить следующую страницу с помощью указателя:

-- Offsetting records using 1234 cursor SELECT * FROM posts WHERE id >= 1234 ORDER BY id LIMIT 11

Плюсы и минусы пагинации по указателям:

• Хорошо : более производительная, нет обсчёта таблицы
• Хорошо : отображение повторяющихся элементов невозможно, если кто-то вставит строку в центр таблицы
• Плохо : невозможно перейти на любую страницу
• Плохо : ограничения для клиента, неизвестно общее количество страниц и номер текущей страницы

Следующий и предыдущий

Действие: на основе кликов
Техника: на основе смещения или по указателям

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

Пагинация WordPress

Нумерация страниц

Действие: на основе кликов
Техника: на основе смещения

По-моему, это наиболее удобный тип навигации. Он использует пагинацию на основе смещения, которая позволяет перейти на нужную страницу, а также одним кликом перейти к концу или началу.

Примеры нумерации

Google использует такую навигацию в результатах поиска:

Загрузить ещё

Действие: триггер
Техника: на основе указателей, хотя можно реализовать на основе смещения, но это будет неудобно

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

Кнопка «Загрузить ещё»

В приведённом выше примере пользователь нажимает кнопку «Загрузить ещё» (Load More), чтобы увидеть больше контента.

Бесконечная прокрутка

Действие: на основе прокрутки
Техника: на основе указателей, хотя можно реализовать на основе смещения, но это будет ОЧЕНЬ неудобно

Бесконечная прокрутка — новейшая техника пагинации на основе указателей.

Хью Уильямс утверждает, что изобрёл бесконечную прокрутку в 2005 году для Microsoft.

Metafizzy разработала open source инструмент, помогающий разработчикам реализовать бесконечную прокрутку.

Бесконечная прокрутка позволяет прокручивать страницу до бесконечности

Хватит делать сайты с бесконечной прокруткой!

До сих пор мы рассматривали, как сюда попасть. Теперь поговорим, почему здесь так хреново.

Поиск футера

Нижний колонтитул — базовая единица анатомии веб-страницы, как и заголовок. Сайты указывают там подробные сведения и ссылки: номера телефонов, адреса, ссылки на разделы справки и поддержки. Если пользователи ищут эту информацию, они обычно прокручивают страницу вниз до футера.

С бесконечной прокруткой пользователям трудно найти футер, потому что невозможно увидеть конец страницы. Невозможность достичь футера может напрягать пользователя (что не здорово).

Сайты с бесконечной прокруткой (например, Twitter) решают проблему, размещая необходимую информацию и ссылки в боковую панель. Боковая панель — это решение проблемы, но не очень хорошее. Футер должен оставаться футером.

Футер Twitter на правой боковой панели

Не используйте бесконечную прокрутку, если у вас нет таймлайна или ленты

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

Но если у вас интернет-магазин, новостной сайт, журнал или блог, то стремление пользователей — перемещаться по элементам или статьям, и тогда бесконечная прокрутка становится для них кошмаром. В списке с таймлайном люди в основном не ищут дату или уникальный элемент. В списках на основе элементов пользователь хочет именно найти конкретный элемент. Бесконечная прокрутка делает это практически невозможным.

Дайте пользователям больше контроля

Пользователи, как правило, не любят UI, который не могут контролировать.

Событие прокрутки не ведёт явно к намерению что-то делать. Люди перемещаются по странице, а если хотят совершить действие, то обычно делают клик или прикасаются к экрану (это и есть триггеры). Они информируют UI о своем решении. Но бесконечная прокрутка срабатывает без какого-либо решения.

Бесконечная прокрутка делает страницы менее управляемыми. Пользователи также могут столкнуться с глюками прыжков.

Вместо бесконечной прокрутки поставьте кнопку «Загрузить ещё», которая является триггером. Это даст пользователю контроль. (Я бы предпочел старый стиль нумерации страниц, но мы предполагаем, что сейчас используем пагинацию по указателям).

Разрешите пользователям идти куда они хотят

Люди перемещаются по страницам, сохраняют некоторые в закладки, делятся с друзьями и т.д.

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

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

Кроме того, если в списке есть функция «Сортировать по», необходимо показать пользователю нумерацию страниц. Если список в алфавитном порядке, нельзя заставлять людей прокручивать список до буквы K, иначе они сойдут с ума.

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

Вывод

Бесконечная прокрутка хороша в некоторых случаях, но как правило, она создаёт больше проблем, чем решает. Дизайнеры не должны рассматривать бесконечную прокрутку как серебряную пулю, которая решает все проблемы с разбиением на страницы. Хватит делать сайты с бесконечной прокруткой!

• пагинация
• прокрутка
• разбиение на страницы
• скроллинг
• бесконечная прокрутка

• Веб-дизайн
• Интерфейсы
• Дизайн мобильных приложений
• Дизайн