Infinito de texto rotador con vainilla JS y CSS3-ciclo de palabras

Vista prévia

Descripción

Word Cycle es una biblioteca de JavaScript vainilla para recorrer una matriz de palabras con una animación de fadeIn con tecnología CSS3.

Funcionamiento

Envuelva la palabra inicial en un elemento insertado.

<h1> I love <span class="verb">JavaScript</span>.</h1>

Agregue la biblioteca de JS classList. js necesaria en la parte inferior del documento.

<script src="js/classListShim.js"></script>

El núcleo JavaScript para habilitar el rotador de texto.

var words = (function(){

var words = [



'JavaScript',



'CSS3',



'HTML5',



'Ruby',



'Python',



'C++',



'jQuery',



'Google',



'Object C',



'Mysql'



],


el = document.querySelector('.verb'),


currentIndex,


currentWord,


prevWord,


duration = 4000;


var _getIndex = function(max, min){


currentIndex = Math.floor(Math.random() * (max - min + 1)) + min;



//Generates a random number between beginning and end of words array


return currentIndex;

};


var _getWord = function(index){


currentWord = words[index];



return currentWord;

};


var _clear = function() {



setTimeout(function(){



el.className = 'verb';


}, duration/4);

};


var _toggleWord = function(duration){


setInterval(function(){



//Stores value of previous word



prevWord = currentWord;




//Generate new current word



currentWord = words[_getIndex(words.length-1, 0)];




//Generate new word if prev matches current



if(prevWord === currentWord){





currentWord = words[_getIndex(words.length-1, 0)];



}




//Swap new value



el.innerHTML = currentWord;




//Clear class styles



_clear();




//Fade in word



el.classList.add(




'js-block',




'js-fade-in-verb'




);



}, duration);

};


var _init = function(){


_toggleWord(duration);

};


//Public API

return {


init : function(){



_init();


}

};
})();

words.init();

Agregue la animación fadeIn al rotador de texto usando CSS/CSS3.

@-moz-keyframes
 fade-it { 0% {
opacity:0
}
100% {
opacity:1
}
}

@-webkit-keyframes
 fade-it { 0% {
opacity:0
}
100% {
opacity:1
}
}

@keyframes
 fade-it { 0% {
opacity:0
}
100% {
opacity:1
}
}

.js-fade-in-verb {

animation-name: fade-it;

animation-duration: 1s;

animation-fill-mode: forwards;

-webkit-animation-name: fade-it;

-webkit-animation-duration: 1s;

-webkit-animation-fill-mode: forwards
}

.verb.js-block { display: inline-block }

.verb.js-hide {

display: none;

opacity: 0
}

.verb {

display: inline-block;

visibility: visible;

border-bottom: 1px solid
}