sajjadalis · February 25, 2023 19:31
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Text Rotate with Typing effect</title>
  </head>
  <body>
    <h1 style="text-align: center">
      Discover Local
      <span
        class="txt-rotate"
        data-period="500"
        data-rotate='[ "Businesses", "Events", "Jobs" ]'
      ></span>
      <br />in Wanstead
    </h1>
    <script>
      // Animated Text
      var TxtRotate = function (el, toRotate, period) {
        this.toRotate = toRotate;
        this.el = el;
        this.loopNum = 0;
        this.period = parseInt(period, 10) || 500;
        this.txt = "";
        this.tick();
        this.isDeleting = false;
      };

      TxtRotate.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 = 300 - 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("txt-rotate");
        for (var i = 0; i < elements.length; i++) {
          var toRotate = elements[i].getAttribute("data-rotate");
          var period = elements[i].getAttribute("data-period");
          if (toRotate) {
            new TxtRotate(elements[i], JSON.parse(toRotate), period);
          }
        }
        // INJECT CSS
        var css = document.createElement("style");
        css.type = "text/css";
        css.innerHTML =
          ".txt-rotate > .wrap { border-right: 0.15em solid #333 }";
        document.body.appendChild(css);
      };
    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Text Rotate with Typing effect</title>
	</head>
	<body>
	<h1 style="text-align: center">
	Discover Local
	<span
	class="txt-rotate"
	data-period="500"
	data-rotate='[ "Businesses", "Events", "Jobs" ]'
	></span>
	<br />in Wanstead
	</h1>
	<script>
	// Animated Text
	var TxtRotate = function (el, toRotate, period) {
	this.toRotate = toRotate;
	this.el = el;
	this.loopNum = 0;
	this.period = parseInt(period, 10) \|\| 500;
	this.txt = "";
	this.tick();
	this.isDeleting = false;
	};

	TxtRotate.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 = 300 - 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("txt-rotate");
	for (var i = 0; i < elements.length; i++) {
	var toRotate = elements[i].getAttribute("data-rotate");
	var period = elements[i].getAttribute("data-period");
	if (toRotate) {
	new TxtRotate(elements[i], JSON.parse(toRotate), period);
	}
	}
	// INJECT CSS
	var css = document.createElement("style");
	css.type = "text/css";
	css.innerHTML =
	".txt-rotate > .wrap { border-right: 0.15em solid #333 }";
	document.body.appendChild(css);
	};
	</script>
	</body>
	</html>