We Keep Coding

How to run animation every time onClick in React?

I want an animation that runs on every click.
However, it runs only the first time and not after the second click.
Is there a way?
const inputEl = useRef();
const onButtonClick = () => {
inputEl.current.style.animation = "0.7s ease-in-out 0s 1 testKeyword";
};
return(
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
);
#keyframes testKeyword {
0% {
opacity: 0;
transform: scale(1);
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}

I have 2 different solutions depending on your needs:
Solution 1: using useRef
js file
const inputEl = useRef();
const handleButtonClick = () => {
inputEl.current.style.animation = "0.7s ease-in-out 0s 1 testKeyword";
}
const handleAnimationEnd = () => {
inputEl.current.style.animation = "none";
}
<input ref={inputEl} onAnimationEnd={handleAnimationEnd} type="text"/>
<button onClick={handleButtonClick} >Focus the input</button>
css file:
#keyframes testKeyword {
0% {
opacity: 0;
transform: scale(1);
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Solution 2: using useState
js file:
const [clicked, setClicked] = useState(false);
<input type="text" class={clicked === true ? "animate" : null} onAnimationEnd={() => setClicked(false)}/>
<button onClick={() => setClicked(true)}>Focus the input</button>
css file:
.animate {
animation: 0.7s ease-in-out 0s 1 testKeyword;
}
#keyframes testKeyword {
0% {
opacity: 0;
transform: scale(1);
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}

This should help! I am using a class that contains the animation and then I am adding it on button click, then after 700ms I am removing this class using setTimeout
class Demo extends React.Component {
handleClick() {
const inpEl = document.querySelector(".Demo-input");
inpEl.classList.add("Demo-animate");
setTimeout(() => {
inpEl.classList.remove("Demo-animate");
}, 700);
}
render() {
return (
<div className="Demo">
<input className="Demo-input" type="text" />
<button onClick={this.handleClick}> Click Me </button>
</div>
);
}
}
ReactDOM.render(<Demo />, document.getElementById("root"));
.Demo-animate {
animation: 0.7s ease-in-out 0s 1 testKeyword;
}
#keyframes testKeyword {
0% {
opacity: 0;
transform: scale(1);
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

You are just setting the animation style property of the element once and after the animation has completed 100%, it won't start again. What you can do is add a class to the element which changes the style of the element and remove it after some time interval.
const onButtonClick = () => {
const element = document.querySelector("input");
element.classList.add("fade");
setTimeout(() => {
element.classList.remove("fade");
}, 200);
};
return (
<>
<input type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</>
);
The CSS for the same would look something like this
.fade {
animation: 0.7s ease-in-out 0s 1 testKeyword;opacity: 0;
}
#keyframes testKeyword {
0% {
opacity: 0;
transform: scale(1);
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Note:
This implementation uses setTimeout which is an asynchronous API. It may happen at some point in time when the stack is not empty and the callback to remove the fade class is waiting in the task queue, then the code will freeze until the task is cleared. This is a rare case but it is important to know about it.
You can refer to this video on eventloop (What the heck is the event loop anyway? | Philip Roberts | JSConf EU) on youtube to understand this better. Here is the link https://youtu.be/8aGhZQkoFbQ?t=769

Incorporating SVG into Object HTML tag is not working

I've been attempting to clean up my HTML file by separating a 2.5k line SVG into it's own file. However, using the <object> tag has been unsuccessful so far. I attempted and succeeded having the the SVG appear with an <img> tag, but it had none of my CSS animations working. Any pointers on how to get this working through an SVG file would be greatly appreciated!
SVG Snippet (2500 LINES)
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve">
<g id="jjperezaguinaga">
<g id="countryObjects">
<path fill="#F15C27" d="M124.467,134.068c-2.028,2.304-3.916,4.723-5.74,7.187c-0.104,0.155-0.359,0.16-0.568,0.012l-14.95-10.734
c-0.208-0.149-0.431-0.462-0.492-0.699c-0.699-2.659-1.231-5.311-1.771-8.085c-0.046-0.243,0.114-0.458,0.359-0.476
c2.819-0.201,5.698-0.233,8.443-0.247c0.239,0,0.59,0.138,0.781,0.308l13.809,12.168
C124.531,133.671,124.588,133.925,124.467,134.068z"/>
<polygon fill="#FFFFFF" points="109.465,128.355 107.582,126.629 109.685,128.071 "/>
<polygon fill="#FFFFFF" points="109.95,127.335 107.582,126.629 109.983,126.959 "/>
<path fill="#FFFFFF" d="M109.84,126.14c-0.774,0.136-1.513,0.311-2.258,0.489l2.092-0.86L109.84,126.14z"/>
<path fill="#FFFFFF" d="M109.129,125.058l-1.547,1.571c0.38-0.634,0.787-1.249,1.219-1.843L109.129,125.058z"/>
<path fill="#FFFFFF" d="M107.994,124.383c-0.166,0.732-0.298,1.487-0.412,2.246c-0.016-0.782-0.027-1.573,0.005-2.34
L107.994,124.383z"/>
...
</svg>
HTML Portion
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF__8">
<title>Overlook</title>
<link type="text/css" href="https://fonts.googleapis.com/css2?family=Roboto:wght#900&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<object data="../assets/background.svg" type="image/svg+xml"></object>
CSS Animations
#-webkit-keyframes rotate-right {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-webkit-keyframes rotate-left {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(-360deg);
}
}
#-webkit-keyframes hover {
0% {
-webkit-transform: translateY(0%);
}
50% {
-webkit-transform: translateY(5%);
}
100% {
-webkit-transform: translateY(0%);
}
}
#-webkit-keyframes pull {
0% {
-webkit-transform: scaleY(1);
}
40% {
-webkit-transform: scaleY(1.01);
}
60% {
-webkit-transform: scaleY(0.99);
}
80% {
-webkit-transform: scaleY(1.01);
}
100% {
-webkit-transform: scaleY(0.99);
}
80% {
-webkit-transform: scaleY(1.01);
}
100% {
-webkit-transform: scaleY(1);
}
}
#function getSpeed($speed, $type:turtle) {
$secs: 360;
$divider: 1;
#if($type == turtle) {
$divider: 1;
} #else if($type == rabbit) {
$divider: 10;
} #else {
$divider: 60;
}
#if $speed == fastest {
$secs: 60 / $divider;
} #else if $speed == really-fast {
$secs: 120 / $divider;
} #else if $speed == fast {
$secs: 180 / $divider;
} #else if $speed == slow {
$secs: 240 / $divider;
} #else if $speed == really-slow {
$secs: 300 / $divider;
} #else if $speed == slowest {
$secs: 360 / $divider;
}
#return #{$secs}s;
}
#mixin _rotate-animation($direction, $speed, $type) {
-webkit-transform: translate3d(0, 0, 0);
-webkit-animation: rotate-#{$direction} getSpeed($speed, $type) linear 0s infinite;
}
#mixin _hover-animation($duration, $delay) {
-webkit-transform: translate3d(0, 0, 0);
-webkit-animation: hover #{$duration}s linear #{$delay}s infinite;
}
#mixin _pull-animation($duration, $delay, $x: 200px, $y: 200px) {
-webkit-transform: translate3d(0, 0, 0);
-webkit-transform-origin: $x $y;
-webkit-animation: pull #{$duration}s linear #{$delay}s infinite alternate;
}
#mixin rotate($type, $direction: left, $speed: slow, $x: 200px, $y: 200px) {
-webkit-transform: translate3d(0, 0, 0);
-webkit-transform-origin: $x $y;
#include _rotate-animation($direction, $speed, $type);
}
#airplane2, #airplane1 {
#include rotate(turtle, right, fastest);
}
#countryObjects {
#include rotate(turtle, right, slow);
}
#floatingGlobe {
#include rotate(turtle, left, normal);
}
#globe {
$duration: 0;
$delay: 0;
#include _hover-animation($duration, $delay);
}
#windmill {
#include rotate(flash, right, really-fast, 331px, 201px);
}
// Clouds
#for $i from 1 through 3 {
#cloud#{$i} {
#include _hover-animation(3, $i);
}
}
// Inner Circles
#for $i from 1 through 5 {
$direction: left;
$speed: really-fast;
#circle#{$i} {
#if $i % 2 == 1 {
$direction: right;
$speed: really-fast;
} #else {
$direction: left;
$speed: slow;
}
#include rotate(rabbit, $direction, $speed);
}
}

How to make the clock appear on the screen after the regressive disappears

I'm trying to make this clock that appears along with the beginning of the countdown only start after the element "GO!" to vanish. I already tried doing it starting after a setInterval of 6 seconds but I did not obtain result.
Please, if there is any way to debug this error even with css I thank you.
var tempo = new Number();
tempo = 180;
function start(){
var number = document.getElementById("number");
number.innerHTML = `<div id="cinco">5</div>
<div id="quatro">4</div>
<div id="tres">3</div>
<div id="dois">2</div>
<div id="um">1</div>
<div id="go">GO!</div>
`
ContagemRegressiva();
}
function ContagemRegressiva(){
if(tempo >= 0){
var minutos = parseInt(tempo / 60);
minutos = (minutos % 60);
var segundos = (tempo % 60);
if(minutos < 10){
minutos = '0' + minutos;
minutos = minutos.substr(0,2); //-->
}
if(segundos < 10){
segundos = '0' + segundos;
}
setTimeout('ContagemRegressiva()',1000);
tempo--;
regressivo.innerHTML = minutos + '<font color=black>:</font>' + segundos;
if((minutos == 00) && (segundos == 00)){
regressivo.innerHTML = minutos + '<font color=black>:</font>' + segundos + '<black></font>';
}
}
}
.container {
text-align: center;
margin: 0 auto;
}
#cinco,
#quatro,
#tres,
#dois,
#um,
#go {
font-size: 0;
animation: .5s ease-in-out 2 forwards alternate zoom;
}
#quatro {
animation-delay: 1s;
}
#tres {
animation-delay: 2s;
}
#dois {
animation-delay: 3s;
}
#um {
animation-delay: 4s;
}
#go {
animation-delay: 5s;
animation-iteration-count: 1;
}
#keyframes zoom {
0% {
font-size: 0;
}
100% {
font-size: 150px;
}
}
#keyframes some {
to {
transform: scale(0);
transform-origin: center top;
}
}
#number {
animation: 0.5s some linear forwards;
animation-delay: 6s;
}
.clock{
position: absolute;
top: 12%;
left: 92%;
transform: translate(-50%, -50%);
font-size: 25px;
color:black;
}
<body onload="start()">
<div id="number" class="container" />
<div class="clock">
<b style="font-size: 10"></b><span id="regressivo"></span></b><br>
</div>
</body>

You can use setTimeout function to call your ContagemRegressiva function.
function start() {
var number = document.getElementById("number");
number.innerHTML = `
<div id="cinco">5</div>
<div id="quatro">4</div>
<div id="tres">3</div>
<div id="dois">2</div>
<div id="um">1</div>
<div id="go">GO!</div>
`;
setTimeout(ContagemRegressiva, 6000);
}
You just need to find the amount of seconds to wait before running the function. I used 6000ms here.
Second way: you can add 'animationend' event to your #go element. When the animation on it ends, 'animationend' event will be fired.
So, you can do this with this code:
function start() {
var number = document.getElementById("number");
number.innerHTML = `
<div id="cinco">5</div>
<div id="quatro">4</div>
<div id="tres">3</div>
<div id="dois">2</div>
<div id="um">1</div>
<div id="go">GO!</div>
`;
var goElem = document.getElementById('go');
goElem.addEventListener('animationend', ContagemRegressiva);
}

Using Angular promises with ng-show

I have an Angular SPA, which loads a bunch of data from the backend and displays them in, let's say tables. In order to provide a better user experience, I'm hiding those tables while the data is loaded and display a spinner. So I end up writing code like this:
Template:
<div class="row">
<div class="col-md-12">
<spinner ng-show="ctrl.loading.unicorns"></spinner>
<ul ng-hide="ctrl.loading.unicorns">
<li ng-repeat="unicorn in ctrl.unicorns">{{ unicorn.name }}</li>
</ul>
</div>
</div>
Controller:
function unicornController() {
var ctrl = this;
ctrl.loading = {
unicorns: true
};
unicornService
.get()
.then(function(data) {
ctrl.unicorns = data;
})
.finally(function() {
ctrl.loading.unicorns = false;
});
return ctrl;
}
With one loader it's not a big deal, but when I have 3 of them in every view, it feels like the loading could be handled in a better way. I found out that promises have a $$state.status property which holds exactly this value, but afaik I should not use that as it's not part of the public API. Is there any other way to achieve this without messing around local flags?

You can either find a way to do it yourself or you can find an existing way to do it.
Here is a usefull projects that will automatically display the progress of your $http requests.
Angular loading bar
Install (npm or bower)
$ npm install angular-loading-bar
$ bower install angular-loading-bar
Include
angular.module('myApp', ['angular-loading-bar'])

If you are doing it a lot and you need to have independent loader maybe it is good idea to implement specific directive/component just for that?
Simple example with spinKit spinner.
angular.module('app', []);
angular.module('app').component('loading', {
transclude: true,
template: `
<div class="spinner" ng-show="$ctrl.loading"></div>
<ng-transclude ng-hide="$ctrl.loading"></ng-transclud>
`,
bindings: {
promise: '<'
},
controller: function() {
this.loading = false;
this.$onChanges = function() {
if (this.promise != null) {
this.loading = true;
this.promise
.then(function() {
this.loading = false;
}.bind(this));
}
}.bind(this);
}
});
angular.module('app').controller('Example', function($timeout) {
this.emitPromise = function(propName) {
this[propName] = createRandomPromise()
.then(function(result) {
this[propName + 'Result'] = result;
}.bind(this));
}.bind(this);
function createRandomPromise() {
var time = Math.round(Math.random() * 3000); // up to 3s
return $timeout(function() {
return time;
}, time);
}
});
.spinner {
width: 40px;
height: 40px;
background-color: #333;
margin: 10px auto;
-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
animation: sk-rotateplane 1.2s infinite ease-in-out;
}
#-webkit-keyframes sk-rotateplane {
0% {
-webkit-transform: perspective(120px)
}
50% {
-webkit-transform: perspective(120px) rotateY(180deg)
}
100% {
-webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
}
}
#keyframes sk-rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
}
50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
}
100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>
<div ng-app="app" ng-controller="Example as Ex">
<loading promise="Ex.x">
x result = {{Ex.xResult}}
</loading>
<br>
<button type="button" ng-click="Ex.emitPromise('x')">emit x</button>
<br>
<loading promise="Ex.y">
y result = {{Ex.yResult}}
</loading>
<br>
<button type="button" ng-click="Ex.emitPromise('y')">emit y</button>
</div>
Or if you wish you can use directive to insert result to transcluded scope:
angular.module('app', []);
angular.module('app').directive('loading', function($parse) {
return {
restrict: 'E',
transclude: true,
scope: true,
template: `
<div class="spinner" ng-show="loading"></div>
<div class="target" ng-hide="loading"></div>
`,
link: function($scope, $element, $attrs, $ctrl, $transclude) {
$scope.loading = false;
var targetElem = angular.element($element[0].querySelector('.target'));
$scope.$watch(watchFn, function(promise) {
if (promise != null) {
$scope.loading = true;
promise.then(function(result) {
$scope.loading = false;
$scope.result = result;
$transclude($scope, function (content) {
targetElem.empty();
targetElem.append(content);
});
});
}
});
function watchFn() {
return $parse($attrs.promise)($scope);
}
}
};
});
angular.module('app').controller('Example', function($timeout) {
this.parentValue = 'parent Value';
this.emitPromise = function(propName) {
this[propName] = createRandomPromise();
}.bind(this);
function createRandomPromise() {
var time = Math.round(Math.random() * 3000); // up to 3s
return $timeout(function() {
return time;
}, time);
}
});
.spinner {
width: 40px;
height: 40px;
background-color: #333;
margin: 10px auto;
-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
animation: sk-rotateplane 1.2s infinite ease-in-out;
}
#-webkit-keyframes sk-rotateplane {
0% {
-webkit-transform: perspective(120px)
}
50% {
-webkit-transform: perspective(120px) rotateY(180deg)
}
100% {
-webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
}
}
#keyframes sk-rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
}
50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
}
100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>
<div ng-app="app" ng-controller="Example as Ex">
<loading promise="Ex.x">
x result = {{result}}
</loading>
<br>
<button type="button" ng-click="Ex.emitPromise('x')">emit x</button>
<br>
<loading promise="Ex.y">
y result = {{result}}<br>
Ex.parentValue = {{Ex.parentValue}}
</loading>
<br>
<button type="button" ng-click="Ex.emitPromise('y')">emit y</button>
</div>

Javascript Text Rotate

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 ?
<?php
$json=file_get_contents('http://ddragon.leagueoflegends.com/cdn/5.18.1/data/en_US/champion.json');
$champions = json_decode($json);
?>
<?php
$championsArray = array();
foreach($champions->data as $champion){
$championsArray[] = $champion->id;
}
shuffle($championsArray);
$speed = 1000;
$count = count($championsArray);
var_dump($championsArray);
?>
<!DOCTYPE html>
<html lang="en" class="demo1 no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Super Simple Text Rotator Demo 1: Default Settings</title>
<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" />
<meta name="keywords" content="jquery text rotator, css text rotator, rotate text, inline text rotator" />
<meta name="author" content="Author for Onextrapixel" />
<link rel="shortcut icon" href="../file/favicon.gif">
<link rel="stylesheet" type="text/css" href="css/default.css" />
<!-- Edit Below -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="jquery.wordrotator.css">
<script src="jquery.wordrotator.js"></script>
</head>
<body class="demo1">
<div class="container">
<p><span id="myWords"></span></p>
<div class="main">
Go!
</div>
</div><!-- Container -->
<script type="text/javascript">
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');
}
</script>
</body>
</html>
Can anyone figure out a solution for this?

You could modify a bit the wordrotator plugin so that it allows to change the speed on each rotate.
You'll have to tweak the animation and the speed increment, but this should give you some ideas:
(function ($) {
$.fn.wordsrotator = function (options) {
var defaults = {
autoLoop: true,
randomize: false,
stopOnHover: false,
changeOnClick: false,
words: null,
animationIn: "flipInY",
animationOut: "flipOutY",
speed: 40,
onRotate: function () {},//you add these 2 methods to allow the effetct
stopRotate: function () {}
};
var settings = $.extend({}, defaults, options);
var listItem
var array_bak = [];
var stopped = false;
settings.stopRotate = function () {//you call this one to stop rotate
stopped = true;
}
return this.each(function () {
var el = $(this)
var cont = $("#" + el.attr("id"));
var array = [];
//if array is not empty
if ((settings.words) || (settings.words instanceof Array)) {
array = $.extend(true, [], settings.words);
//In random order, need a copy of array
if (settings.randomize) array_bak = $.extend(true, [], array);
listItem = 0
//if randomize pick a random value for the list item
if (settings.randomize) listItem = Math.floor(Math.random() * array.length)
//init value into container
cont.html(array[listItem]);
// animation option
var rotate = function () {
cont.html("<span class='wordsrotator_wordOut'><span>" + array[listItem] + "</span></span>");
if (settings.randomize) {
//remove printed element from array
array.splice(listItem, 1);
//refill the array from his copy, if empty
if (array.length == 0) array = $.extend(true, [], array_bak);
//generate new random number
listItem = Math.floor(Math.random() * array.length);
} else {
//if reached the last element of the array, reset the index
if (array.length == listItem + 1) listItem = -1;
//move to the next element
listItem++;
}
$("<span class='wordsrotator_wordIn'>" + array[listItem] + "</span>").appendTo(cont);
cont.wrapInner("<span class='wordsrotator_words' />");
cont.find(".wordsrotator_wordOut").addClass("animated " + settings.animationOut);
cont.find(".wordsrotator_wordIn").addClass("animated " + settings.animationIn);
settings.onRotate();//this callback will allow to change the speed
if (settings.autoLoop && !stopped) {
//using timeout instead of interval will allow to change the speed
t = setTimeout(function () {
rotate()
}, settings.speed, function () {
rotate()
});
if (settings.stopOnHover) {
cont.hover(function () {
window.clearTimeout(t)
}, function () {
t = setTimeout(rotate, settings.speed, rotate);
});
};
}
};
t = setTimeout(function () {
rotate()
}, settings.speed, function () {
rotate()
})
cont.on("click", function () {
if (settings.changeOnClick) {
rotate();
return false;
};
});
};
});
}
}(jQuery));
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({
animationIn: "fadeOutIn", //css class for entrace animation
animationOut: "fadeOutDown", //css class for exit animation
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'],
onRotate: function () {
//on each rotate you make the timeout longer, until it's slow enough
if (this.speed < 600) {
this.speed += 20;
} else {
this.stopRotate();
}
}
});
});
eventFire(document.getElementById('myWords'), 'click');
}
#charset"utf-8";
.wordsrotator_words {
display: inline-block;
position: relative;
white-space:nowrap;
-webkit-transition: width 100ms;
-moz-transition: width 100ms;
-o-transition: width 100ms;
transition: width 100ms;
}
.wordsrotator_words .wordsrotator_wordOut, .wordsrotator_words .wordsrotator_wordIn {
position: relative;
display: inline-block;
-webkit-animation-duration: 50ms;
-webkit-animation-timing-function: ease;
-webkit-animation-fill-mode: both;
-moz-animation-duration: 50ms;
-moz-animation-timing-function: ease;
-moz-animation-fill-mode: both;
-ms-animation-duration: 50ms;
-ms-animation-timing-function: ease;
-ms-animation-fill-mode: both;
}
.wordsrotator_words .wordsrotator_wordOut {
left: 0;
top: 0;
position: absolute;
display: inline-block;
}
.wordsrotator_words .wordsrotator_wordOut span {
width: auto;
position: relative;
}
.wordsrotator_words .wordsrotator_wordIn {
opacity: 0;
}
#-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
#keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
#-webkit-keyframes fadeOutDown {
0% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 1;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
}
#keyframes fadeOutDown {
0% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 1;
-webkit-transform: translateY(20px);
-ms-transform: translateY(20px);
transform: translateY(20px);
}
}
.fadeOutDown {
-webkit-animation-name: fadeOutDown;
animation-name: fadeOutDown;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="container">
<p><span id="myWords"></span>
</p>
<div class="main"> Go!
</div>
</div>