Removed powerpoint effects and added typed.js gem to the project to w…

…rite text.
falcoagustin · Nov 6, 2016 · f8d483b · f8d483b
1 parent 0b4ef11
commit f8d483b
Show file tree

Hide file tree

Showing 4 changed files with 493 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -3,8 +3,8 @@
   <head>
     <meta charset='utf-8'>
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
-    <script src="javascripts/loader.js" type="text/javascript"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+    <script src="javascripts/typed.js" type="text/javascript"></script>
 
     <link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
     <link rel="stylesheet" type="text/css" href="stylesheets/github-dark.css" media="screen">
@@ -16,9 +16,11 @@
 
   <body>
     <section id="bodySection" hidden>
-      <h1 id="headerTitle"> Agustín Falco Developer </h1>
-      <p id="title"> Greetings! I'm Agustín</p>
-      <p id="description"> Programer by definition, if you have something interesting to code, what are you waiting for? =)</p>
+      <div id="typed-strings">
+        <h1><span id="mainTitle"></span></h1>
+        <p><span id="title"> </span></p>
+        <p><span id="description"></span></p>
+      </div>
       <div class="container">
         <div class="background-image" id="mainImage">
         </div>

diff --git a/javascripts/main.js b/javascripts/main.js
@@ -2,9 +2,9 @@ $('<img/>').attr('src', 'images/forest.jpg')[0].onload = function() {
   $(this).remove(); // prevent memory leaks as @benweet suggested
   $('.loader')[0].style.display = 'none';
   $('#bodySection')[0].removeAttribute('hidden');
-  makeTextDraggable('#title', 50);
-  makeTextDraggable('#description', 10);
-  makeTextDraggable('#headerTitle', 50);
+  // makeTextDraggable('#title', 50);
+  // makeTextDraggable('#description', 10);
+  // makeTextDraggable('#headerTitle', 50);
 };
 
 
@@ -23,3 +23,37 @@ function makeTextDraggable(name, ms) {
   }
   titleText.innerHTML = result;
 }
+
+function callTyped(target, string) {
+  $(target).typed({
+    strings: [string],
+    typeSpeed: 30,
+    loop: false,
+    contentType: 'html', // or text
+    callback: function(){
+
+      $(".typed-cursor").remove();
+      $("#title").typed({
+        strings: ["Greetings! I'm Agustín^500"],
+        typeSpeed: 30,
+        loop: false,
+        contentType: 'html', // or text
+        callback: function(){
+          $(".typed-cursor").remove();
+          $("#description").typed({
+            strings: ["Programer by definition, if you have something interesting to code, what are you waiting for? =) "],
+            typeSpeed: 20,
+            loop: false,
+            contentType: 'html', // or text
+            callback: function(){
+            },
+            resetCallback: function() { }
+          });
+        },
+        resetCallback: function() { }
+      });
+    },
+    resetCallback: function() { }
+  });
+}
+callTyped("#mainTitle", "Agustín Falco Developer^500");