UP TITLE
Кнопка с бегущей строкой в зеро блоке Тильды
Введение
Если вы задумывались о способах улучшения пользовательского опыта на вашем Tilda сайте, то, вероятно, сталкивались с идеей добавления анимации к элементам интерфейса. Один из эффективных методов – кнопка с бегущей строкой в зеро блоке, которая привлекает внимание и создает интерактивность на странице. В этом гайде мы расскажем, как за пару кликов создать бегущую строку внутри кнопок, созданных в tilda zero block.
Как создать кнопку с бегущей строкой в зеро блоке тильды. Шаг за шагом
  1. Создайте зеро блок или откройте уже существующий
  2. Нажмите на кнопку «+» и выберите «Add Button» (таких кнопок с бегущей строкой на странице может быть неограниченное количество)
  3. Введите внутри кнопки длинный текст
  4. ВАЖНО! Бегущая строка добавится во все кнопки (созданные в зеро блоках), в которых количество слов больше, чем 3. Если в кнопке одно, два или три слова, то бегущей строки в ней не будет
  5. После всех блоков на странице создайте html блок «Т123»
  6. Нажмите на кнопку «Контент» и скопируйте в него код тильда модификации (модификацию найдете в конце раздела)
  7. В коде вы можете регулировать скорость движения бегущей строки в кнопках
  8. Сохраните изменения и опубликуйте страницу
<style>
    .tn-atom:not([field]) {
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
    }
    .tn-atom > span {
        display: inline-block;
        animation: running-text 4s linear infinite; /* Скорость движения текста в секундах */
    }

    @keyframes running-text {
        0% { transform: translateX(100%); }
        100% { transform: translateX(-100%); }
    }
</style>

<script>
var elements = document.querySelectorAll('.tn-atom:not([field])');elements.forEach(function(element) {var words = element.textContent.trim().split(/\s+/);if (words.length > 3) {var span = document.createElement('span');span.textContent = element.textContent;element.textContent = '';element.appendChild(span);}});
</script>
Вывод
Кнопка с бегущей строкой в зеро блоке может быть мощным инструментом для улучшения пользовательского опыта и увеличения конверсии на вашем веб-сайте. Правильно примененная анимация может сделать ваш контент более привлекательным и интерактивным для пользователей.
Часто задаваемые вопросы
  1. Какие типы анимаций можно использовать для кнопки с бегущей строкой? Возможности ограничены только вашей фантазией, но популярными вариантами являются движение по горизонтали или вертикали, изменение цвета или размера кнопки.
  2. Влияет ли использование кнопки с бегущей строкой на скорость загрузки сайта? Если анимация сделана правильно и не перегружает страницу, то ее влияние на скорость загрузки будет минимальным.
  3. Как определить эффективность кнопки с бегущей строкой на моем сайте? Используйте аналитику, чтобы отслеживать количество кликов на кнопку, конверсию и поведение пользователей после ее активации.
  • Если вы хотите улучшить свой веб-сайт и привлечь больше внимания к важной информации, кнопка с бегущей строкой может быть идеальным решением. Попробуйте использовать этот эффект на вашем сайте и увидите, как он может повысить эффективность вашего контента.

© Mark Lungrin
Made on
Tilda