<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

body {
  background-color: aqua;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

ul {
  display: flex;
  list-style-type: none;
}

li {
  margin: 0 60px;
  color: #333;
}
// plugin code
// my code on string 138

(function($){
	
	$.fn.shuffleLetters = function(prop){
		
		var options = $.extend({
			"step"		: 8,			// How many times should the letters be changed
			"fps"		: 25,			// Frames Per Second
			"text"		: "", 			// Use this text instead of the contents
			"callback"	: function(){}	// Run once the animation is complete
		},prop)
		
		return this.each(function(){
			
			var el = $(this),
				str = "";


			// Preventing parallel animations using a flag;

			if(el.data('animated')){
				return true;
			}
			
			el.data('animated',true);
			
			
			if(options.text) {
				str = options.text.split('');
			}
			else {
				str = el.text().split('');
			}
			
			// The types array holds the type for each character;
			// Letters holds the positions of non-space characters;
			
			var types = [],
				letters = [];

			// Looping through all the chars of the string
			
			for(var i=0;i<str.length;i++){
				
				var ch = str[i];
				
				if(ch == " "){
					types[i] = "space";
					continue;
				}
				else if(/[a-z]/.test(ch)){
					types[i] = "lowerLetter";
				}
				else if(/[A-Z]/.test(ch)){
					types[i] = "upperLetter";
				}
				else {
					types[i] = "symbol";
				}
				
				letters.push(i);
			}
			
			el.html("");			

			// Self executing named function expression:
			
			(function shuffle(start){
			
				// This code is run options.fps times per second
				// and updates the contents of the page element
					
				var i,
					len = letters.length, 
					strCopy = str.slice(0);	// Fresh copy of the string
					
				if(start>len){
					
					// The animation is complete. Updating the
					// flag and triggering the callback;
					
					el.data('animated',false);
					options.callback(el);
					return;
				}
				
				// All the work gets done here
				for(i=Math.max(start,0); i < len; i++){

					// The start argument and options.step limit
					// the characters we will be working on at once
					
					if( i < start+options.step){
						// Generate a random character at thsi position
						strCopy[letters[i]] = randomChar(types[letters[i]]);
					}
					else {
						strCopy[letters[i]] = "";
					}
				}
				
				el.text(strCopy.join(""));
				
				setTimeout(function(){
					
					shuffle(start+1);
					
				},1000/options.fps);
				
			})(-options.step);
			

		});
	};
	
	function randomChar(type){
		var pool = "";
		
		if (type == "lowerLetter"){
			pool = "abcdefghijklmnopqrstuvwxyz0123456789";
		}
		else if (type == "upperLetter"){
			pool = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
		}
		else if (type == "symbol"){
			pool = ",.?/\\(^)![]{}*&^%$#'\"";
		}
		
		var arr = pool.split('');
		return arr[Math.floor(Math.random()*arr.length)];
	}
	
})(jQuery);


// my code

const setShuffle = function(){
  let containerLeft = $("ul li:nth-child(1)");
  let containerCenter = $("ul li:nth-child(2)");
  let containerRight = $("ul li:nth-child(3)");
  let counter = 0;

  function shuffleWords(swich){
    switch (swich) {

      case 0: {
        setTimeout(function(){

          containerLeft.shuffleLetters({
            "text": "Блог"
          });

        },2500);

        setTimeout(function(){

          containerCenter.shuffleLetters({
            "text": "веб-разработчика"
          });

        },3000);

        setTimeout(function(){

          containerRight.shuffleLetters({
            "text": "MaxGraph"
          });

        },3500);

        break;
      }

      case 1: {
        setTimeout(function(){

          containerLeft.shuffleLetters({
            "text": "о"
          });

        },2500);

        setTimeout(function(){

          containerCenter.shuffleLetters({
            "text": "верстке"
          });

        },3000);

        setTimeout(function(){

          containerRight.shuffleLetters({
            "text": "и js"
          });

        },3500);
        break;
      }

    }

    counter++;
  }

  if (counter === 101){
    counter = 0;
  }
  shuffleWords( counter % 2);

  setInterval(function(){
    if (counter === 101){
      counter = 0;
    }
    shuffleWords( counter % 2);

  },6000);
};

setShuffle();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js