Блог

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

Приложение

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

Решаемая проблема. 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";
  }