Vertical sliding text animation using Javascript

  html, javascript, jquery-animate

I would like to obtain an animation using Javascript similar to the one in the booking.com website, where words are automatically replaced by vertically sliding, within a given interval between each swap. For now I was able to automatically replace words with a fade in / fade out animation, using the code below. How can I edit the function below in order to obtain the vertical slide effect like in the booking.com example, preferably using Javascript?

<script>

  var words = ["Second", "Third", "Fourth", "Fifth"];
  var index = 0;

  $(function() {
    setInterval(function() {
      $('#header-text-change').fadeOut(500, function() {
        $(this).text(words[index++]).fadeIn(500);
        if (index === words.length)
          index = 0
      });
    }, 1400);
  });
</script>

<body>
  ...
  <span id="header-text-change">First</span></h1>
  ...
</body>

Source: Ask Javascript Questions

LEAVE A COMMENT