Вертикальная анимация JavaScript

Я делаю короткое анимированное введение в свою игру на Unity. Это на 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, как я могу заставить его подниматься вертикально после определенного интервала? Как и вводный текст «Звездных войн», но не желтый и угловатый, он просто поднимается вверх. Спасибо, что прочитали это :)

javascript html css-animations

30.04.2018 12:08

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 3

если 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>

30.04.2018 12:24

Используйте 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

30.04.2018 12:39

Вот подход с использованием 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>

Я надеюсь, что это помогает.

30.04.2018 12:51

Другие вопросы по теме

Javascript: определить, является ли браузер IE, затем скрыть HTML

Firefox и Chrome: различия и сходства интерпретаторов JavaScript

Время типа ввода с более чем 24-часовыми вариантами

Вызов различных функций изнутри и вне div

Вызов Ajax устанавливает ответ в div с определенными тегами

Отображение данных выборки в динамических полях

Таблица-ячейка имеет разную высоту на хроме, если содержимое изображения имеет высоту в десятичных дробях

Как получить html-файл с веб-сайта и получить данные между определенными тегами с помощью java

Эффект Parallax Scrolling с опасным свайпером

Столбец суммы в динамической таблице

Вертикальная анимация JavaScript

Ответы 3

Другие вопросы по теме

Похожие вопросы