chrisle · January 12, 2022 08:27 · Jan 12, 2022
diff --git a/groovy-text-fade-in-script.markdown b/groovy-text-fade-in-script.markdown
@@ -0,0 +1,7 @@
+Groovy text fade in script
+--------------------------
+Just a quickie for y'all. 
+
+A [Pen](https://codepen.io/jcoulterdesign/pen/vOoxZb) by [Jamie Coulter](https://codepen.io/jcoulterdesign) on [CodePen](https://codepen.io).
+
+[License](https://codepen.io/jcoulterdesign/pen/vOoxZb/license).
diff --git a/index.haml b/index.haml
@@ -0,0 +1,9 @@
+.container
+  .intro Heres a quick script for y'all!
+  .sub Use it to animate in boring text
+  .dash -----------------------------------------------
+  .desc Comes with 2 pre-built effects
+  .fade Fade in some text
+  .bounce Bounce in some text
+  .dash2 -----------------------------------------------
+  .usage textify(element,method,delay)
diff --git a/script.js b/script.js
@@ -0,0 +1,39 @@
+split = function (element) {
+  words = $(element).text().split('');
+  for (i in words) {
+    words[i] = '<span>' + words[i] + '</span>';
+  }
+  text = words.join('');
+  $(element).html(text);
+};
+
+textify = function(element,method,delay) {
+  split(element);
+  $(element + ' span').css('opacity','0')
+  $(element + ' span').css('position','relative');
+  in_speed = 10;
+  count = 0;
+  setTimeout(function(){
+    count = 0;
+    $(element + ' span').each(function () {
+      if(method == 'fade'){
+        $(this).delay(0 + in_speed * count).animate({ opacity: '1' }, 200);
+      } else if(method == 'bounce'){
+        $(this).delay(0 + in_speed * count).animate({ opacity: '1','top':'-4px'}, 220,'easeOutCubic');
+        $(this).delay(0 + in_speed * count/4).animate({ opacity: '1','top':'0px'}, 220);
+      }
+      count++;
+    });
+  },delay);
+};
+
+/* Now textify! */
+
+textify('.intro','fade',500);
+textify('.sub','bounce',1500);
+textify('.dash','fade',2500);
+textify('.desc','fade',3500);
+textify('.fade','fade',4500);
+textify('.bounce','bounce',5500);
+textify('.dash2','fade',6500);
+textify('.usage','fade',7500);
diff --git a/scripts b/scripts
@@ -0,0 +1,2 @@
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
diff --git a/style.scss b/style.scss
@@ -0,0 +1,49 @@
+/* Base Fonts */
+
+@import url(https://fonts.googleapis.com/css?family=Oswald:400,700);
+
+body{
+  background:#4A6E8C;
+  font-family:oswald;
+  color:white;
+  text-transform:uppercase;
+  text-align:center;
+  .container{
+    position:absolute;
+    top:50%;
+    transform:translateY(-50%);
+    left:0;
+    right:0;
+  }
+  .intro{
+
+    font-size:30px;
+  }
+  .sub{
+    font-size: 26px;
+    letter-spacing: 1.4px;
+    margin-top: -4px;
+    color: #94C9F5;
+  }
+  .desc{
+    font-size: 27px;
+    letter-spacing: 1.23px;
+    margin-top: 4px;
+    color: #FFCB00;
+  }
+  .fade{
+    font-size: 53px;
+    margin-top: -14px;
+  }
+  .bounce{
+    font-size: 44.5px;
+    margin-top: -18px;
+    color: #F99323;
+  }
+  .dash2{
+    margin-top:-10px;
+  }
+  .usage{
+    font-size: 30px;
+  }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>