JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<p><a href="#!" data-replacer="Donec vitae libero">Vestibulum ullamcorper</a>
</p>
<p><a href="#!" data-replacer="Mauris turpis nunc blandit et">Nunc interdum</a>
</p>
<p><a href="#!" data-replacer="Hover State Replace From Data Attribute">Normal Link Text</a>
</p>

CSS

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,900);

a[data-replacer] {
    display: block;
    text-transform: uppercase;
    text-decoration: none;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 900;
    font-size: 12px;
    color: #768893;
    transition: color 300ms;
    letter-spacing: 1px;
}

a[data-replacer]:hover {
    color: #3f474c;
}

JavaScript

/**
 * TEXT REPLACER
 */

function replacer(elem) {
    var _this = this;

    _this.writeSpeed = 15;

    _this.replaceText = elem.getAttribute('data-replacer'),
    _this.originalText = elem.innerHTML;

    _this.runState = false;

    _this.eventBind = function () {
        elem.addEventListener('mouseover', _this.writeIn);
        elem.addEventListener('mouseout', _this.writeOut);
    }

    _this.writeIn = function () {
        _this.runState = true;
        var i = 0,
            max = _this.replaceText.length;
        var writer = setInterval(function () {
            var p1 = _this.replaceText.substring(0, i),
                p2 = _this.originalText.substring(i, _this.originalText.length);
            elem.innerHTML = p1 + p2;
            i++;
            if (i > max || !_this.runState) {
                clearInterval(writer);
                if (i > max && _this.replaceText.length < _this.originalText.length) {
                    elem.innerHTML = _this.replaceText;
                }
            }
        }, _this.writeSpeed);
    }

    _this.writeOut = function () {
        _this.runState = false;
        var i = elem.innerHTML.length;
        var eraser = setInterval(function () {
            var p1 = elem.innerHTML.substring(0, i),
                p2 = _this.originalText.substring(i, _this.originalText.length);
            elem.innerHTML = p1 + p2;
            i--;
            if (i < 1 || _this.runState) {
                clearInterval(eraser);
                elem.innerHTML = _this.originalText;
            }
        }, _this.writeSpeed);
    }

    _this.eventBind();
}

var rElems = document.querySelectorAll('[data-replacer]');
for (var i = 0; i < rElems.length; i++) {
    new replacer(rElems[i]);
}