Как мне разместить блок текста после моей анимации с прокруткой CSS слов? - PullRequest
Новая
       85

Как мне разместить блок текста после моей анимации с прокруткой CSS слов?

1 голос
/ 13 июля 2020

Я хочу создать вращающуюся текстовую анимацию с надписью «THE ___ABILITY LAB» с чередованием таких слов, как «адаптируемость, доступность, возможность трудоустройства» и т. Д. c.

Я следовал руководству, которое позволило мне для создания анимации с прокруткой текста, но только в конце предложения, что позволяет мне создавать текст, подобный «THE адаптировать», но у меня возникают сложности с появлением части «ABILITY LAB» после. Учитывая, что слова «адаптировать, позволить, нанять» имеют разное количество символов, я хотел бы, чтобы они отображались на постоянном расстоянии между оставшейся «лабораторией способностей» и, конечно, не перекрывали какой-либо текст.

Ниже , это мой код HTML и CSS. Спасибо! 

body
{
  margin: 0;
  padding: 0;
  background: #fff;
}
.box
{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 3em;
  font-family: sans-serif;
  color: #black;
  margin-left: 50px;
  width: calc(100% - 50px);
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
}
.word
{
  display: inline-block;
  color: grey;
}
.word span
{
  position: absolute;
  top: 0;
  overflow: hidden;
  animation: animate 10s linear infinite;
  opacity: 0;
}

@keyframes animate
{
  0%
  {
    opacity: 0;
    transform: translateY(-50px);
  }
  2%
  {
    opacity: 1;
    transform: translateY(0px);
  }
  18%
  {
    opacity: 1;
    transform: translateY(0px);
  }
  20%
  {
    opacity: 0;
    transform: translateY(0px);
  }
  100%
  {
    opacity: 0;
    transform: translateY(0px);
  }
}
.word span:nth-child(1)
{
  animation-delay: 0s;
}
.word span:nth-child(2)
{
  animation-delay: 2s;
}
.word span:nth-child(3)
{
  animation-delay: 4s;
}
.word span:nth-child(4)
{
  animation-delay: 6s;
}
.word span:nth-child(5)
{
  animation-delay: 8s;
}
<!docctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Rotating Word</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="box">
      THE
      <div class="word">
        <span>adapt </span>
        <span>explor</span>
        <span>employ</span>
      </div>
      ABILITY LAB
    </div>
  </body>
</html>

1 Ответ

0 голосов
/ 13 июля 2020

Если вы хотите, чтобы расстояние между «THE» и «ABILITY LAB» всегда было постоянным, просто укажите .word div a width.

Пример: https://jsfiddle.net/js50aLph/.

Выравнивание текста по правому краю

Чтобы выровнять текст переменной по правому краю (например, «адаптировать», «позволить», «нанять») так, чтобы между ним и «AFFORD» не было пробела, вы можете попробуйте следующее:

Сначала создайте .word position: relative, чтобы мы могли расположить текст относительно него. 

.word {
  position: relative;
  /* ... */
}

Во-вторых, расположите элементы <span> вправо и внизу: 

.word span {
  right: 0;
  bottom: 0; /* After adding this, you should remove top: 0 */
  /* ... */
}

bottom: 0 необходим, потому что .word не имеет высоты. Таким образом, позиционирование <span> относительно верхнего слова приведет к его смещению.

Наконец, с этим решением вы, вероятно, теперь заметите, что текст неверен по вертикали. Чтобы решить эту проблему, просто настройте свойство bottom элемента <span>. Например: 

.word span {
  /* ... */
  bottom: -12px;
}

Обновленный пример: https://jsfiddle.net/js50aLph/1/.

Обновленный пример (с правильным вертикальным смещением): https://jsfiddle.net/j2x7bkag/.

...