Skip to content

Instantly share code, notes, and snippets.

@sajjadalis

sajjadalis/index.html

Created February 25, 2023 19:31
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save sajjadalis/a0826ebb34253ba4a18a6cf82bc0969b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save sajjadalis/a0826ebb34253ba4a18a6cf82bc0969b to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. sajjadalis created this gist Feb 25, 2023.
    82 changes: 82 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,82 @@
    <!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>