0

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

Сайт с анимацией выделения текста в слайдере:
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. Если некорректно описал или нужно больше информации, то пж пишите в комментарии, заранее всем спасибо :З

1
  • @ᅠhᅠ Не совсем, нужно перекрашивать текст по символу, мол "Как будто маркером закрашиваешь (С)" на codepen скинул пример же :) codepen.io/AndreyMyP/pen/MWKgZaB 2 июн 2020 в 12:57

2 ответа 2

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>

2
  • Вариант с clip-path возможно может сработать, попробую, если зайдет, тыкну ответом, спасибо :З (хотя он прям очень вебкитный caniuse.com/#search=clip-path) 2 июн 2020 в 23:36
  • Еее все работает, спасибо :З 3 июн 2020 в 23:08
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

1
  • Вообще баг никуда не ушел, при условии что выделяемая фраза переноситься на новую строку, все ломается: codepen.io/AndreyMyP/pen/abdoeJg 2 июн 2020 в 14:28

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.