From 5c3b4d0e971417c072ae03414c5ad690cb951d8d Mon Sep 17 00:00:00 2001
From: HarshKhandeparkar <mjkgoa@gmail.com>
Date: Fri, 12 Jun 2020 02:02:46 +0530
Subject: [PATCH] feat: scroll fade effect

---
 lib/css/index.css |  9 ++++++++-
 lib/js/index.js   | 18 +++++++++++++++++-
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/lib/css/index.css b/lib/css/index.css
index a37ba8f..d6727d0 100644
--- a/lib/css/index.css
+++ b/lib/css/index.css
@@ -165,4 +165,11 @@ nav {
 .card:hover {
   transform: scale(1.05);
 }
-/* /Card animations*/
\ No newline at end of file
+/* /Card animations*/
+
+/* scrollFade */
+.scroll-fade {
+  opacity: 0;
+  transform: scale(0.9);
+}
+/* /scrollFade */
\ No newline at end of file
diff --git a/lib/js/index.js b/lib/js/index.js
index 95f8908..7419f80 100644
--- a/lib/js/index.js
+++ b/lib/js/index.js
@@ -20,4 +20,20 @@ $(window).on('scroll', () => {
   if (window.scrollY !== 0) $('nav').removeClass('nav-transparent')
   else $('nav').addClass('nav-transparent')
 })
-// /Transparent Navbar
\ No newline at end of file
+// /Transparent Navbar
+
+// ScrollFade Anim
+const fadeOffset = 50;
+const fadeDuration = 500;
+
+$(window).on('scroll', () => {
+  $('.scroll-fade').each((i, elem) => {
+    const offset = $(elem).attr('data-fade-offset') || fadeOffset;
+    const duration = $(elem).attr('data-fade-duration') || fadeDuration;
+
+    if ($(window).height() - elem.getBoundingClientRect().top >= offset) {
+      $(elem).animate({opacity: 1}, duration).css({transition: `transform ${duration / 1000}s`}).css({transform: 'scale(1)'});
+    }
+  })
+})
+// /ScrollFade Anim
\ No newline at end of file