From 3cd5480e2b37a6f8f095f7c58bba8d847f05f274 Mon Sep 17 00:00:00 2001
From: HarshKhandeparkar <mjkgoa@gmail.com>
Date: Mon, 8 Jun 2020 02:33:04 +0530
Subject: [PATCH] feat: way better parallax with mask; transparent header;

---
 index.html        |  9 +++++----
 lib/css/index.css | 35 ++++++++++++++++++++++++++++++++++-
 lib/js/index.js   | 11 +++++++++--
 3 files changed, 48 insertions(+), 7 deletions(-)
diff --git a/index.html b/index.html
index 0ea7f33..ededacd 100644
--- a/index.html
+++ b/index.html
@@ -21,7 +21,7 @@
 
 <body id="home" data-spy="scroll" data-target=".navbar" data-offset="100">
   <!-- navbar -->
-  <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
+  <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top nav-transparent">
     <div class="container">
       <span class="navbar-brand order-1 mr-0"><i class="fab fa-github"></i></span>
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
@@ -43,11 +43,12 @@
   <!-- globalParallax -->
   <div class="parallax" id="global-parallax">
     <img src="./img/lbry_background_art.png" alt="bg-img" class="parallax-img" />
-
+    <div class="parallax-mask" style="background-color: #026dab; opacity: 0.7;"></div>
+    
     <!-- globalParallaxContent -->
     <div class="parallax-content">
       <!-- jumbotron -->
-      <div class="jumbotron jumbotron-fluid bg-info text-white">
+      <div class="jumbotron text-white" style="background-color: transparent;">
         <div class="container text-sm-center pt-5">
           <h1 class="display-2" Ideas>Welcome to LBRY </h1>
           <p class="lead">LBRY LBRY LBRY LBRY LBRY LBRY LBRY LBRY LBRY LBRY LBRY LBRY</p>
@@ -59,7 +60,7 @@
       </div>
       <!-- /jumbotron -->
 
-      <div class="container pt-4">
+      <div class="pt-4 above-parallax">
         <!-- about -->
         <div id="about" class="row">
           <div class="col-lg order-lg-2">
diff --git a/lib/css/index.css b/lib/css/index.css
index 1a97c5e..aaecb6e 100644
--- a/lib/css/index.css
+++ b/lib/css/index.css
@@ -14,6 +14,11 @@ body {
   font-family: Oxygen;
 }
 
+html {
+  scroll- style="background-color: transparent !important;"behavior: smooth;
+}
+
+
 /* Parallax */
 .parallax .parallax-img {
   z-index: -1;
@@ -34,6 +39,23 @@ body {
   position: absolute;
   height: 100%;
   width: 100%;
+  background-color: teal;
+  opacity: 0.3;
+}
+
+.parallax .parallax-mask {
+  z-index: 0;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.parallax .above-parallax {
+  /* box-shadow: rgba(0, 0, 0, 0.7) 0 0 0.1rem; */
+  background: white;
+  padding: 2rem;
+  z-index: 100;
 }
 
 .parallax {
@@ -43,10 +65,21 @@ body {
 
 #global-parallax .parallax-img {
   width: 100%;
+  height: 100%;
   margin: 0;
 }
 
 #global-parallax {
   /* width: 100%; */
   margin: 0;
-}
\ No newline at end of file
+}
+
+/* Navbar */
+nav {
+  transition: all 1s;
+}
+
+.nav-transparent {
+  background-color: transparent !important;
+}
+/* /Navbar */
\ No newline at end of file
diff --git a/lib/js/index.js b/lib/js/index.js
index 0c7a143..458322e 100644
--- a/lib/js/index.js
+++ b/lib/js/index.js
@@ -1,5 +1,5 @@
 // Parallax
-const depthFactor = 10; // Depth of the image wrt to the 0 z-index. 1 being at the same distance as the rest of the content and Infinity being as far away as possible.
+const depthFactor = 5; // Depth of the image wrt to the 0 z-index. 1 being at the same distance as the rest of the content and Infinity being as far away as possible.
 $(window).on('scroll', () => {
   const movedBy = window.scrollY;
 
@@ -7,4 +7,11 @@ $(window).on('scroll', () => {
     transform: `translateY(${movedBy / depthFactor}px)` // Move differently than the rest of the window
   })
 })
-// /Parallax
\ No newline at end of file
+// /Parallax
+
+// Transparent Navbar
+$(window).on('scroll', () => {
+  if (window.scrollY !== 0) $('nav').removeClass('nav-transparent')
+  else $('nav').addClass('nav-transparent')
+})
+// /Transparent Navbar
\ No newline at end of file
