Add text animation

css/style.css

@@ -255,4 +255,29 @@ a:hover {
 ::-webkit-scrollbar-track{
   background: transparent;
 }
-/* ------------ */
+/* ------------ */
+
+
+.reveal{
+  position: relative;
+  opacity: 0;
+}
+
+.reveal.active{
+  opacity: 1;
+}
+
+.active.fade {
+  animation: fade 1s;
+}
+
+@keyframes fade {
+  0% {
+    transform: scale(0.8, 0.8);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1, 1);
+    opacity: 1;
+  }
+}

js/script.js

@@ -1,4 +1,20 @@
 //Init
+function reveal() {
+  var reveals = document.querySelectorAll(".reveal");
+
+  for (var i = 0; i < reveals.length; i++) {
+    var windowHeight = window.innerHeight;
+    var elementTop = reveals[i].getBoundingClientRect().top;
+    var elementVisible = 150;
+
+    if (elementTop < windowHeight - elementVisible) {
+      reveals[i].classList.add("active");
+    }
+  }
+}
+
+window.addEventListener("scroll", reveal);
+
   $(document).ready(function(){
     init();
   });
@@ -49,4 +65,7 @@
     $(window).scroll(function () {
       $(this).scrollTop() > 50 ? $('#scroll').fadeOut() : $('#scroll').fadeIn()
     });
-  }
+  }
+
+
+