Просим обратить внимание: техническая поддержка Tilda Publishing не осуществляет поддержку связанную с работой кода
1) Создаем два зеро блока. Один будет в начале страницы, второй в конце. Они нужны исключительно в технических целях. Контент на этих экранах быть не должен и лучше поставить им задний фон как на остальном сайте.
2) Создаем блоки, которые мы будем использовать.
3) Добавляем в конце страницы блок Другое -> T123 HTML-код и вставляем в него код, который находится ниже.
4.1) В части 1 нам нужно указать id первого технического блока, всех блоков, которые находятся вне горизонтального скролла и последнего технического блока.
var sections = $(«#rec109090577, #rec109090584»);
4.2) И id всех блоков, которые нужны для горизонтальный секций. Обратите внимание, если у вас одна горизонтальная секция, тогда вам нужно просто написать в таком формате «#rec109090579, #rec109090580, #rec109090581». Если же у вас несколько горизонтальных секций, тогда вам нужно указывать как в первом варианте, но через запятую. В примере ниже показан вариант с двумя горизонтальными секциями. Обратите внимание на кавычки и запятую после третьего блока, это означает что закончилась одна секция и началась другая.
var sliders = [«#rec109090579, #rec109090580, #rec109090581», «#rec109090579, #rec109090580»];
5) Если у вас на сайте внизу есть плашка Made On Tilda, в части 2 нужно добавить этот код. В противном случае, ваш аккаунт могут забанить. Работает только с стандартной плашкой.
setTimeout(function() < if ($("div").last().parent().parent() .parent().attr("id").length == 9) < $("div").last().parent() .parent().parent() .wrap("<div ></div>").parent() .appendTo("#fullpage") .addClass("section") >>, 3000)
6) В части 3 можно указать дополнительные настройки:
// Скорость скролла
scrollingSpeed: 600,
// Анимация
// Можно заменить «easeInOutCubic» на любую другую анимацию. Список анимаций вы можете найти тут:
// https://easings.net/ru
easing: «easeInOutCubic»,
// Управление клавиатурой
keyboardScrolling: true,
// Стрелки управления на горизонтальном скролле
controlArrows: true,
// Скролл с последнего экрана переводит на первый экран
loopBottom: true,
// Скролл с последнего экрана переводит на первый экран
loopTop: true,
Как сделать горизонтальный скролл карточек на Тильде 05:01
Один или несколько блоков с горизонтальным скроллом смотрятся нестандартно и привлекают внимание посетителей к контенту сайта. В видео рассказываем, как сделать такой эффект на Тильде за пару минут.
Подробнее о настройке пошаговой анимации .
. Создать сайт на Tilda:
Онлайн-журнал для дизайнеров, маркетологов и предпринимателей Tilda Education:
Подписывайтесь на нас в соцсетях:
#tildapublishing #Тильда #конструкторсайтов
Раздел: Образование
Теги: на, тильде, сделать, ◾, как, горизонтальный, скролл, карточек, tilda, преднимателей, __________
Как сделать горизонтальный скролл карточек на Тильде
Один или несколько блоков с горизонтальным скроллом смотрятся нестандартно и привлекают внимание посетителей к контенту сайта. В видео рассказываем, как сделать такой эффект на Тильде за пару минут. __________ �� Создать сайт на Tilda: Онлайн-журнал для дизайнеров, маркетологов и предпринимателей Tilda Education: Подписывайтесь на нас в соцсетях: ◾ Instagram: ◾ Telegram: ◾ VK: ◾ Facebook: #tildapublishing #Тильда #конструкторсайтов
Crazy cute channel
Спасибо брат , все вышло ��
Sardor
Dianisseya
Если хочется пальчикам скролл не вниз а справа влево сделать?
Аделия Гимранова
Было бы здорово, если бы объяснили, как рассчитать значения для анимации
Видеоуроки по созданию Таплинка, чат-ботов
Спасибо, всё очень понятно объяснили. Настроила под себя, изменила данные как нужно и всё прекрасно работает.
Vanessa Estervi
Простите, но даже сделав 1в1 как у вас, это не работает. Я потратила впустую час своего времени
Фокусник Нежута
Как сделать следующий эффект:
есть несколько карточек размещенных горизонтально. Большая часть из них уходит за границы блока. И хочется, когда доскролив до них, эти карточки начали прокручиваться справа на лево. Все. И происходит это, когда колесиком мыши крутишь вниз — т е как бы продолжаешь скролить вниз, но происходит скролл справа на лево..
Воспользовался методом в этом видео, но доскрроив до нужных карточек скролл продолжается + скролятся эти самые карточки справа на лево. Т е экран не фиксируется зоне отображения карточек, как хотелось бы.
Горизонтальный И Вертикальный Скролл Втильда .Как Сделать Поэкранный Скролл В Tilda Publishing
Горизонтальный и вертикальный скролл .Тильда .Как сделать поэкранный скролл.
Показываю как сделать поэранный скролл вашего сайта путем добавления небольшого куска кода. Рассмотрим как горизонтальный скролл, так и вертикальный!
#tilda #webdesign #zeroblock #Тильда #Лайфхаки #сайтынатильда
Новые видео на канале Kaizen Skillboost
- Музыка Для Работы, Концентрации И Фокуса
- Лучшая Музыка Для Работы, Программирования И Концентрации. Как Повысить Продуктивность
- Лучший Скролл Слайдер В Tilda Zero Block. Как Сделать Слайдер В Тильда — Tilda — Zeroblock — Slider
Подписывайтесь на наш Telegram канал! @thewikihow открыть Мониторим видео тренды 24/7