mKotelnikov.ru
Оставьте заявку или свяжитесь со мной удобным способом
Оставить заявку
 
Оставить заявку

Как сделать бегущую строку в Тильде, которая будет останавливаться по наведению

Модификация позволяет создавать бегущую строку из нескольких фраз в zero block в Тильде, установить на них ссылки, а при наведении мыши строка будет останавливаться.
Смотреть пример

Пример использования

Бегущая строка будет останавливаться только на десктопной версии сайта, так как в мобильных устройствах нет эффекта наведения.
Смотреть все модификации
Узнать как сделать такую же смену фона
Написать мне в телеграм
Предложить идею для модификации
Смотреть все модификации
Узнать как сделать такую же смену фона
Написать мне в телеграм
Предложить идею для модификации

Инструкция 

1
В zero block создаем текстовые элементы, назначаем им класс .running-line-1. Делаем им привязку к window container и располагаем через равное расстояние, например 20px. Назначаем им нужные ссылки.
2
Создаём копии текстовых элементов и размещаем их следом за ранее созданными с тем же шагом 20px. Это нужно для того, чтобы анимация бегущей строки повторялась непрерывно.
3
Измеряем шаг нашей анимации. Для этого Посмотрим на координаты по оси x для одинаковых текстовых элементов. Например: у меня 4 разных текстовых элемента. После создания их копий стало 8 текстовых элементов. Смотрим координаты x у первого и пятого элемента. У первого x=20px, а у пятого элемента x=1880px. Их Разница составляет 1860px. Это и есть шаг нашей анимации. Он нам пригодится дальше.
4
Копируем первый скрипт и вставляем его в блок T123. В нём указывается шаг и время анимации в милисекундах для каждого из разрешений.

<!-- https://mkotelnikov.ru/script/running-text -->
<script>
    $(document).ready(() => {
        running_line.f_init(
            // Селектор (. - для класса, # - для ID)
            '.running-line-1',
            // Шаг цикла (от мобильного до десктопа)
            [
                -1860, //320+
                -1860, //480+
                -1860, //640+
                -1860, //960+
                -1860 //1200
            ],
            // Время цикла (от мобильного до десктопа)
            [
                40000, //320+
                40000, //480+
                40000, //640+
                40000, //960+
                40000 //1200
            ]);
    });
</script>
5
Копируем второй скрипт и вставляем его в блок T123. В нём ничего менять не нужно.

<!-- https://mkotelnikov.ru/script/running-text -->
<script>
    var running_line = {
        data: {
            timeStep: 10,
            realX: 0,
            pause: false,
            timer: null,
            selector: null,
            time: null,
            deltaX: null,
            elements: null,
            width_type: 4,
            width_updated: false,
        },
        f_init: function (selector = '.running-line',
            deltaX = [],
            time = []) {
            this.data.selector = selector.trim();
            this.data.time = time;
            this.data.deltaX = deltaX;
            this.data.elements = document.querySelectorAll(this.data.selector + " .tn-atom");

            // Слушатели
            this.f_listeners();

            // Первая итерация
            this.f_iterate();
            // Итерации по времени
            this.data.timer = setInterval(
                () => {
                    this.f_iterate();
                }, this.data.timeStep
            );
        },
        f_iterate: function () {
            // Получение ширины экрана и установка типа
            let w = $(window).width();
            if (w >= 1200) {
                if (this.data.width_type != 4) {
                    this.data.width_updated = false;
                    width_type = 4;
                    this.f_listeners();
                }
            } else if (w >= 960) {
                if (this.data.width_type != 3) {
                    this.data.width_updated = false;
                    width_type = 3;
                    this.f_listeners();
                }
            } else if (w >= 640) {
                if (this.data.width_type != 2) {
                    this.data.width_updated = false;
                    width_type = 2;
                    this.f_listeners();
                }
            } else if (w >= 480) {
                if (this.data.width_type != 1) {
                    this.data.width_updated = false;
                    width_type = 1;
                    this.f_listeners();
                }
            } else {
                if (this.data.width_type != 0) {
                    this.data.width_updated = false;
                    width_type = 0;
                    this.f_listeners();
                }
            }

            // Пауза, если наведена мышь
            if (running_line.data.pause && this.data.width_updated) return;

            this.data.width_updated = true;

            if (!running_line.data.pause) {
                // Рассчёт сдвига
                this.data.realX = (this.data.realX + (this.data.deltaX[this.data.width_type] * this.data.timeStep / this.data.time[this.data.width_type])) % this.data.deltaX[this.data.width_type];
                // Установка сдвига для каждого элемента
                this.data.elements.forEach((element) => {
                    element.style.transform = "translateX(" + this.data.realX + "px)"
                });
            }


        },
        f_listeners: function () {
            this.data.elements.forEach((element) => {
                element.removeEventListener('mouseover', this.f_over);
                element.removeEventListener('mouseout', this.f_out);
                element.addEventListener('mouseover', this.f_over);
                element.addEventListener('mouseout', this.f_out);
            });
        },
        f_over: function () {
            running_line.data.pause = true;
        },
        f_out: function () {
            running_line.data.pause = false;
        },
    };
</script>
6
Публикуем страницу.
150 ₽
300 ₽
50 ₽

Было полезно?

Можете отблагодарить за модификацию. Это даёт стимул дальше собирать полезный контент.