Введение
Горизонтальный скролл в Tilda – это стильный элемент, который может сделать ваш сайт более оригинальным и креативным. В данной статье мы рассмотрим его плюсы и минусы, лучшие методы применения, успешные примеры, а также предложим инструменты для внедрения горизонтального скроллинга на ваш сайт на платформе Tilda.
Что такое горизонтальный скролл на Тильда и зачем он нужен
Горизонтальный скролл — это метод навигации по веб-странице, при котором пользователь перемещается влево или вправо, в отличие от вертикального скроллинга, где движение происходит вверх или вниз. В конструкторе сайтов Tilda горизонтальный скролл можно использовать для создания оригинального пользовательского опыта и выделения уникальности контента. Этот элемент дизайна активно применяется в современных веб-проектах.
Преимущества горизонтального скролла
Совершенствованный дизайн
Одним из ключевых преимуществ горизонтального скролла является его способность добавить веб-сайту уникальности и современности. Сочетание вертикального и горизонтального скроллинга может сделать дизайн более живым и динамичным.
Творческие возможности
Горизонтальный скролл открывает дополнительные горизонты для творчества. Это особенно полезно при создании историй, фотогалерей или интерактивных презентаций.
Как добавить горизонтальный скролл на свой сайт Tilda
Использование JS, CSS и HTML
Простейший способ добавить горизонтальный скролл – это использовать JS, CSS и HTML для определения размеров и положения элементов, а также tilda zero block (нулевой блок).
Существует множество библиотек и плагинов, таких как ScrollMagic и fullPage.js, которые упрощают добавление горизонтального скролла. Но мы обойдемся css стилями и чистым javascript.
Следуйте нашей просто пошаговой инструкции, и вы сможете с легкостью добавить горизонтальный скролл на ваш сайт:
- Создайте zero block
- Откройте редактор блока, удалите из него все элементы и фоновый цвет
- В настройках этого блока нажмите на ссылку «Добавить CSS Class Name»
- В появившемся поле введите класс «uc-scroll-container»
- Продублируйте этот пустой зеро блок, чтобы создать второй такой же
- Для второго пустого нулевого блока в настройках пропишите класс «uc-scroll-content»
- После этих пустых блоков добавьте любые нужные вам блоки
- Если вы используете зеро блоки, то в редакторе найдите свойство «WINDOW CONTAINER HEIGHT, %» и в соответствующем поле введите цифру 100
- Не забудьте адаптировать все зеро блоки под все типы устройств
- Чтобы изображения в зеро блоках отображались корректно, отключите для них функцию lazy load
- Для этого нажмите на изображение, справа в меню найдите свойство «LAZYLOAD» и в выпадающем списке выберите «off»
- Чтобы отключить lazy load в стандартных блоках, используйте нашу тильда модификацию
- Всем блокам на странице, кроме двух пустых зеро блоков, присвойте класс «uc-scroll-block» (Настройки> Добавить CSS Class Name)
- ВАЖНО! Не меняйте «ДИАПАЗОН ВИДИМОСТИ НА УСТРОЙСТВАХ» для блоков в горизонтальном скролле. Это автоматически будет происходить в самой модификации.
- После всех блоков на странице создайте html блок «Т123»
- Нажмите на кнопку «Контент» и скопируйте в него скрипт для тильды.
Сохраните изменения и опубликуйте страницу. Теперь, ваша страница будет прокручиваться слева на право, или справа на лево.
Горизонтальный скролл на мобильных устройствах
Использование горизонтального скролла на мобильных устройствах может быть неудобным и неэффективным по нескольким причинам.
1. Неудобство для пользователя: большинство людей привыкли к вертикальному скроллу, так как это естественный и привычный способ прокрутки контента на мобильных устройствах. Горизонтальный скролл может вызывать путаницу и требовать дополнительных усилий, что ухудшает пользовательский опыт.
2. Проблемы с сенсорными экранами: многие мобильные устройства оснащены сенсорными экранами, и горизонтальный скролл на таких устройствах может быть менее точным и удобным. Это может привести к случайным прокруткам или неправильным действиям с контентом.
3. Трудности адаптации под разные устройства: мобильные устройства различаются по размерам экранов и соотношению сторон. Горизонтальный скролл усложняет разработку адаптивного дизайна, который корректно отображается на разных устройствах.
4. Отсутствие стандартизации: вертикальный скролл является универсально принятой практикой на мобильных устройствах. Использование горизонтального скролла может нарушить эту стандартизацию, создавая дополнительные трудности для пользователей.
5. Ограниченное пространство на экране: мобильные устройства имеют ограниченную площадь экрана. Горизонтальный скролл может уменьшить доступное пространство для контента, что делает его менее удобным для восприятия.
Для решения этих проблем в модификации предусмотрена функция, которая автоматически отключает скрипт и скрывает пустые блоки, если размер экрана меньше 980 пикселей. Это значение можно изменить в коде по своему усмотрению.
Тенденции в использовании горизонтального скролла в tilda ws
Интерактивные интерфейсы
Современные веб-сайты все чаще используют интерактивные элементы, такие как горизонтальный скроллинг, чтобы улучшить взаимодействие с пользователями.
Анимационные веб-сайты
Использование анимации при прокрутке в платформе Тильда становится все более популярным, и горизонтальный скролл является эффективным способом для её реализации.
Эмоциональный дизайн
Горизонтальный скролл способен добавить эмоциональный акцент в дизайн сайта, делая его более запоминающимся для посетителей.
Примеры успешного применения горизонтального скролла
Сайты, ориентированные на фотографию или дизайн, часто применяют горизонтальную прокрутку для удобного отображения изображений.
Интерактивные повествования
Горизонтальный скролл отлично подходит для создания интерактивных историй, где пользователь активно движется по сюжету.
Инновационные веб-решения
Современные веб-проекты, нацеленные на оригинальность, часто используют горизонтальную прокрутку для акцента на своем контенте.
Больше информации в нашем ТГ канале