Сменяющийся текст

Question

Всем привет! Мне надо сделать что-то типа Банера, на котором летит текст. Есть 5 текстов. Сначала первый "пролетает" 4 раза, потом второй, потом третий и т.д Саму анимацию делала в CSS, но не знаю, как сделать чтобы текст менялся. Понимаю, что надо использовать JS.Думала использовать слайдер, Но хотелось бы сделать чтоб это было "красиво". Может у вас будут какие-то идеи? Заранее всем спасибо за ответ!

Answer 1

Накидал такой вариант.. Количество повторений и скорость устанавливаются аргументами в вызове функции start(1,4) (где 1-это скорость, 4-повторы) число фраз не ограничено, берутся из массива frz

let frz = [
  "Я вдруг понял, что большинство людей не слушают. Они просто ждут своей очереди снова заговорить.",
  "Мертвец надёжно хранит тайну.",
  "Я всегда говорил: лучше просить прощения, чем разрешения…",
  "Самое главное, улыбайся и смейся — это признак уверенности."  
];

let b = document.getElementById("b");
let f = document.getElementById("f");
let count = 0;
let idx = 0;

// Кнопка и обработчик для остановки/запуска
let flag = false;
let btn = document.getElementById("btn");
btn.onclick = function(){
  flag = flag ? false : true;
  flag ? btn.innerHTML = 'Start' : [btn.innerHTML = 'Stop', start(1.3, 1)];
}
//Можно удалить

function start(speed,limit) {
  speed = speed || 1;//Скорость по умолчанию 1
  limit = limit || 4;//Лимит повторений по умолчанию 4

  function go(){
    let fr = f.getBoundingClientRect();
    let br = b.getBoundingClientRect();
    
    f.innerHTML = frz[idx];  
    f.style.marginLeft = fr.x - br.x - speed + "px";

    if(fr.right <= br.left) {
      let bm = parseInt(window.getComputedStyle(b).marginRight);
      count++;
      f.style.marginLeft = br.right - bm + "px";
    }
    if(count == limit){
      idx == frz.length-1 ? idx = 0 : idx++;
      count = 0;
    }
    if( !flag ) window.requestAnimationFrame(go);
  }
  
  window.requestAnimationFrame(go);
}

//Запустить анимацию
start(1.3, 1)//1.3-скорость, 1-количество повторений

#b{
  margin: 0 auto;
  width: 200px;
  height: 100px;
  background: linear-gradient(black, #3B3E5D, #7D5C7D, #3B3E5D, black);
  overflow: hidden;
  display: flex;
}
#f{
  white-space: nowrap;
  margin-left: 200px;
  align-self: center;
  font-size: 22px;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(2px 1px black);
}

<div id="b">
  <div id="f"></div>
</div>
<button type="button" id="btn">Stop</button>

БЛОГ НА HUSL

Сменяющийся текст

Ответы (1 шт):