1 files changed, 35 insertions, 0 deletions
diff --git a/assets/scripts/scroll-indicator.js b/assets/scripts/scroll-indicator.js
new file mode 100644
index 0000000..833c979
--- /dev/null
+++ b/assets/scripts/scroll-indicator.js
@@ -0,0 +1,35 @@
+const counter = document.querySelector('.percent')
+
+TweenLite.set(counter, {
+  xPercent: -5,
+  yPercent: -5
+})
+
+window.addEventListener('mousemove', moveCounter)
+
+function moveCounter (e) {
+  TweenLite.to(counter, 0.5, {
+    x: e.clientX,
+    y: e.clientY
+  })
+}
+
+function progress () {
+  const windowScrollTop = $(window).scrollTop()
+  const docHeight = $(document).height()
+  const windowHeight = $(window).height()
+  const progress = (windowScrollTop / (docHeight - windowHeight)) * 100
+
+  const $bgColor = progress > 99 ? '#fff' : '#fff'
+  const $textColor = progress > 99 ? '#fff' : '#333'
+
+  $('h1')
+    .text(Math.round(progress) + '%')
+    .css({ color: $textColor })
+
+  $('.fill')
+    .height(progress + '%')
+    .css({ backgroundColor: $bgColor })
+}
+progress()
+$(document).on('scroll', progress)