Blog

01 de August de 2023

Typewrite effect

Efeito Typewrite

The “Typewrite” effect or “typewriter effect” is an interesting technique that can be applied to web pages to give a retro touch or emphasize the content. This effect simulates the animation of an old typewriter, revealing text gradually, as if it were being typed in real time.

To achieve this, we will use the following codes:

HTML

<h3 class="typewrite" data-period="2000" data-type='[ "Teste de Efeito Typewrite.", "Efeito Typewrite.", "Efeito Typewrite testando..." ]'><span class="wrap"></span></h3>

JavaScript

    var TxtType = function(el, toRotate, period) {
        this.toRotate = toRotate;
        this.el = el;
        this.loopNum = 0;
        this.period = parseInt(period, 10) || 2000;
        this.txt = '';
        this.tick();
        this.isDeleting = false;
    };

    TxtType.prototype.tick = function() {
        var i = this.loopNum % this.toRotate.length;
        var fullTxt = this.toRotate[i];

        if (this.isDeleting) {
        this.txt = fullTxt.substring(0, this.txt.length - 1);
        } else {
        this.txt = fullTxt.substring(0, this.txt.length + 1);
        }

        this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>';

        var that = this;
        var delta = 200 - Math.random() * 100;

        if (this.isDeleting) { delta /= 2; }

        if (!this.isDeleting && this.txt === fullTxt) {
        delta = this.period;
        this.isDeleting = true;
        } else if (this.isDeleting && this.txt === '') {
        this.isDeleting = false;
        this.loopNum++;
        delta = 500;
        }

        setTimeout(function() {
        that.tick();
        }, delta);
    };

    window.onload = function() {
        var elements = document.getElementsByClassName('typewrite');
        for (var i=0; i<elements.length; i++) {
            var toRotate = elements[i].getAttribute('data-type');
            var period = elements[i].getAttribute('data-period');
            if (toRotate) {
              new TxtType(elements[i], JSON.parse(toRotate), period);
            }
        }
        // INJECT CSS
        var css = document.createElement("style");
        css.type = "text/css";
        css.innerHTML = ".typewrite > .wrap { border-right: 0.08em solid #fff}";
        document.body.appendChild(css);
    };

Or you can download the finished file.

Share:

Download

Others

Tips

Verificar se existe e criando pastas

Checking for existing and creating folders

View more

Variáveis CSS

CSS Variables

View more

Explorando Categorias no WordPress

Explorando Categorias no WordPress

View more