Как сделать бегущую строку в Тильде, которая будет останавливаться по наведению
Модификация позволяет создавать бегущую строку из нескольких фраз в zero block в Тильде, установить на них ссылки, а при наведении мыши строка будет останавливаться.
Пример использования
Бегущая строка будет останавливаться только на десктопной версии сайта, так как в мобильных устройствах нет эффекта наведения.
Смотреть все модификации
Узнать как сделать такую же смену фона
Написать мне в телеграм
Предложить идею для модификации
Смотреть все модификации
Узнать как сделать такую же смену фона
Написать мне в телеграм
Предложить идею для модификации
Предложить идею для модификации
Опишите механику модификации, которой вам не хватает. Приложите ссылку, скриншот или видео. Возможно именно ваша идея будет реализована и добавлена следующей.
Инструкция
В zero block создаем текстовые элементы, назначаем им класс .running-line-1. Делаем им привязку к window container и располагаем через равное расстояние, например 20px. Назначаем им нужные ссылки.
Создаём копии текстовых элементов и размещаем их следом за ранее созданными с тем же шагом 20px. Это нужно для того, чтобы анимация бегущей строки повторялась непрерывно.
Измеряем шаг нашей анимации. Для этого Посмотрим на координаты по оси x для одинаковых текстовых элементов. Например: у меня 4 разных текстовых элемента. После создания их копий стало 8 текстовых элементов. Смотрим координаты x у первого и пятого элемента. У первого x=20px, а у пятого элемента x=1880px. Их Разница составляет 1860px. Это и есть шаг нашей анимации. Он нам пригодится дальше.
Копируем первый скрипт и вставляем его в блок T123. В нём указывается шаг и время анимации в милисекундах для каждого из разрешений.
Копируем второй скрипт и вставляем его в блок T123. В нём ничего менять не нужно.
Как сделать бегущую строку в тильде
Сделать 2 варианта бегущей строки из текста и 2 из картинок.
1) Строка, которая едет влево сама, независимо от скролла, от края до края сайта.
2) Строка, которая едет влево-вправо при скролле вниз-вверх, соответственно.
Строка должна расширяться на весь экран по ширине, без отступов по краям.
Настраиваться должна скорость движения, а для текстового варианта строки — чередование четных/нечетных «кусочков» строки оформлением текста — обычный/outline (ну или просто стиль для нечетных сделать).
В саму строку должен превращаться обычный текстовый блок и блок галереи, с привязкой по его ID.
Сделать опцию для автоматических строк — остановка при наведении курсора! И для текстов и для картинок.
Как сделать бегущую строку с иконками на Tilda без боли и страданий
В этом видео я делюсь с вами простым скриптом, который поможет создать бегущую строку из логотипов/картинок на Tilda. Скрипт реализован средствами JavaScript, HTML и CSS, используя простой синтаксис, который будет понятен всем браузерам. В примере изображения хранятся на сервисе DropBox, но вы можете использовать любой хостинг. Вы можете сказать мне «спасибо» на с помощью сервиса boosty https://boosty.to/ohmysite Ссылка на код: https://codepen.io/Max-Mitrofanov/pen/qBYzwrZ
Показать больше
Войдите , чтобы оставлять комментарии
Zero Block: пошаговая анимация
Посмотрите видеоурок о том, как работать с пошаговой анимацией в Zero Block или прочитайте подробную инструкцию ниже.
Внутри Zero Block есть два режима анимации:
1) Basic Animation — простая анимация. Это готовые, самые часто используемые эффекты, например, эффект появления (через прозрачность, снизу вверх, справа налево и т.д.), параллакс и фиксация. Их достаточно в 90% случаев.
2) Step-by-step Animation — пошаговая анимация. Позволяет реализовать яркие, креативные идеи по вашему сценарию.
Страница с примерами возможностей пошаговой анимации https://tilda.cc/ru/lp/step-by-step-animation/
Обзорная статья по основным возможностям
Статья о работе с контейнерами и созданию «резиновых» элементов
Cписок всех комбинаций для ускорения работы
Справка по простой анимации: фиксации, параллаксу и анимации появления
Справка по сложной триггерной анимации: настройка и примеры
Как автоматически импортировать макет из Figma в Zero Block
Определяем базовую структуру дизайна и ускоряем работу с макетом
Начало работы с пошаговой анимацией
Пошаговая анимация доступна в Zero Block — редакторе для профессиональных дизайнеров. Добавьте его на страницу из библиотеки блоков (в самом низу, после категории «Другое»). Или кликните на иконку Zero Block в меню быстрого добавления блоков внизу страницы.
Нажмите «Редактировать блок» в левом верхнем углу блока, чтобы перейти в режим редактирования.
Добавьте новый элемент, выделите его, откройте настройки, пролистайте до раздела Step by Step Animation и нажмите кнопку Add.
Создание пошаговой анимации отменит все настройки базовой анимации для элемента.
Выбор условия начала анимации
- Element on Screen — анимация начинается при появлении элемента на экране;
- Block on Screen — анимация начинается при появлении на экране всего текущего блока;
- On Scroll — анимация запускается и продолжается во время скролла;
- On Hover — анимация появляется при наведении на элемент;
- On Click — анимация начинается при клике на элемент.
У начала анимации есть дополнительные опции Start Trigger, Loop и Trigger Offset.
- Start Trigger — это то, к чему будет привязана анимация или что будет являться ее триггером. Есть выбор из трех областей — верхней границы (On Window Top), центра экрана (On Window Center) и нижней границы (On Window Bottom);
- Trigger Offset — это смещение начала анимации объекта относительно выбранного Window Top / Window Center / Window Bottom;
- Loop — это опция зацикливания анимации.
C помощью опции Test и кнопок Play Element / Play All можно проиграть анимацию этого элемента или всех элементов в блоке.
Добавление шагов анимации
Первый шаг, задан по умолчанию — это Start. Далее нужно добавлять шаги и на каждом шаге менять свойства элемента. Так элемент будет меняться.
Чтобы добавить шаг, нажмите на кнопку Add Step.
Между шагами можно переключаться. При этом синяя обводка элемента означает стандартное состояние, зеленая — редактирование шага.
Чтобы изменить начальное состояние объекта, например, чтобы объект в начале был невидим (значение Opacity равное нулю), нужно добавить первый шаг с этим состоянием и длиной (Duration) в 0 секунд.
У каждого шага есть набор свойств: Duration, Move, Scale, Opacity, Rotate, Easing и Delay.
Duration — длина анимации в секундах;
Move — координаты, куда передвигается элемент относительно начального расположения. Их можно задать как значениями, так и передвинуть элемент;
Scale — процент увеличения или уменьшения элемента к концу этого шага;
Opacity — значение прозрачности элемента к концу шага;
Rotate — поворот элемента в градусах к концу шага;
Easing — выбор эффекта выполнения анимации: Linear — это линейное выполнение анимации, easeIn, easeOut, easeInOut — это замедление в начале, конце или в начале и конце анимации, bounceFin — это небольшой отскок элемента в конце анимации;
Delay — задержка перед выполнением анимации.