Синхронизировать CSS-перевод прокручиваемого текста с одинаковой скоростью (но с разной продолжительностью)

Я подготовил приложение StackBlitz (угловое), чтобы продемонстрировать свою проблему.

Как видите, тексты движутся с разной скоростью из-за разной длины текста. Я хотел бы динамически устанавливать продолжительность, чтобы все текстовые анимации имели одинаковую скорость прокрутки. В моем текущем расчете чего-то не хватает (или, возможно, нет?), но мне трудно понять это. Это возможно?

css angular css-animations

22.12.2020 11:25

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Решил это. GetDuration теперь выглядит так:

getDuration(el: any) {
    const scrollInterval = 25;
    const scrollSpacePx = 1;
    const speed = scrollSpacePx / scrollInterval;
    const durationMs = (el.clientWidth + el.parentElement.clientWidth) / speed;
    const durationSec = durationMs / 1000;

    return durationSec.toString() + "s";
  }

22.12.2020 14:04

Другие вопросы по теме

Base64 в качестве источника фонового изображения вызывает заикание и работает медленно

Mat-table не заполняет данные, поступающие из http-запроса

Ngx-cookie удаляется, когда ссылка открывается на новой вкладке в приложении Angular

Как я могу поместить два ngFor в один div

Как преобразовать возврат данных из API в json в Angular?

Как правильно сохранить параметры после возврата?

Iframe не работает в угловом редакторе kolkov

Как обновить страницу при изменении URL-адреса маршрутизации в angular

Фильтр() в Angular2

Защита маршрута не работает при возврате true

Синхронизировать CSS-перевод прокручиваемого текста с одинаковой скоростью (но с разной продолжительностью)

Ответы 1

Другие вопросы по теме

Похожие вопросы