Блог

Главная - Вопросы по программированию - Скользящее по времени текстовое поле

Скользящее по времени текстовое поле

#javascript #html #css

#javascript #HTML #css

Вопрос:

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

На данный момент у меня просто простое (абсолютное) поле.

 .taskbox {
  width: 230px;
  padding: 15px;
  position: absolute;
  right: 25px;
  top: 25px;
  background-color: black;
  color: white;
  font-family: courier new;
  font-size: 20px;
} 
 <div class="taskbox">Evidently, the pandemic has taken a toll on the economy! You should find a way to financially stay afloat. Humans have something called 'stipends' to aide in a situation like this. We should <a href="a2_page_3.html">investigate</a>!</div>

Примечание: Не слишком уверен, что для этого потребуется JavaScript, но у меня есть уже существующие функции для элементов, не задействованных в моем вопросе. Если мой скрипт необходим, я более чем рад обновить свой пост.

Заранее спасибо за вашу помощь!

Комментарии:

1. Конечно, для этого не потребуется java, но для этого мог потребоваться javascript 😉

2. @CedricCholley изменился бы код, если бы ящик был расположен в другом месте? Например, у меня есть другая страница, на которой я хотел бы иметь такую же анимацию. Однако текстовое поле расположено в правом нижнем углу экрана.

3. это зависит от обстоятельств… если в конце новое поле будет иметь ту же left позицию, код может остаться прежним (верхняя / нижняя часть не имеет значения). Если left позиция изменилась, то вам нужно будет адаптировать значение в анимации. Это можно легко сделать с помощью переменных CSS

Ответ №1:

Это можно сделать с помощью CSS, только animation если вы можете указать продолжительность, а также задержку (в вашем случае x). Парадоксально, но для того, чтобы элемент скользил справа, его легче расположить с left помощью свойства. Вот так…

 .taskbox {
  width: 230px;
  padding: 15px;
  left: 100%;
  position: absolute;
  top: 25px;
  background-color: black;
  color: white;
  font-family: courier new;
  font-size: 20px;
  animation: slide-from-right .4s 2s forwards; /* x = 2s */
}

@keyframes slide-from-right {
  to {
    left: calc(100% - 230px - 30px - 25px);
    /* 100% = total width, 230px = element width, 30px = left and right padding, 25px = distance from right border */
  }
} 
 <div class="taskbox">Evidently, the pandemic has taken a toll on the economy! You should find a way to financially stay afloat. Humans have something called 'stipends' to aide in a situation like this. We should <a href="a2_page_3.html">investigate</a>!</div>

Ответ №2:

Вы могли бы анимировать transform: translate :

 .taskbox {
  width: 230px;
  padding: 15px;
  position: absolute;
  right: 25px;
  top: 25px;
  background-color: black;
  color: white;
  font-family: courier new;
  font-size: 20px;
  transform: translate3d(calc(100%   25px), 0, 0);
  animation: slide-in 0.5s 1s cubic-bezier(0.3, 1.3, 0.9, 1) forwards;
}

@keyframes slide-in {
  to {
    transform: translate3d(0, 0, 0);
  }
} 
 <div class="taskbox">Evidently, the pandemic has taken a toll on the economy! You should find a way to financially stay afloat. Humans have something called 'stipends' to aide in a situation like this. We should <a href="a2_page_3.html">investigate</a>!</div>

Если вам интересно, почему я использую translate3d , это запускает аппаратное ускорение. Ознакомьтесь с этой статьей, если вам интересно.