Горизонтальный скролл на Тильда сайте: когда и как использовать
Введение
Горизонтальный скролл на тильда – это дизайнерский элемент, который может придать вашему веб-сайту уникальность и креативность. В этой статье мы рассмотрим преимущества и недостатки горизонтального скролла в Tilda Publishing, лучшие практики его использования, примеры успешных проектов, а также поделимся инструментами для его добавления на ваш тильда сайт.
Что такое горизонтальный скролл на Тильда и зачем он нужен
Горизонтальный скролл – это способ навигации по веб-странице, при котором пользователь перемещается вправо или влево, а не вверх или вниз, как при вертикальном скролле.
Горизонтальный скролл в конструкторе сайтов тильда может использоваться для создания интересного пользовательского опыта и подчеркивания уникальности контента. Этот элемент дизайна активно применяется в современных веб-проектах.
Преимущества горизонтального скролла
Улучшенный дизайн
Одним из главных преимуществ горизонтального скролла является его способность придать веб-сайту стиль и оригинальность. Комбинирование вертикального и горизонтального скролла может сделать дизайн более динамичным.
Креативные возможности
Горизонтальный скролл предоставляет дополнительное пространство для творчества. Это особенно полезно при создании исторических лент, фотогалерей или интерактивных презентаций.
Как добавить горизонтальный скролл на свой сайт 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 в стандартных блоках, используйте нашу тильда модификацию
Lazy loading – ленивая загрузка – метод, при котором элементы загружаются не одновременно со страницей, в которой они находятся, а по мере того, как окажутся в поле зрения пользователя. Это позволяет сайту открываться быстрее. Однако, в некоторых случаях, эта функция может быть проблемной. Поэтому её иногда стоит отключать.
- Всем блокам на странице, кроме двух пустых зеро блоков, присвойте класс «uc-scroll-block» (Настройки> Добавить CSS Class Name)
- ВАЖНО! Не меняйте «ДИАПАЗОН ВИДИМОСТИ НА УСТРОЙСТВАХ» для блоков в горизонтальном скролле. Это автоматически будет происходить в самой модификации.
- После всех блоков на странице создайте html блок «Т123»
- Нажмите на кнопку «Контент» и скопируйте в него следующий скрипт для тильды:
Модификация для создания горизонтального скролла в Тильде
Код доступен только тем, кто зарегистрировался и оплатил подписку
Подписка стоит 400 руб./мес. или 1500 руб. в год
Покупая подписку, ты получаешь:
– доступ ко всем уникальным модификациям
– отключение всей рекламы на сайте
– неограниченный размер загружаемых файлов в LF Cloud
Сохраните изменения и опубликуйте страницу. Теперь, ваша страница будет прокручиваться слева на право, или справа на лево.
Горизонтальный скролл на мобильных устройствах
Использование горизонтального скролла на мобильных устройствах может быть неудобным и неэффективным по нескольким причинам.
Неудобство для пользователя: большинство пользователей привыкли к вертикальному скроллу на мобильных устройствах, так как это более естественный и удобный способ прокрутки контента. Горизонтальный скролл может вызывать путаницу и требовать дополнительных усилий от пользователей, что негативно влияет на общий опыт использования приложения или веб-сайта.
Недружественность для сенсорных устройств: многие мобильные устройства оснащены сенсорными экранами, и горизонтальный скролл может быть менее точным и управляемым на таких устройствах. Это может привести к случайным прокруткам или неправильному взаимодействию с контентом.
Адаптация к различным устройствам: разные мобильные устройства имеют разные размеры экранов и соотношения сторон. Горизонтальный скролл может усложнить задачу создания адаптивного дизайна, который хорошо работает на различных устройствах.
Отсутствие стандартизации: вертикальный скролл является стандартным и широко принятым методом навигации на мобильных устройствах. Использование горизонтального скролла может нарушить эту стандартизацию, создавая дополнительные трудности для пользователей.
Ограниченное пространство на экране: мобильные устройства обычно имеют ограниченное пространство на экране. Горизонтальный скролл может сократить доступное пространство для отображения контента, что сделает его менее удобным для восприятия.
Исходя из этого мы предусмотрели в модификации функцию, которая автоматически отключает скрипт и скрывает пустые блоки, если размер экрана меньше, чем 980 пикселей. Это значение вы можете вручную изменить в коде по своему усмотрению.
Тенденции в использовании горизонтального скролла в tilda ws
Интерактивные пользовательские интерфейсы
Современные веб-сайты все больше внедряют интерактивные элементы, включая горизонтальный скролл, для улучшения взаимодействия с пользователем.
Анимированные веб-сайты
Анимация в тильде при прокрутке становится все более популярной, и горизонтальный скролл является отличным способом ее реализации.
Эмоциональный дизайн
Горизонтальный скролл может добавить эмоциональный элемент в дизайн, делая сайт более запоминающимся для посетителей.
Примеры успешного применения горизонтального скролла
Сайты с фотогалереями
Сайты, посвященные фотографии или дизайну, часто используют горизонтальный скролл для эффективного отображения изображений.
Интерактивные истории
Горизонтальный скролл идеально подходит для создания интерактивных повествований, где пользователь шагает по сюжету.
Инновационные веб-проекты
Современные веб-проекты, стремящиеся к уникальности, успешно внедряют горизонтальный скролл для выделения своего контента.
Заключение
Внедрение горизонтального скролла на ваш tilda сайт может значительно улучшить пользовательский опыт, особенно при наличии большого объема контента или изображений. Этот эффективный способ организации информации обеспечивает удобство просмотра и навигации. При правильной реализации горизонтального скролла пользователи смогут легко прокручивать контент, сохраняя при этом четкость и удобство восприятия. Важно учесть, что оптимальное использование этой функции требует соблюдения дизайнерских и пользовательских принципов, чтобы создать интуитивный и приятный интерфейс.
Смотрите обучающие видео уроки по Тильде тут
Читайте также: Пагинация в Tilda
