CODEWITHSUNDEEP
javascripthtmlcss-animations
Sam Brown
Sam Brown

Reputation: 1

Animating javascript vertically

I have been making a short animated introduction to a unity game I am making. It is up at http://cutenesss.xyz/

You can see from the website, I have a bunch of text floating in which I control with JavaScript.

I control it by:

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

I have a class like this:

<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>

and hidden as:

.title.hidden li {
  opacity: 0;
}

After I remove the class hidden, how can I make it rise vertically after an interval? Like the star wars introduction text, but not yellow and angled, it just rises upwards. Thanks for reading this :)

Upvotes: 0

Views: 81

Answers (3)

Takit Isy
Takit Isy

Reputation: 10081

Here is an approach using 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>

I hope it helps.

Upvotes: 0

mahan
mahan

Reputation: 14975

Use the CSS keyframe to transform the Y position of the element with the hidden class.

Run the code snippet or check this pen

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>

For information about keyframe, visit css_reference

Upvotes: 0

vikscool
vikscool

Reputation: 1313

if javascript is not mandatory you can use the @keyframes to create your animation using just 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>

Upvotes: 1

Related Questions