title: Javascript Text Rotate
body: <p>Hello guys it's been bugging me all night. I've been trying to get together a word rotate feature that decreases in speed and then eventually stops. Think of it like a word roulette. So i have the words stored in an array and it looks over the words and displays them. Now, i need to decelerate the speed and slowly make it stop and a random lettter, how would i go about this ?</p>
  
  <pre><code>&lt;?php 
  
  
  
      $json=file_get_contents('http://ddragon.leagueoflegends.com/cdn/5.18.1/data/en_US/champion.json');
  $champions = json_decode($json);
  ?&gt;
  
  &lt;?php
  
  $championsArray = array();
  foreach($champions-&gt;data as $champion){
    $championsArray[] = $champion-&gt;id;
  }
  shuffle($championsArray);
  $speed = 1000;
  $count = count($championsArray);
  var_dump($championsArray);
  ?&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html lang="en" class="demo1 no-js"&gt;
    &lt;head&gt;
      &lt;meta charset="UTF-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; 
      &lt;title&gt;jQuery Super Simple Text Rotator Demo 1: Default Settings&lt;/title&gt;
      &lt;meta name="description" content="Rotating text is a very simple idea where you can add more content to a text area without consuming much space by rotating an individual word with a collection of others" /&gt;
      &lt;meta name="keywords" content="jquery text rotator, css text rotator, rotate text, inline text rotator" /&gt;
      &lt;meta name="author" content="Author for Onextrapixel" /&gt;
      &lt;link rel="shortcut icon" href="../file/favicon.gif"&gt; 
      &lt;link rel="stylesheet" type="text/css" href="css/default.css" /&gt;
  
      &lt;!-- Edit Below --&gt;
      &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
        &lt;link rel="stylesheet" href="jquery.wordrotator.css"&gt;
        &lt;script src="jquery.wordrotator.js"&gt;&lt;/script&gt;
  
    &lt;/head&gt;
    &lt;body class="demo1"&gt;
      &lt;div class="container"&gt;
  
  &lt;p&gt;&lt;span id="myWords"&gt;&lt;/span&gt;&lt;/p&gt;
  
        &lt;div class="main"&gt;
  
           &lt;a href="#" onclick="erm()"&gt;Go!&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;&lt;!-- Container --&gt;
  
  &lt;script type="text/javascript"&gt;
  
  
  function eventFire(el, etype){
    if (el.fireEvent) {
      el.fireEvent('on' + etype);
    } else {
      var evObj = document.createEvent('Events');
      evObj.initEvent(etype, true, false);
      el.dispatchEvent(evObj);
    }
  }
  
  
     function erm() {
      var cont = $("#myWords");
  
      $(function () {
          $("#myWords").wordsrotator({
            randomize: true,  
            stopOnHover: true,       //stop animation on hover
            words:   ['Heimerdinger','Ezreal','Skarner','Nunu','Kennen','Lulu','Morgana','Sejuani','Draven','Nocturne','KogMaw','Jinx','Khazix','Cassiopeia','Fiora','Maokai','Zac','Quinn','Vladimir','RekSai','LeeSin','TwistedFate','MissFortune','Shaco','Vayne','Sivir','Urgot','Nautilus','Annie','Fizz','Janna','Irelia','Karthus','Trundle','Jax','Graves','Leona','Rengar','Amumu','Malzahar','TahmKench','MasterYi','Twitch','Rumble','Nidalee','Shyvana','Veigar','Singed','Riven','Leblanc','Katarina','Azir','Viktor','Poppy','Ahri','Yorick','Aatrox','Brand','Tryndamere','DrMundo','Hecarim','Braum','Nasus','Pantheon','Elise','Velkoz','Swain','Darius','Kayle','Thresh','Nami','Ekko','Alistar','Galio','Warwick','Orianna','Sona','Lux','Ryze','Jayce','Kassadin','Volibear','Blitzcrank','Gangplank','Karma','XinZhao','Ziggs','Malphite','Tristana','Soraka','Anivia','Xerath','Renekton','Shen','Lissandra','Ashe','Mordekaiser','Talon','Zilean','JarvanIV','Rammus','Yasuo','Vi','Bard','Sion','Udyr','MonkeyKing','Akali','Diana','Varus','Kalista','Evelynn','Teemo','Gnar','Garen','Taric','FiddleSticks','Chogath','Zed','Lucian','Caitlyn','Corki','Zyra','Syndra','Gragas','Olaf']
  
  
          });
  
      });
      eventFire(document.getElementById('myWords'), 'click');
  
    }
  
  &lt;/script&gt;
  
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Can anyone figure out a solution for this?</p>