Как реализовать такой эффект перебора как на GIF?

Я новичок в web. Подскажите как написать скрипт для реализации такого эффекта

Ответ
Можно искать в google под ключевым словом shuffle letter effect
Или можно использовать готовый плагин jQuery animation Shuffle Letters Effect
Либо можно использовать то что я написал снизу и на основе этого написать точную копию того что вам нужно.
Upd:Сделал еще похоже на то что в гифке.Можно еще заморочиться и сделать полную копию но это я оставляю вам.
Ссылка на исходный код тут
Спасибо всем.


(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)


$(function() {
const el = $(".dummy")

$.each( el, function( key, value ) {
el.shuffleLetters()

function shuffle(text) {
el.shuffleLetters({text: text})
}

const arr = ['Первый скучный текст', 'текст углеродный :D', 'мифический текст', 'бессмертный текст']
let i = 0
const interval = setInterval(_ => shuffle(arr[i++ % arr.length]), 4000)
})
}) html, body {
margin:0
padding:0
}

.main {
background: #0f0c29 /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #24243e, #302b63, #0f0c29) /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #24243e, #302b63, #0f0c29) /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
display:-webkit-box
display:-webkit-flex
display:-moz-box
display:-ms-flexbox
display:flex
}
.group {
width:33%
color:#fff
font-family: 'Montserrat', sans-serif
}