Меню

Ускорение бегущей строки на скролл

Модификаторы
Модификация позволяет ускорить бегущую строку при скролле страницы в нужном направлении
Описание
Инструкция по подключению
С помощью блока T123 подключаем скрипт для нужного направления
Шаг 1
<!--Сдвигаем текст влево-->

<style>
    .text-to-left-side .tn-atom {
        position: relative;
    }
</style>


<script>
if ($(window).width() > 768) {
$(window).on("load resize scroll", function() {
  $(".text-to-left-side").each(function() {
    var windowTop = $(window).scrollTop();
    var elementTop = $(this).offset().top;
    var leftPosition = windowTop * 500 / elementTop;
      $(this)
        .find(".tn-atom")
        .css({ right: leftPosition });
  });
});
}
</script>
<!--Сдвигаем текст вправо-->

<style>
    .text-to-right-side .tn-atom {
        position: relative;
    }
</style>

<script>
if ($(window).width() > 768) {
$(window).on("load resize scroll", function() {
  $(".text-to-right-side").each(function() {
    var windowTop = $(window).scrollTop();
    var elementTop = $(this).offset().top;
    var leftPosition = windowTop * 500 / elementTop;
      $(this)
        .find(".tn-atom")
        .css({ left: leftPosition });
  });
});
}
</script>
Создаём необходимый текст и задаём ему класс на выбор:
text-to-left-side - ускорение текста влево;
text-to-right-side - ускорение текста вправо.
Шаг 2
Задаём тексту необходимую анимацию, через "step by step animation". Подробная настройка есть в видео выше
Шаг 3
В скрипте можно менять скорость ускорения при скролле страницы. Увеличивая значение 500 или уменьшая его можно регулировать саму скорость
Шаг 4
Сохраняем и опубликовываем страницу
Шаг 5
Другие модификации
Подсказки при наведении курсора
Модификаторы
3D галерея
Модификаторы
Универсальный курсор
Модификаторы
Открой неограниченный доступ к библиотеке
Техническая поддержка в течение 12 часов
Платный доступ
Доступ к базовым и уникальным модификациям
Доступ к базовым и углубленым занятиям
2 уникальные модификации в неделю
350 руб. / в месяц
После оплаты подписки ты получишь доступ не только к этой модификации, но и ко всему платному контенту на платформе
Made on
Tilda