samedi 19 mai 2018

JAVASCRIPT | Generate multiple random letters to create a decryption effect?

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