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

Плавный скролл в Тильде

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

Всего есть два способа добавления плавного скролла к якорным ссылкам:

1. Через стандартные модификаторы Тильды
2. Через javascript

Рассмотрим каждый способ подробнее

Плавный скролл с помощью стандартных модификаторов

На страницу в Тильде, где вы хотите добавить плавный скролл, необходимо добавить блок T178 — «Плавный скролл до локальной якорной ссылки». Он находится в Все блоки -> Другое

В настройках этого блока вы сможете:

• убрать добавление #hash к адресу страницы при переходе по якорным ссылкам;
• задать дополнительное смещение при клике на якорную ссылку. Это очень полезная функция, особенно если вы закрепили меню в верхней части экрана и при скролле меню будет «съедать» часть информации по якорю;
• задать дополнительное смещение при клике на якорную ссылку только на мобильных устройствах.

Очень важно разместить этот блок плавного скролла в самом низу страницы.

Задать плавность в этом блоке, к сожалению нельзя. Также, модификатор будет применятся абсолютно к каждой якорной ссылке на странице. Но все это можно изменить с помощью следующего способа.

Плавный скролл с помощью javascript

В этом способе вам будет необходимо применить хитрость и добавить блок HTML на страницу. Сделать это можно в разделе Все блоки -> Другое. Выберите блок HTML-код:

Зайдите в Контент блока и вставьте следующий код:

В этом коде вам нужно будет поменять nazvanie-yakorya на ваше название якорной ссылки. В коде так же можно поменять:

• скорость прокрутки. Для этого в поле var speed измените значение с 2000 на больше или меньше;
• дополнительное смещение при клике на якорную ссылку. Его можно изменить поле var customOffset

С помощью этого способа плавный скролл можно добавить к определенным якорям на странице в Тильде

А у вас получилось сделать плавный скролл хотя бы одним из способов?

СБС анимация в Тильде

В Тильде, есть несколько видов step-by-step анимации. Перечислю их:

1. Объект анимируется, если находится на экране;
2. Объект анимируется, если мышью нажать/навести на триггер;
3. Объект анимируется по скроллу

Давайте по порядку разберем каждый из видов

Объект анимируется, если находится на экране

1. Если сам объект будет на экране (element on Screen)
2. Если блок, в котором находится объект будет на экране (block on Screen)

Например, вы поставили, что анимация начнет воспроизводиться, когда элемент будет вверху и поставили Trigger Offset на 150, значит анимация сработает, когда предмет будет не в самом верху, а раньше на 150 пикселей

Какие настройки тут есть

Duration — длительность выполнения одного шага в секундах
Move X,Y — на сколько пикселей от стартового положения, будет смещен объект по оси х (первое поле) и по оси у (второе поле)
Scale X, Y — увеличение или уменьшение объекта, 100% реальный размер, в большую или меньшую сторону будет, соответственно, увеличиваться или уменьшаться объект.
Лайфхак. Если нажать мышью на Differ X, Y, то появится еще одно поле, и можно будет регулировать изменение размера разных сторон, то есть не только пропорциональное изменение
Opacity — тут все просто. Этот бегунок меняет прозрачность объекта
Rotate — поворот объекта по часовой или против часовой стрелки
Easing — интересный параметр, он отвечает за замедление темпа и добавляет «хаосности» анимации. (параметр elasticFin)
Delay — это пауза, в сек. То есть задержка в анимации. Если вы поставите этот параметр на 1 секунду, то анимация начнет проигрываться через 1 сек.

Эти настройки относятся только к первому виду анимации «Объект анимируется, если находится на экране»

Второй тип анимации:
Объект анимируется, если мышью нажать/навести на триггер

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

Теперь по параметрам

Чтобы выбрать этот тип анимации, нужно выбрать в Even’е — on hover (при наведении) или on click (при клике)

Loop — это зацикливание анимации, то есть нужно повторять или нет

Trigger — наиважнейший параметр. Триггером обозначаем тот объект, при клике или наведении на который, у нас будет воспроизводиться анимация.
Триггеров может быть несколько.

Steps — это шаги, их может быть неограниченное кол-во.

Настройки тут такие же, как и в первом типе анимации

Переходим к заключительному виду анимации

Объект анимируется по скроллу

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

Расскажу, о более простых вещах. И ниже будет несколько примеров.

Суть анимации, когда скроллишь сайт, происходит анимация нашего предмета. Мы можем делать: перемещение, уменьшение, кручение, менять прозрачность объекта, а также его фиксацию по отношению к другим объектам.

Настройки такие же, кроме пункта Easing, за место него есть Fix, это зафиксировать объект относительно других

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

Берем заголовок
Идем в анимацию и ставим event — On Scroll
Ставим Start Trigger — Top (верх)
Trigger Offset — 200 пикселей
В настройках Fix ставим Fixed, выставляем дистанцию, в моем случае это 850 px. Тут нужно померить, сколько пикселей при прокрутке будет фиксация. Ставим примерно такое же расстояние (чуть меньше), где примерно заканчивается наш контент справа. У меня на 1000 пикселей, заканчивается. Я ставлю 850, чтобы заголовок уходил наравне с текстом справа.

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

Tilda и Zero Block | Блог Дмитрия Рыбалка запись закреплена

Скролл мобильного меню.

Наскучили шаблонные мобильные меню?
Я придумал идею, как можно их разнообразить стандартными блоками Тильды!

Как вы знаете в Тильде в разделе «Услуги» есть блоки SV401, SV402, которые на мобильных телефонах отображаются в 1 ряд по вертикали или скроллом по горизонтали.

Но зачем использовать стандартное отображение карточек — заголовок + фото + описание + кнопка ?

alt=»👉» />Убирайте все лишнее из блоков и оставляйте только заголовки
alt=»👉» />Включайте в настройках горизонтальное отображение блоков на мобильных телефонах

И вы получите блоки, состоящие только из заголовков с горизонтальным скроллом на мобильных телефонах !

Понравилась идея?
Ставь и справа в меню включай уведомление о новых записях !