Skip to content

Instantly share code, notes, and snippets.

@sajjadalis
Created February 25, 2023 19:31
Show Gist options
  • Save sajjadalis/a0826ebb34253ba4a18a6cf82bc0969b to your computer and use it in GitHub Desktop.
Save sajjadalis/a0826ebb34253ba4a18a6cf82bc0969b to your computer and use it in GitHub Desktop.
Text Rotate with Typing effect
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment