Eingabe von animiertem Text

Ich habe ein DIV-Tag mit Text darin. Ist es möglich, den Textinhalt in einer Schleife mit einem Tippeffekt zu ändern, bei der er austippt, dann rückwärts geht, die Buchstaben löscht und mit einem neuen Text von vorne beginnt? Ist das mit jquery möglich?

Ein einfacher Ansatz:

const elsTyper = document.querySelectorAll("[data-typer]");
const rand = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);

const typer = (el) => {
  const text = el.dataset.typer;
  const tot = text.length;
  let ch = 0;

  (function typeIt() {
    if (ch > tot) return;
    el.textContent = text.substring(0, ch++);
    setTimeout(typeIt, rand(60, 300));
  }());
};

elsTyper.forEach(typer);

/* PULSATING CARET */
[data-typer]:after {
  content:"";
  display: inline-block;
  vertical-align: middle;
  width:1px;
  height:1em;
  background: #000;
  animation: caretPulsate 1s linear infinite; 
}
@keyframes caretPulsate {
  0%   {opacity:1;}
  50%  {opacity:1;}
  60%  {opacity:0;}
  100% {opacity:0;}
}

<span data-typer="Hi! My name is Al. I will guide you trough the Setup process."></span>
<h3 data-typer="This is another typing animated text"></h3>

Holen Sie sich also im Grunde die data-typer Zeichenfolge Ihres Elements, fügen Sie Zeichen für Zeichen mit einem random ein Minimal Maximal Auszeit. Das pulsierende “Caret” ist nichts durch ein CSS3 animiertes :after Pseudo-Element derselben SPAN.

Siehe auch: Zufallszahl zwischen zwei Zahlen in JavaScript generieren

Mit der text()-Methode von Jquery können Sie den Text eines Elements festlegen.

http://api.jquery.com/text/

Sie können dies verwenden, um den Inhalt zu animieren, indem Sie dies in einer Schleife aufrufen und ihm den Inhalt geben, den Sie in jedem Frame sehen möchten.

var Rahmen = [‘t_’, ‘ty_’, ‘typ_’, ‘type_’]

// loop over frames ... inner part reads frame and prints it
// use setInterval, etc.
$('#my-div').text( frames[i] );

Ich habe kompliziertere Dinge getan, indem ich die Textelemente geteilt und die Zeichen manipuliert habe, aber ich denke, in Ihrem Fall wäre es übertrieben.

Tippeffekt + Löscheffekt + blinkender Cursor

ich veränderte Simon Shahriveri codepan, um den blinkenden Effekt des Cursors weiter hinzuzufügen. Es ist auch mit IE kompatibel.
Hier ist das Endergebnis: https://codepen.io/jerrygoyal/pen/vRPpGO

HTML:

<h1>
  <a href="" class="typewrite" data-period="2000" data-type="[ "Hi, I am Jerry.", "I am Creative.", "I Love Design.", "I Love to Develop." ]">
    <span class="wrap"></span>
  </a>
</h1>

CSS:

body {
  background-color:#ce6670;
  text-align: center;
  color:#fff;
  padding-top:10em;
}

* { color:#fff; text-decoration: none;}

.wrap{
   animation: caret 1s steps(1) infinite;
   border-right: 0.08em solid #fff;
  padding-right: 1px;
}
@keyframes caret {
  50% {
    border-color: transparent;
  }
}

JS:

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);
            }
        }
  
    };

Ein anderer Weg, indem Sie nur Funktionen anstelle von js-Prototypen verwenden: https://codepen.io/jerrygoyal/pen/vRPpGO