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

Propriedades do Cursor

Cursor Properties

View more

Redirecionamento para outro site

Redirection to another website

View more

Os arquivos do Pen Drive sumiram!

Pen Drive files are gone!

View more