#2 Added - Text Switcher for sub-title

Anshul1507 · Sep 7, 2020 · 6442ac4 · 6442ac4
1 parent f9ef3a2
commit 6442ac4
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 11 deletions.
diff --git a/index.html b/index.html
@@ -8,15 +8,19 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <link rel="stylesheet" href="css/style.css">
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" crossorigin="anonymous">
-    <script type="text/javascript" src="js/start_animation.js"></script>
+    <script type="text/javascript" src="js/index.js"></script>
     <script type="text/javascript" src="js/main_animation.js"></script>
 </head>
 
 <body>
     <div id="animations">
         <div id="main_body" class="body_class">
             <img src="assets/pic.jpg" alt="Profile pic">
-            <h2 style="font-family: 'Roboto', sans-serif; font-size: 30px;">Anshul Gupta</h2>
+            <h1 style="font-family: 'Roboto', sans-serif; font-style: initial;">Anshul Gupta</h1>
+            <h2 class="desc" style="font-weight: 10; font-size: 20px;">
+                I'm a
+                <span class="text-switcher" style="font-style: initial; font-size: 22px;" data-hold-time="1000" data-switch-content='[ "Native Mobile Developer.", "FrontEnd Developer.", "UI Designer." ]'></span>
+            </h2>
             <hr style="width: 50%; background-color: #1D2951; border-color: #1D2951;">
             <a href="https://www.linkedin.com/in/#/" style="color: white;"><i class="fab fa-linkedin" style="font-size: 2em;"></i></a> &nbsp
             <a href="https://www.facebook.com/#/" style="color: white;"><i class="fab fa-facebook" style="font-size: 2em;"></i></a> &nbsp

diff --git a/js/index.js b/js/index.js
@@ -0,0 +1,69 @@
+/* JS code used to start the animation */
+document.addEventListener('DOMContentLoaded', function() {
+    particleground(document.getElementById('animations'), {
+        dotColor: '#5cbdaa',
+        lineColor: '#5cbdaa'
+    });
+    var intro = document.getElementById('main_body');
+    intro.style.marginTop = -intro.offsetHeight / 2 + 'px';
+}, false);
+
+/* JS code used for text switcher */
+var textSwitcher = 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;
+};
+
+textSwitcher.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("text-switcher");
+    for (var i = 0; i < elements.length; i++) {
+        var toRotate = elements[i].getAttribute("data-switch-content");
+        var period = elements[i].getAttribute("data-hold-time");
+        if (toRotate) {
+            new textSwitcher(elements[i], JSON.parse(toRotate), period);
+        }
+    }
+    // INJECT CSS
+    var css = document.createElement("style");
+    css.type = "text/css";
+    css.innerHTML = ".text-switcher > .wrap { border-right: 0.08em solid #666 }";
+    document.body.appendChild(css);
+};
diff --git a/js/start_animation.js b/js/start_animation.js