TiCode (Easy mods)

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

2025-06-02 14:35 Магазин Прочее Слайдеры
С помощью этой модификации вы можете изменить внешний вид индикатора горизонтальной прокрутки в каталогах и других блоках на Tilda. Такой индикатор обычно активируется в настройках блока и отображается на мобильных устройствах, чтобы подсказать пользователю, что контент можно прокручивать вбок.

Ниже представлены стили для двух вариантов индикаторов, а также код, который можно вставить в Zero Block, чтобы вывести индикатор в любом нужном месте.

Варианты подсказок о горизонтальном скролле

Инструкция по установке

Копируем код и вставляем в блок T123. Указываем свои цвета вместо стандартных
Код для индикатора (Рука)
<!--TICODE --><!-- Смена цвета индикатора пролистывания | https://ticode.dev  -->
<style>
.tooltip-horizontal-scroll-icon_card {
  fill: #000000 !important; /* Указываем цвет иконки шейпов */
}
.tooltip-horizontal-scroll-icon_hand {
  fill: #000000 !important; /* Указываем цвет иконки руки */
}
</style>
Код для индикатора (Кружок)
<!--TICODE --><!-- Смена цвета индикатора пролистывания | https://ticode.dev  -->
<style>
.tooltip-horizontal-scroll-icon_circl {
  fill: #000000 !important; /* Указываем цвет круга */
}
</style>

Как добавить подсказку о горизонтальном скролле в Zero Block

  • Создаем в зеро блоке HTML элемент и вставляем один из кодов.
  • Размер HTML элемента ставим минимальный для удобства адаптации иконки.
  • Для изменения цвета используйте один из CSS-стилей, приведённых выше.
Код для вывода индикатора (Руки)
<!--TICODE --><!-- Индикатор подскази о скролле в Zero Block | https://ticode.dev  -->
<svg role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 300" height="42" width="42"> <rect class="tooltip-horizontal-scroll-icon_card" x="480" width="200" height="200" rx="5" fill="rgba(190,190,190,0.3)"></rect> <rect class="tooltip-horizontal-scroll-icon_card" y="0" width="200" height="200" rx="5" fill="rgba(190,190,190,0.3)"></rect> <rect class="tooltip-horizontal-scroll-icon_card" x="240" width="200" height="200" rx="5" fill="rgba(190,190,190,0.3)"></rect> <path class="tooltip-horizontal-scroll-icon_hand" d="M78.9579 285.7C78.9579 285.7 37.8579 212.5 20.5579 180.8C-2.44209 138.6 -6.2422 120.8 9.6579 112C19.5579 106.5 33.2579 108.8 41.6579 123.4L61.2579 154.6V32.3C61.2579 32.3 60.0579 0 83.0579 0C107.558 0 105.458 32.3 105.458 32.3V91.7C105.458 91.7 118.358 82.4 133.458 86.6C141.158 88.7 150.158 92.4 154.958 104.6C154.958 104.6 185.658 89.7 200.958 121.4C200.958 121.4 236.358 114.4 236.358 151.1C236.358 187.8 192.158 285.7 192.158 285.7H78.9579Z" fill="rgba(190,190,190,1)"></path> <style>.tooltip-horizontal-scroll-icon_hand{animation:tooltip-horizontal-scroll-icon_anim-scroll-hand 2s infinite}.tooltip-horizontal-scroll-icon_card{animation:tooltip-horizontal-scroll-icon_anim-scroll-card 2s infinite}@keyframes tooltip-horizontal-scroll-icon_anim-scroll-hand{0%{transform:translateX(80px) scale(1);opacity:0}10%{transform:translateX(80px) scale(1);opacity:1}20%,60%{transform:translateX(175px) scale(.6);opacity:1}80%{transform:translateX(5px) scale(.6);opacity:1}to{transform:translateX(5px) scale(.6);opacity:0}}@keyframes tooltip-horizontal-scroll-icon_anim-scroll-card{0%,60%{transform:translateX(0)}80%,to{transform:translateX(-240px)}}</style> </svg>
Код для вывода индикатора (Круга)
<!--TICODE --><!-- Индикатор подскази о скролле в Zero Block | https://ticode.dev  -->
<svg role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 16" height="16" width="38"> <rect class="tooltip-horizontal-scroll-icon_circle" x="22" y="0" width="16" height="16" rx="8" fill="rgba(190,190,190,0.3)"></rect> <style>.tooltip-horizontal-scroll-icon_circle{animation:tooltip-horizontal-scroll-icon_anim-scroll-circle 2.9s infinite linear;}@keyframes tooltip-horizontal-scroll-icon_anim-scroll-circle{0%{opacity:1;transform:translateX(0);width:16px;animation-timing-function:ease-in-out;}27%{opacity:1;transform:translateX(-20px);width:21px;animation-timing-function:ease-out;}37%{opacity:1;transform:translateX(-22px);width:16px;animation-timing-function:ease-in-out;}54%{opacity:0;transform:translateX(-22px);width:16px;animation-timing-function:ease-in-out;}100%{opacity:0;transform:translateX(-22px);width:16px;}}</style> </svg>

Другие модификации для блоков каталога на Тильда

Горизонтальный скролл разделов в блоках магазина: удобно для компактного размещения категорий и экономии вертикального пространства.

Вывод остатка товара в каталоге: помогает создать эффект ограниченности и стимулирует покупку.

Кнопка «Загрузить ещё» в блоках магазина: костюмная кнопка подгрузки товаров

Скрытие длинного текста в карточках товара и потоках: сохраняет аккуратный внешний вид и делает карточки компактнее.
Made on
Tilda