Merge pull request barryclark#18 from prashantsolanki3/master

Dynamic Text on the Header Added.

_config.yml

@@ -24,6 +24,23 @@ black-favicon: "/img/black-lab-glass.ico"
 background-img: "../img/intro-bg.jpg"
 me-img: "/img/jetpacktocat.png"
 
+##############################
+# Dynamic Text on the header #
+##############################
+
+dynamic-typing: True
+shuffle: True	# Shuffle the lines.
+loop: True	
+loop-count:	False #Set False for infinite loop, or set any number for finite loop.
+type-speed:	10		#Default 10
+start-delay: 200	#Default 200
+delete-delay: 5000	#Default 5000
+lines:			# You can add HTML Tags in the Text
+- text: "The lower you fall, the higher you'll fly."
+- text: "May the wind under your wings bear you where the sun sails and the moon walks."
+- text: "Some people never go crazy. What truly horrible lives they must lead."
+- text: "Where’s your will to be weird?"
+
 ########
 # Blog #
 ########

_includes/header.html

@@ -4,10 +4,11 @@
     <div class="intro-body">
         <div class="container">
             <div class="row">
-                <div class="col-md-8 col-md-offset-2">
+                <div class="col-md-10 col-md-offset-1">
                     <h1 class="brand-heading">&nbsp;</h1>
                     <h1 class="brand-heading">&nbsp;</h1>
-                    <p class="intro-text">{{ content }}</p>
+                    <span class="intro-text">{{ content }}</span>
+                    <h5>&nbsp;</h5>
                     <a href="#{{ site.pages_list['About'] }}" class="page-scroll">
                       <img class="img-me" src="{{site.baseurl}}{{ site.me-img }}" alt="">
                     </a>

_includes/js.html

@@ -93,4 +93,51 @@
 
 {% endif %}
 
+<!-- Dynamic Typing Start -->
+{% if site.dynamic-typing %}
+<script type="text/javascript" src="/js/typed.js"></script>
+<script type="text/javascript">
+
+var myQuotes =  new Array();
+{% for line in site.lines %}
+      myQuotes.push("{{ line.text }}");
+ {% endfor %}
+
+function shuffle(array) {
+  var currentIndex = array.length, temporaryValue, randomIndex ;
+
+  // While there remain elements to shuffle...
+  while (0 !== currentIndex) {
+
+    // Pick a remaining element...
+    randomIndex = Math.floor(Math.random() * currentIndex);
+    currentIndex -= 1;
+
+    // And swap it with the current element.
+    temporaryValue = array[currentIndex];
+    array[currentIndex] = array[randomIndex];
+    array[randomIndex] = temporaryValue;
+  }
+
+  return array;
+}
+
+{% if site.shuffle %}
+    shuffle(myQuotes)
+{% endif %}
+
+  $(".intro-text").typed({
+                strings: myQuotes,
+                typeSpeed: {{ site.type-speed }},
+                backDelay: {{ site.delete-delay }},
+                startDelay: {{ site.start-delay }},
+                loop: {{ site..loop }},
+                loopCount: {{ site.loop-count }},
+                cursorChar: "|"
+              });
+</script>
+{% endif %}
+
+<!-- Dynamic Typing End  -->
+
 <!-- Javascript End -->

css/grayscale.scss

@@ -390,3 +390,25 @@ img::-moz-selection {
 body {
     webkit-tap-highlight-color: rgba($light, 0.2);
 }
+
+.typed-cursor{
+    opacity: 1;
+    -webkit-animation: blink 0.7s infinite;
+    -moz-animation: blink 0.7s infinite;
+    animation: blink 0.7s infinite;
+}
+@keyframes blink{
+    0% { opacity:1; }
+    50% { opacity:0; }
+    100% { opacity:1; }
+}
+@-webkit-keyframes blink{
+    0% { opacity:1; }
+    50% { opacity:0; }
+    100% { opacity:1; }
+}
+@-moz-keyframes blink{
+    0% { opacity:1; }
+    50% { opacity:0; }
+    100% { opacity:1; }
+}