Анимация по вертикали - PullRequest
Новая
       6

Анимация по вертикали

0 голосов
/ 30 апреля 2018

Я делал краткое анимированное введение в игру «Единство», которую я делаю. Это в http://cutenesss.xyz/

Как вы видите на сайте, у меня есть куча текстов, которыми я управляю с помощью JavaScript.

Я управляю им: 

setTimeout(function() {
  $('.fly-in-text').removeClass('hidden');
}, 1000);

У меня есть такой класс: 

<ul class="fly-in-text hidden">
  <li>W</li>
  <li>E</li>
  <li>L</li>
  <li>C</li>
  <li>O</li>
  <li>M</li>
  <li>E</li>
</ul>

и скрыто как: 

.title.hidden li {
  opacity: 0;
}

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

Ответы [ 3 ]

0 голосов
/ 30 апреля 2018

Используйте CSS keyframe для преобразования позиции элемента Y в класс hidden.

Запустите фрагмент кода или отметьте эту ручку 

li {
  list-style: none;
}

.translate-y {
  animation: translateY 3s infinite;
}

@keyframes translateY {
  from {
    transform: translateY(200%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/css/bootstrap.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col">
      <ul class="fly-in-text translate-y">
        <li>W</li>
        <li>E</li>
        <li>L</li>
        <li>C</li>
        <li>O</li>
        <li>M</li>
        <li>E</li>
      </ul>
    </div>
    <div class="col">
      <ul class="fly-in-text translate-y-up d-flex">
        <li>W</li>
        <li>E</li>
        <li>L</li>
        <li>C</li>
        <li>O</li>
        <li>M</li>
        <li>E</li>
      </ul>
    </div>
  </div>
</div>

Для получения информации о ключевом кадре посетите css_reference

0 голосов
/ 30 апреля 2018

Вот подход с использованием jQuery: 

$(".fly-in-text").animate({
  marginTop: '0px',
  opacity: '1'
}, 4000);
.fly-in-text {
  list-style-type: none;
  width: 20px;
  margin-top: 200px;
  opacity: 0;
}

.fly-in-text li {
  /* Centered it's better */
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="fly-in-text">
  <div></div>
  <li>W</li>
  <li>E</li>
  <li>L</li>
  <li>C</li>
  <li>O</li>
  <li>M</li>
  <li>E</li>
</ul>

Надеюсь, это поможет.

0 голосов
/ 30 апреля 2018

если javascript не обязателен, вы можете использовать @keyframes для создания анимации, используя CSS. 

.fly-in-text {
  animation: slideUp 5s infinite;
  list-style-type: none;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
<ul class="fly-in-text">
  <li>W</li>
  <li>E</li>
  <li>L</li>
  <li>C</li>
  <li>O</li>
  <li>M</li>
  <li>E</li>
</ul>
...