Как сделать подобную анимацию текста?

Question

Сделал анимацию для выделения одного слова в слайдере (ссылка ниже)
позднее попросили сделать возможность выделение множества слов
( на что я не рассчитывал и поэтому на моб. устройствах анимация плывет )
уже какой день не могу сообразить как именно сделать данную анимацию :(

Сайт с анимацией выделения текста в слайдере:
https://comfort.wmaster.pro/

Сейчас работает по принципу: (но на JQuery)
https://codepen.io/AndreyMyP/pen/MWKgZaB

<div class="lastWord">
  <p class="lastWord__val">комнаты</p>
  <p class="lastWord__bold">комнаты</p>
</div>

P.S. Если некорректно описал или нужно больше информации, то пж пишите в комментарии, заранее всем спасибо :З

Answer 1

Можно выделять слова и автоматически их заменять. Как-то так:

document.querySelectorAll(".lastWord").forEach(element => {
  const text = element.innerText.trim();

  element.innerHTML = `
    <p class="lastWord__val">${text}</p>
    <p class="lastWord__bold">${text}</p>
  `;

  setTimeout(() => {
    element.querySelector(".lastWord__bold").classList.add("lastWord__bold_active");
  }, 1500);
});

* {
  margin: 0;
  padding: 0;
}

.lastWord {
  display: inline-block;
  position: relative;
  font-size: 2rem;
}

.lastWord__bold {
  position: absolute;
  top: 0;
  width: 0;
  color: white;
  overflow: hidden;
  background: #333;
  transition-duration: 6s;
  white-space: nowrap;
}

.lastWord__bold_active {
  width: 100%;
}

Lorem <span class="lastWord">ipsum dolor</span> sit amet <span class="lastWord">hello</span>.

Так же там был маленький баг, я добавил white-space: nowrap

Answer 2

Вариант с clip-path, но он не работает в ie.

span {
  position: relative;
  display: inline-flex;
}

span::after {
  content: '';
  color: white;

  position: absolute;

  clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
  animation: select forwards;
  
  background-color: lightblue;
}

span:nth-child(1)::after {
  content: 'Lorem';
  animation-duration: 1s;
}

span:nth-child(2)::after {
  content: 'consectetur adipisicing elit';
  animation-duration: 1.5s;
}

span:nth-child(3)::after {
  content: 'Temporibus, ipsum, minima!';
  animation-duration: 2.2s;
}


@keyframes select {
  to {clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);}
}

<p>
  <span>Lorem</span> ipsum dolor sit amet, <span>consectetur adipisicing elit</span>. Nemo, eveniet delectus quis commodi cumque voluptatem, quam ratione. <span>Temporibus, ipsum, minima!</span>
</p>

Ну а это вроде везде должно работать.

div > div {
  position: relative;
  display: inline-flex;
}

div > div > span:nth-child(2) {
  position: absolute;
  width: 0;
  background-color: lightblue;
  white-space: nowrap;
  color: white;
  overflow: hidden;
  animation: select 2s 0.5s forwards;
}

@keyframes select {
  to { width: 100%; }
}

<div>
  <div>
    <span>Lorem</span>
    <span>Lorem</span>
  </div>
  ipsum dolor sit amet,
  <div>
    <span>consectetur adipisicing elit.</span>
    <span>consectetur adipisicing elit.</span>
  </div>
  Nemo, eveniet delectus quis commodi cumque voluptatem,
  quam ratione.
  <div>
    <span>Temporibus, ipsum, minima!</span>
    <span>Temporibus, ipsum, minima!</span>
  </div>
</div>

БЛОГ НА HUSL

Как сделать подобную анимацию текста?

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