I want create an effect like this a link!. (The name of the planet in the background)
So i need to generate many random letter before to display letter of my word one by one.
i try this :
var text = $('.planet-menu').data('planet');
var letterChoice = "abcdefghijklmnopqrstuvwxyz"
var length = text.length;
var timeOut;
var timeOut2;
var character = 0;
(function typeWriter() {
timeOut = setTimeout(function() {
character++;
var type = text.substring(0, character);
(function ramdomLetterEffect(){
timeOut2 = setTimeout(function() {
var type = text.substring(0, character);
var randomLetter = letterChoice.charAt(Math.floor(Math.random() * letterChoice.length));
$('.planet-name').text(randomLetter);
ramdomLetterEffect();
if (character == length) {
clearTimeout(timeOut2);
}
},200);
}());
$('.planet-name').text(type);
typeWriter();
if (character == length) {
clearTimeout(timeOut);
}
}, 1000);
}());
<div class="planet-menu" data-planet="moon"></div>
<div class="planet-name"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I am most grateful for your read !
Aucun commentaire:
Enregistrer un commentaire