Что такое скролл в тильде
Просим обратить внимание: техническая поддержка Tilda Publishing не осуществляет поддержку связанную с работой кода
1) Создаем два зеро блока. Один будет в начале страницы, второй в конце. Они нужны исключительно в технических целях. Контент на этих экранах быть не должен и лучше поставить им задний фон как на остальном сайте.
2) Создаем блоки, которые мы будем использовать.
4.2) И id всех блоков, которые нужны для горизонтальный секций. Обратите внимание, если у вас одна горизонтальная секция, тогда вам нужно просто написать в таком формате «#rec109090579, #rec109090580, #rec109090581». Если же у вас несколько горизонтальных секций, тогда вам нужно указывать как в первом варианте, но через запятую. В примере ниже показан вариант с двумя горизонтальными секциями. Обратите внимание на кавычки и запятую после третьего блока, это означает что закончилась одна секция и началась другая.
var sliders = [«#rec109090579, #rec109090580, #rec109090581», «#rec109090579, #rec109090580»];
6) В части 3 можно указать дополнительные настройки:
// Скорость скролла
scrollingSpeed: 600,
// Анимация
// Можно заменить «easeInOutCubic» на любую другую анимацию. Список анимаций вы можете найти тут:
// https://easings.net/ru
easing: «easeInOutCubic»,
// Управление клавиатурой
keyboardScrolling: true,
// Стрелки управления на горизонтальном скролле
controlArrows: true,
// Скролл с последнего экрана переводит на первый экран
loopBottom: true,
// Скролл с последнего экрана переводит на первый экран
loopTop: true,
СБС анимация в Тильде
Содержание
Виды step-by-step анимации в Tilda
В Тильде, есть несколько видов step-by-step анимации. Перечислю их:
Давайте по порядку разберем каждый из видов
Объект анимируется, если находится на экране
Например, вы поставили, что анимация начнет воспроизводиться, когда элемент будет вверху и поставили Trigger Offset на 150, значит анимация сработает, когда предмет будет не в самом верху, а раньше на 150 пикселей
Какие настройки тут есть
Duration — длительность выполнения одного шага в секундах
Move X,Y — на сколько пикселей от стартового положения, будет смещен объект по оси х (первое поле) и по оси у (второе поле)
Scale X, Y — увеличение или уменьшение объекта, 100% реальный размер, в большую или меньшую сторону будет, соответственно, увеличиваться или уменьшаться объект.
Лайфхак. Если нажать мышью на Differ X, Y, то появится еще одно поле, и можно будет регулировать изменение размера разных сторон, то есть не только пропорциональное изменение
Opacity — тут все просто. Этот бегунок меняет прозрачность объекта
Rotate — поворот объекта по часовой или против часовой стрелки
Easing — интересный параметр, он отвечает за замедление темпа и добавляет «хаосности» анимации. (параметр elasticFin)
Delay — это пауза, в сек. То есть задержка в анимации. Если вы поставите этот параметр на 1 секунду, то анимация начнет проигрываться через 1 сек.
Эти настройки относятся только к первому виду анимации «Объект анимируется, если находится на экране»
Второй тип анимации:
Объект анимируется, если мышью нажать/навести на триггер
Вид анимации, когда мы хотим, например, чтобы при нажатии на предмет, происходило что-то на экране. Нажали на шэйп, а он передвинулся в другое место. Тут в принципе ограничивается все только вашей фантазией 🙂 На этой странице, есть пример такой анимации
Теперь по параметрам
Loop — это зацикливание анимации, то есть нужно повторять или нет
Trigger — наиважнейший параметр. Триггером обозначаем тот объект, при клике или наведении на который, у нас будет воспроизводиться анимация.
Триггеров может быть несколько.
Steps — это шаги, их может быть неограниченное кол-во.
Настройки тут такие же, как и в первом типе анимации
Переходим к заключительному виду анимации
Объект анимируется по скроллу
Этот вид анимации, для меня самый интересный. С помощью этого вида, можно сделать эффект горизонтального скролла на сайте. Когда скроллишь сайт и кажется, что все идет не снизу вверх, а справа налево. (про это рассказывать здесь не буду, эта тема достойна отдельного поста.
Расскажу, о более простых вещах. И ниже будет несколько примеров.
Суть анимации, когда скроллишь сайт, происходит анимация нашего предмета. Мы можем делать: перемещение, уменьшение, кручение, менять прозрачность объекта, а также его фиксацию по отношению к другим объектам.
Настройки такие же, кроме пункта Easing, за место него есть Fix, это зафиксировать объект относительно других
Например, у нас есть жирный заголовок слева и немного контента (текст, фото) справа.
Мы хотим сделать, чтобы наш заголовок был справа и когда шел контент, заголовок был зафиксирован, пока идет текст и фотки слева. Легко)
СБС анимация в Тильде
Содержание
Виды step-by-step анимации в Tilda
В Тильде, есть несколько видов step-by-step анимации. Перечислю их:
Давайте по порядку разберем каждый из видов
Объект анимируется, если находится на экране
Например, вы поставили, что анимация начнет воспроизводиться, когда элемент будет вверху и поставили Trigger Offset на 150, значит анимация сработает, когда предмет будет не в самом верху, а раньше на 150 пикселей
Какие настройки тут есть
Duration — длительность выполнения одного шага в секундах
Move X,Y — на сколько пикселей от стартового положения, будет смещен объект по оси х (первое поле) и по оси у (второе поле)
Scale X, Y — увеличение или уменьшение объекта, 100% реальный размер, в большую или меньшую сторону будет, соответственно, увеличиваться или уменьшаться объект.
Лайфхак. Если нажать мышью на Differ X, Y, то появится еще одно поле, и можно будет регулировать изменение размера разных сторон, то есть не только пропорциональное изменение
Opacity — тут все просто. Этот бегунок меняет прозрачность объекта
Rotate — поворот объекта по часовой или против часовой стрелки
Easing — интересный параметр, он отвечает за замедление темпа и добавляет «хаосности» анимации. (параметр elasticFin)
Delay — это пауза, в сек. То есть задержка в анимации. Если вы поставите этот параметр на 1 секунду, то анимация начнет проигрываться через 1 сек.
Эти настройки относятся только к первому виду анимации «Объект анимируется, если находится на экране»
Второй тип анимации:
Объект анимируется, если мышью нажать/навести на триггер
Вид анимации, когда мы хотим, например, чтобы при нажатии на предмет, происходило что-то на экране. Нажали на шэйп, а он передвинулся в другое место. Тут в принципе ограничивается все только вашей фантазией 🙂 На этой странице, есть пример такой анимации
Теперь по параметрам
Loop — это зацикливание анимации, то есть нужно повторять или нет
Trigger — наиважнейший параметр. Триггером обозначаем тот объект, при клике или наведении на который, у нас будет воспроизводиться анимация.
Триггеров может быть несколько.
Steps — это шаги, их может быть неограниченное кол-во.
Настройки тут такие же, как и в первом типе анимации
Переходим к заключительному виду анимации
Объект анимируется по скроллу
Этот вид анимации, для меня самый интересный. С помощью этого вида, можно сделать эффект горизонтального скролла на сайте. Когда скроллишь сайт и кажется, что все идет не снизу вверх, а справа налево. (про это рассказывать здесь не буду, эта тема достойна отдельного поста.
Расскажу, о более простых вещах. И ниже будет несколько примеров.
Суть анимации, когда скроллишь сайт, происходит анимация нашего предмета. Мы можем делать: перемещение, уменьшение, кручение, менять прозрачность объекта, а также его фиксацию по отношению к другим объектам.
Настройки такие же, кроме пункта Easing, за место него есть Fix, это зафиксировать объект относительно других
Например, у нас есть жирный заголовок слева и немного контента (текст, фото) справа.
Мы хотим сделать, чтобы наш заголовок был справа и когда шел контент, заголовок был зафиксирован, пока идет текст и фотки слева. Легко)
Плавный скролл в Тильде
Наверняка, вы находитесь на этой странице, так как вам не нравятся резкие переходы к вашим якорным ссылкам на странице. Такие прыжки нравятся небольшому количеству людей, и точно не понравятся вашему заказчику. В этой статье мы исправим текущее положение и добавим плавности скроллу в Тильде.
Всего есть два способа добавления плавного скролла к якорным ссылкам:
Рассмотрим каждый способ подробнее
Плавный скролл с помощью стандартных модификаторов
В настройках этого блока вы сможете:
Очень важно разместить этот блок плавного скролла в самом низу страницы.
Задать плавность в этом блоке, к сожалению нельзя. Также, модификатор будет применятся абсолютно к каждой якорной ссылке на странице. Но все это можно изменить с помощью следующего способа.
Плавный скролл с помощью javascript
Зайдите в Контент блока и вставьте следующий код:
В этом коде вам нужно будет поменять nazvanie-yakorya на ваше название якорной ссылки. В коде так же можно поменять:
С помощью этого способа плавный скролл можно добавить к определенным якорям на странице в Тильде
А у вас получилось сделать плавный скролл хотя бы одним из способов?
Что такое скролл в тильде
1. Начнем с настройки Trigger offset / Точки начала анимации.
Точка отсчитывается относительно выбранной нами области, Window center.
Начните с верхнего объекта. Так удобнее рассчитать точки начала анимации для остальных. У него точка начала анимацииточка равна 0px. Это значит, что первый объект залипнет точно по центру экрана.
Нижний объект должен залипнуть когда коснется верхнего. Это значит, что его точка начала анимации будет ниже на высоту первого объекта. Ставим отступ100px.
2. Настроим Distance / Дистанцию.
Это то расстояние, которое должен пройти объект в режиие фиксирования. Начните настройку анимации с нижнего объекта. Так вам будет удобнее рассчитать расстояние залипания.
Круг. Круг в режиме фиксации на экране проходит расстояние до квадрата. После этого эффект фиксации пропадает и обе фигуры скроллятся как обычно.
По сути, круг должен добраться до положения квадрата, но остановиться выше, чтобы зафиксироваться рядом.