Создать эффект бегущий строки заголовков в разные стороны на Tilda
Сайт уже готовый, просто понравилась строка, хотел бы применить себе.
Пример, как тут, нашел у одно из специалистов по Tilda тут на Freelnacehunt
1 день 1234 UAH
1 день 1234 UAH
Добрый день, Антон.
Обращайтесь сделаю. Цена от фонаря )
Готов обсудить задачу, сроки, бюджет.
Профиль на Тильда Экспертс https://experts.tilda.cc/nick_expert
Обращайтесь.
1 день 300 UAH
1 день 300 UAH
Здравствуйте, Антон!
Готова реализовать бегущую строку в разные стороны.
Покажите свой сайт, какой текст должен быть в строке?
➡️ Примеры моих работ: https://www.palmeschool.com/ru, http://kiev-banket.tilda.ws/landing, http://kuka.robots.tilda.ws/, http://svarka.robots.tilda.ws/, http://new.school.tilda.ws/, https://termo-infrared.ru/, http://project1013364.tilda.ws
1 день 200 UAH
1 день 200 UAH
Добрый день!
Меня зовут Дима
UX/UI designer | Web developer
Dribbble: Dribbble
Time and project: Notion, Agile, Scrum, Jira, Trello, Harvest.
App skills: Sketch, Figma, XD, Photoshop, After Effects, Cinema4D, Blender, Invision, Framer, Marvel, Flinto, Tilda, Readymag.
Developers skills: HTML/CSS, JavaScript/jQuery, WordPress/Woocommerce, Webflow
7 лет опыта
…
Немного о том что я делаю:
Живя в эпоху цифровых технологий, опыт иногда может быть совершенно несвязанным. Вот почему мои разработки, основанные на опыте, я всегда рад решать сложные задачи для бизнеса и создавать простые решения для Вас и Ваших клиентов.
1 день 300 UAH
1 день 300 UAH
Здравствуйте, Антон!
Сделаю.
8 лет опыта в сфере дизайна.
Сертифицированный специалист по дизайну сайтов на Тильда.
Сертификат в профиле.
Есть масса отзывов на других сайтах фриланса.
Портфолио в профиле: Freelancehunt
Мой сайт на Тильда: https://bbeautybranding.com/
https://mastclean.com.ua/
… Обращайтесь!
1 день 300 UAH
1 день 300 UAH
Здравствуйте!
Ознакомилась с заданием, могу приступить немедленно к выполнению.
Гарантирую качественно сделанную работу.
Работаю в Photoshop, Figma, Illustrator, Tilda.
Портфолио Behance
1 день 200 UAH
1 день 200 UAH
Здравствуйте, Антон!
Готова выполнить.
Вот как раз на днях делала эту бегущую строку.
Портфолио: Freelancehunt
2 дня 200 UAH
2 дня 200 UAH
Добрый день Антон. Готов сделать для вас бегущаю строку на тильде. Есть опыт.
Уже сделала немало сайтов на тильда. 4 из моих работ попали в раздел madeontilda
Стоимость обсудим после того когда пойму какой объем работы.
Более конктерная цена после обсуждений.
http://bocharovalex.tilda.ws
Связь
telegram bocharovalex
1 день 300 UAH
1 день 300 UAH
Доброго времени суток, Антон! Меня зовут Анатолий Грицюк. Я веб-дизайнер и специалист по созданию лендингов, свободный интернет-маркетолог (продвижение сообществ и таргетинг в ВК, контекстная реклама, аналитика), профессиональный рерайтер и копирайтер.
Создаю сайты на Тильда с помощью профессионального редактора Zero Block и ряда шаблонных элементов. Это могут быть одностраничные сайты визитки для бизнеса, блоги, портфолио, события, мероприятия, небольшие интернет-магазины. Сам готовлю тексты, подбираю и обрабатываю фото и видео материалы. В копирайтинге с 2014 года, опыт по созданию сайтов под ключ более года.
Выполню вашу задачу — сделаю необходимый Вам эффект бегущей строки на Тильда.
Примеры моих работ смотрите в портфолио на этой бирже или пишите в личку — скину ссылки них.
Обращайтесь! Буду рад дальнейшему сотрудничеству.
Обновить ставку
1 день 1000 UAH
1 день 1000 UAH
Здравствуйте !
Меня зовут Владислав Крамаренко.
Я занимаюсь разработкой сайтов, баннеров, листовок, буклетов, брошюр, презентаций и оформлением соц. сетей. ✅
Опыт работы 3 года.
ВНИМАНИЕ. ��
Моё портфолио и отзывы на странице FREELANCE RU: ⏬
https://freelance.ru/kram170290
… Уникальный дизайн, верстка макетов: ��
— https://arma-da.ru
— https://astpride.ru
— http://dss-agency.ru
— http://luga-zemli.spb.ru
— https://futurist1.webdeity.ru
— https://comfort-black-sea.ru
— http://zhk-life-lesnaya-dom.ru
— http://www.smokejumper.ru/#slide7
— http://d41020.hostru03.fornex.org/lemongras/
Сайты сделаны на Тильда:
— http://чистая-польза.рф
— http://rieltgroup.ru
— https://www.inviko.co
— http://semitresa.com
— http://eva-eyelashes.ru/page7808222.html
Давайте более предметно пообщаемся и приступим
к проекту.
Гарантирую Вам ответственность и свежесть мысли.
Уверен, что результат Вам понравится и мы будем с вами сотрудничать на постоянной основе.
С уважением, Владислав!
Как сделать бегущую строку в тильде
Сделать 2 варианта бегущей строки из текста и 2 из картинок.
1) Строка, которая едет влево сама, независимо от скролла, от края до края сайта.
2) Строка, которая едет влево-вправо при скролле вниз-вверх, соответственно.
Строка должна расширяться на весь экран по ширине, без отступов по краям.
Настраиваться должна скорость движения, а для текстового варианта строки — чередование четных/нечетных «кусочков» строки оформлением текста — обычный/outline (ну или просто стиль для нечетных сделать).
В саму строку должен превращаться обычный текстовый блок и блок галереи, с привязкой по его ID.
Сделать опцию для автоматических строк — остановка при наведении курсора! И для текстов и для картинок.
Как сделать бегущую строку в Тильде, которая будет останавливаться по наведению
Модификация позволяет создавать бегущую строку из нескольких фраз в zero block в Тильде, установить на них ссылки, а при наведении мыши строка будет останавливаться.
Пример использования
Бегущая строка будет останавливаться только на десктопной версии сайта, так как в мобильных устройствах нет эффекта наведения.
Смотреть все модификации
Узнать как сделать такую же смену фона
Написать мне в телеграм
Предложить идею для модификации
Смотреть все модификации
Узнать как сделать такую же смену фона
Написать мне в телеграм
Предложить идею для модификации
Предложить идею для модификации
Опишите механику модификации, которой вам не хватает. Приложите ссылку, скриншот или видео. Возможно именно ваша идея будет реализована и добавлена следующей.
Инструкция
В zero block создаем текстовые элементы, назначаем им класс .running-line-1. Делаем им привязку к window container и располагаем через равное расстояние, например 20px. Назначаем им нужные ссылки.
Создаём копии текстовых элементов и размещаем их следом за ранее созданными с тем же шагом 20px. Это нужно для того, чтобы анимация бегущей строки повторялась непрерывно.
Измеряем шаг нашей анимации. Для этого Посмотрим на координаты по оси x для одинаковых текстовых элементов. Например: у меня 4 разных текстовых элемента. После создания их копий стало 8 текстовых элементов. Смотрим координаты x у первого и пятого элемента. У первого x=20px, а у пятого элемента x=1880px. Их Разница составляет 1860px. Это и есть шаг нашей анимации. Он нам пригодится дальше.
Копируем первый скрипт и вставляем его в блок T123. В нём указывается шаг и время анимации в милисекундах для каждого из разрешений.
Копируем второй скрипт и вставляем его в блок T123. В нём ничего менять не нужно.
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 — задержка перед выполнением анимации.