The funny code! Position Name. VK.

// Код для анимации.
var doc = document;
var myName = doc.querySelector('#name');
var kek = 0;
//ШРИФТ
 
  (function() {
    var style = doc.createElement('style');
    var impor = "@import 'https://fonts.googleapis.com/css?family=Lobster'";
    style.innerHTML = impor;
    document.head.appendChild(style);
  })();

//ПЕРЕБОР ВСЕХ БУКВ.
function allName() {
    var innName = myName.innerHTML;
    var arr = [];
    
    for(var i = 0; i < innName.length; i++) {
        arr.push(innName.charAt(i));
    }
    myName.innerHTML = '';

    createSpan(arr);
} allName();


// 1.CREATE SPANS 2. TO ADD IN MYARR 3.TO ADD TO MYNAME
function createSpan(myArr) {
    var span = [];

    for(var i = 0; i < myArr.length; i++) {
        span.push(doc.createElement('span'));
        span[i].innerHTML = myArr[i];
        span[i].style.cssText = 'position: absolute; display: inline-block; font-size: 22px; transition: all 0.8s; z-index: 9999; font-family: Lobster; left: 100px; perspective: 500px;';
        span[i].className = 'tratatatat'
        doc.body.appendChild(span[i]);
    }
    spanPosition(span);
    animate();
}

//ЗАДАЕМ ОТСТУПЫ МЕЖДУ БУКВАМИ
function spanPosition(mySpan) {
    var kek = 0;
    var margin = 0;
    while(true) {
        mySpan[kek].style.marginLeft = margin + 'px';
        kek++;
        margin += 15;
        if(kek === mySpan.length) break;
    }

}

function animate() {
    var fullSpan = doc.querySelectorAll('.tratatatat');

    var keyframes = '@keyframes lol { '+
                    '0% { transform: scale(1.0) ; color: black;} '+
                    '10% { transform: scale(1.1); color: yellow; text-shadow: 2px 3px 3px rgba(245, 255, 99, 1);}'+
                    '20% {transform: scale(1.2); color: black ;}'+
                    '30% {transform: scale(1.3); color: black ;}'+
                    '40% {transform: scale(1.4); color: black   ;}'+
                    '50% { transform: scale(1.5); color: black ;}'+
                    '60% {transform: scale(1.4); color: yellow ; text-shadow: 2px 3px 3px rgba(245, 255, 99, 1);}'+
                    '70% { transform: scale(1.3); color: black  ;}'+
                    '80% {transform: scale(1.2); color: black   ;}'+
                    '90% {transform: scale(1.1); color: black  ;}'+
                    '100% {transform: scale(1.1); color: black ;' +
                    '}';
                
    var s = document.createElement('style');
    s.innerHTML = keyframes;
    document.getElementsByTagName('body')[0].appendChild(s);

    animeInterval(fullSpan);
}

function animeInterval(g) {
    while(true) {
        if(kek !== g.length) {
            g[kek].style.animation = 'lol 2s infinite';
        } 
        break;
    }
    kek++;
    myInterval(g);
}
function myInterval(h) {
    setTimeout(function() {
        animeInterval(h);
    }, 70);
}

//ДЕЛАЕМ АНИМАЦИЮ ПО КЛИКУ.
var lol = 0;
function anime(client, fullName) {
   var time = setTimeout(function() {
    call(client);
   }, 40);

    if(lol === fullName.length) {
        lol = 0;
        clearTimeout(time);
    }
}

function call(e) {
    var yourFullName = doc.querySelectorAll('.tratatatat');

    while(true) {
        if(lol !== yourFullName.length) {
        yourFullName[lol].style.left = e.clientX + 'px';
        yourFullName[lol].style.top = e.clientY + 'px';
        }
        break;
    }
    lol++;
    anime(e, yourFullName);
}
doc.addEventListener('click', call, false);