Как сделать плавный скролл в тильде
Плавный скролл в Тильде
Наверняка, вы находитесь на этой странице, так как вам не нравятся резкие переходы к вашим якорным ссылкам на странице. Такие прыжки нравятся небольшому количеству людей, и точно не понравятся вашему заказчику. В этой статье мы исправим текущее положение и добавим плавности скроллу в Тильде.
Всего есть два способа добавления плавного скролла к якорным ссылкам:
Рассмотрим каждый способ подробнее
Плавный скролл с помощью стандартных модификаторов
В настройках этого блока вы сможете:
Очень важно разместить этот блок плавного скролла в самом низу страницы.
Задать плавность в этом блоке, к сожалению нельзя. Также, модификатор будет применятся абсолютно к каждой якорной ссылке на странице. Но все это можно изменить с помощью следующего способа.
Плавный скролл с помощью javascript
Зайдите в Контент блока и вставьте следующий код:
В этом коде вам нужно будет поменять nazvanie-yakorya на ваше название якорной ссылки. В коде так же можно поменять:
С помощью этого способа плавный скролл можно добавить к определенным якорям на странице в Тильде
А у вас получилось сделать плавный скролл хотя бы одним из способов?
Просим обратить внимание: техническая поддержка 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, это зафиксировать объект относительно других
Например, у нас есть жирный заголовок слева и немного контента (текст, фото) справа.
Мы хотим сделать, чтобы наш заголовок был справа и когда шел контент, заголовок был зафиксирован, пока идет текст и фотки слева. Легко)
Zero-блок в Tilda: анимация лендинга
Рассказываем об основных принципах анимации Zero-блока, эффектах и настройках каждой функции.
Иллюстрация: Оля Ежак для Skillbox Media
Анимация — инструмент дизайнера, который помогает подчеркнуть важную деталь, добиться нужного настроения или сделать интерфейс сайта приятнее. Вы сможете воспользоваться им и в Tilda — в редакторе Zero-блока.
Рассказываем, как сделать анимированные элементы сайта на Tilda, и показываем, как с их помощью скопировать этот лендинг о Вьетнаме.
Это инструкция о продвинутой работе в Tilda. Если вы ещё ей не пользовались, советуем прочитать предыдущие статьи об этом конструкторе сайтов:
Перед началом работы зайдите в Tilda и создайте новую страницу с Zero-блоком. Высоту укажите 10 000 пикселей — этого достаточно, чтобы протестировать самые крутые анимационные эффекты и целиком сверстать лонгрид.
Автор статей по дизайну. В веб-дизайн пришёл в 2013 году, осознанно начал заниматься с 2015 года. Параллельно освоил вёрстку. Время от времени публикую переводы на Habr.
Структура лонгрида
Сайт состоит из пяти частей:
1. Главный экран. На нём используется эффект фиксированной анимации, анимация параллакса и цикличная анимация элементов логотипа в углу.
2. Экран с текстом и фотографиями, которые фиксируются во время скролла.
3. Экран с декоративным текстом и фотографиями. При скролле все элементы появляются с разных сторон экрана.
4. Блок фотографий и фонового текста.
5. Заключительный экран с блоком фотографий и эффектом параллакса.
Чтобы при скролле меню было всегда доступно, нужно зафиксировать его в верхней части экрана:
Проверьте результат в предпросмотре — сохраните свою работу, закройте редактор Zero-блока и нажмите кнопку «Предпросмотр». При скролле плашка должна зафиксироваться в верхней части страницы. Текст вместе с ней пока не залипает — это нормально:
Вернитесь в редактор Zero-блока и повторите все действия с каждым пунктом меню: укажите нужную фиксацию и высоту. Для начала проверьте, как будет себя вести кнопка Home:
Сейчас она влипает в верхний край окна. Чтобы это исправить, в настройках базовой анимации укажите Trigger offset («Отступ») — 30 пикселей. То же самое сделайте и с логотипом, только вместо 30 укажите 10 пикселей.
Укажите Trigger offset у всех пунктов меню, чтобы они встали где нужно:
Параллакс-анимация
Параллакс-анимация довольно проста в настройках и имеет всего несколько параметров. Чтобы понять, как технически работает этот эффект, попробуйте сделать его с помощью свойства Mouse («Отклик на курсор»). Выберите его в пункте Basic animation и выставьте любые значения по осям X и Y:
Скорее всего, анимация у вас будет работать не так, как вы ожидали:
Координаты осей X и Y задаются относительно курсора мыши, и объекты смещаются относительно его положения.
Для лонгрида больше подходит Scroll — объекты будут смещаться при скролле страницы. Настройка у Scroll всего одна — скорость, которая по умолчанию равна 100. Чем больше это значение, тем быстрее смещаются объекты. Для примера рекомендуем выбирать между 50 до 200.
У каждого объекта укажите разную скорость, чтобы анимация выглядела интереснее. У самой верхней иллюстрации укажите 150, у следующей 80, а у заголовка — 200:
Заголовок будет догонять верхнюю фотографию, наезжая на нижнюю, а нижняя фотография, наоборот, поедет навстречу заголовку — за счёт этого будет казаться, что объекты находятся в разных плоскостях:
Фиксирование картинки
Иногда на сайтах-блогах используют интересный приём — при скроллировании текст проматывается, а тематическая картинка остаётся на протяжении всего текста, таким образом вы можете привязывать суть прочитанного к визуальному образу.
Чтобы это сделать, воспользуйтесь фиксацией блока, как вы уже сделали с меню: Fixing → On window top.
Картинка не должна влипать в меню, поэтому нужно указать ей дополнительный вертикальный отступ. Чтобы понять, какой именно нужен отступ, посмотрите на высоту плашки меню и прибавьте к ней 18. В нашем случае высота плашки равна 82 пикселям, значит, отступ у иллюстрации должен равняться 100:
Укажите получившееся число в блоке Trigger offset в пункте Basic animation:
Также нужно указать дистанцию, чтобы иллюстрация была видна только напротив своего текста. Для этого нужно вычислить высоту текстового блока. Самый простой способ — скачать плагин Page Rulers Redux для Google Chrome и измерить расстояние от нижней границы иллюстрации до нижней границы текста:
Получившееся число впишите в свойство Distance на панели настроек. В нашем случае это 830 пикселей.
В результате картинка будет привязана к тексту:
Как сделать плавную прокрутку на сайте
Привет, друзья. Сегодня поговорим о плавной прокрутке сайта. То есть не о скролле к якорю, при нажатии на кнопку или ссылку, а о плавной прокрутке при использовании колесика или ползунка.
Совсем коротенькая заметка, просто пришлось реализовать на одном из сайтов, и решил написать об этом в блог, пока готовлю более серьезную статью (виджет скидок), по просьбе одного из читателей. Артем, привет тебе. Я не забыл!
Конечно, многие пользуются браузерами, у которых и так настроена плавная прокрутка, многие используют специальное расширение для браузера, но не все. Давайте же добьемся плавности на большинстве устройств, с которых будут посещать ваш сайт.
Плагин для плавной прокрутки сайта
Для решения поставленной задачи я выбрал плагин Malihu-custom-scrollbar-plugin, так как у него очень много возможностей:
Конечно, для многих этот функционал может быть избыточным. Если вы просто хотите сгладить прокрутку колесиком, то в конце разберем совсем простое решение для этих целей.
Итак, самое время посмотреть демку. Автор уже приготовил отличный вариант:
Подключения плагина
Теперь скачайте плагин для плавной прокрутки, по ссылке выше, и подключите к сайту 2 файла.
Получится такая структура:
Главное помните, что все зависящие от jQuery плагины должны подключаться после самого jQuery.
После того как все подключили, нужно инициализировать скрипт:
И добавить в CSS несколько простых правил, чтобы прокрутка применилась к документу. В самом начале вашего файла стилей добавьте следующую разметку:
Это позволит убрать стандартную полосу прокрутки браузера и задать высоту, понятную скрипту. Не бойтесь, если подключаете к уже готовому сайту. В 99% случаев это никак не повлияет на вашу разметку.
Обратите внимание, что на этой странице около 50 опций для тонкой настройки плагина. Например, в исходнике я использую следующие:
Вот такой интересный плагин для плавной прокрутки сайта и других его элементов, который можно полностью кастомизировать под свой дизайн, писать свои темы и т.д.
Более простое решение для плавной прокрутки, если вам не нужны навороты
Если вам не нужны никакие дополнительные функции, кроме как плавная прокрутка при скролле колесика мыши, то воспользуйтесь плагином jQuery.scrollSpeed
Подключается точно так же как и первый, имеет всего 3 настройки и весит всего 2.6 килобайт:
Похожие публикации
6 комментариев
Максим, ничего не понял. Что не работает? В каком виде? Есть же рабочий исходник, скачайте и подстройте под свои нужды. Для этого же я их и выкладываю, чтобы был пример и легче было разобраться.