random char

rd.md

<p class="test">Something</p>

import Entry from './ScrollingLettersAnimation'

new Entry('.test').enter()

ScrollingLettersAnimation.js

/**
 * demo1.js
 * http://www.codrops.com
 * https://github.com/codrops/ScrollingLettersAnimation
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 *
 * Copyright 2018, Codrops
 * http://www.codrops.com
 */

const charming = require('charming')
const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ$!%+-_^#&=*/'.split('')
const charsTotal = chars.length
const getRandomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min

export default class Entry {
    constructor(el) {
        this.DOM = {el: document.querySelector(el)}
        this.DOM.title = {word: this.DOM.el}
        charming(this.DOM.title.word)
        this.DOM.title.letters = Array.from(this.DOM.title.word.querySelectorAll('span'))
        this.DOM.title.letters.forEach((letter) => letter.dataset.initial = letter.innerHTML)
        this.lettersTotal = this.DOM.title.letters.length
    }
    enter(direction = 'down') {
        this.DOM.title.word.style.opacity = 1
        this.timeouts = []
        this.complete = false
        let cnt = 0

        this.DOM.title.letters.forEach((letter, pos) => {
            const timeout = setTimeout(() => {
                letter.innerHTML = chars[getRandomInt(0, charsTotal - 1)]

                setTimeout(() => {
                    letter.innerHTML = letter.dataset.initial
                    ++cnt
                    if ( cnt === this.lettersTotal ) {
                        this.complete = true
                    }
                }, 1000)

            }, pos * 80)
            this.timeouts.push(timeout)
        })
    }
    exit(direction = 'down') {
        this.DOM.title.word.style.opacity = 0
        if (this.complete) return

        for (let i = 0, len = this.timeouts.length; i <= len - 1; ++i) {
            clearTimeout(this.timeouts[i])
        }
    }
}