Une animation de texte façon « Matrix »

Sur CodePen, Evan Kin nous propose une animation de texte façon « Matrix » en CSS et js. Vous trouverez la démo et le code originel en cliquant ici.

Le code HTML

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>

Le code CSS

@import url(‘https://fonts.googleapis.com/css2?family=VT323&display=swap’);

html, body {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #020202;
font-family: ‘VT323’, monospace;
}

p {
max-width: 500px;
white-space: pre-line;
letter-spacing: 0.1em;
font-size: 1.5em;
color: #05d1e1;
filter: drop-shadow(0 0 2px #e4d808);
}

Le code js

function paragraph(element) {
const array = element.innerText.split( »)
const special = [‘~’, ‘@’, ‘!’, ‘#’, ‘$’, ‘%’, ‘^’, ‘&’, ‘*’]
const exception = [‘ ‘, ‘\n’, ‘.’, ‘,’]
const random = (min, max) => {
return Math.floor(Math.random() * (max – min + 1) + min)
}

const numArray = []
array.forEach(char => {
const num = random(5, 40)
numArray.push(num)
})

let completeCount
let newText
const timer = setInterval(() => {
completeCount = 0
newText =  »
numArray.forEach((num, i) => {
if (exception.includes(array[i]) || numArray[i] === 0) {
newText += array[i]
completeCount += 1
} else {
newText += special[numArray[i] % special.length]
numArray[i] = –num
}
})

element.innerText = newText
if (completeCount === numArray.length) clearInterval(timer)
}, 100)
}

const p = document.querySelector(‘p’)
paragraph(p)

Source : https://codepen.io/rudtjd2548/pen/poazxKX