feat: multi-layered parallax

branding/index.html

@@ -40,15 +40,15 @@
     <!-- /navbar -->
     
     <!-- globalParallax -->
-    <div class="parallax" data-depth-factor="3" id="global-parallax">
+    <div class="parallax" id="global-parallax">
-      <img src="../img/lbry_background_art.png" alt="bg-img" class="parallax-img" />
+      <img src="../img/lbry_background_art.png" data-depth-factor="3" alt="bg-img" class="parallax-layer main-parallax-img" />
       <div class="parallax-mask"></div>
       <div class="parallax-bg"></div>
 
       <!-- globalParallaxContent -->
       <div class="parallax-content">
         <!-- jumbotron -->
-        <div class="jumbotron text-white" style="background-color: transparent;">
+        <div class="jumbotron text-white parallax-layer" data-depth-factor="4" style="background-color: transparent;">
           <div class="container text-sm-center pt-5">
             <h1 class="display-2" Ideas style="font-weight: bold;">LBRY Branding Assets</h1>
             <p class="lead">Branding Assets IG</p>

governance/index.html

@@ -41,7 +41,7 @@
     
     <!-- globalParallax -->
     <div class="parallax" id="global-parallax">
-      <img src="../img/article-bg.jpg" alt="bg-img" class="parallax-img">
+      <img src="../img/article-bg.jpg" data-depth-factor="3" alt="bg-img" class="parallax-layer">
       <div class="parallax-bg"></div>
       <div class="parallax-mask"></div>
 

index.html

@@ -52,15 +52,15 @@
   <!-- /navbar -->
 
   <!-- globalParallax -->
-  <div class="parallax" data-depth-factor="3" id="global-parallax">
+  <div class="parallax" id="global-parallax">
-    <img src="./img/lbry_background_art.png" alt="bg-img" class="parallax-img" />
+    <img src="./img/lbry_background_art.png" data-depth-factor="3" alt="bg-img" class="parallax-layer main-parallax-img" />
     <div class="parallax-mask"></div>
     <div class="parallax-bg"></div>
     
     <!-- globalParallaxContent -->
     <div class="parallax-content">
       <!-- jumbotron -->
-      <div class="jumbotron text-white" style="background-color: transparent;">
+      <div class="jumbotron text-white parallax-layer" data-depth-factor="4" style="background-color: transparent;">
         <div class="container text-sm-center pt-5">
           <h1 class="display-4" Ideas style="font-weight: bold;">Welcome to LBRY </h1>
           <p class="lead">LBRY LBRY LBRY LBRY LBRY LBRY LBRY LBRY LBRY LBRY LBRY LBRY</p>

lib/css/article.css

@@ -1,132 +0,0 @@
-/* Fonts */
-@font-face {
-  font-family: 'Oxygen';
-  src: url(../fonts/Oxygen/Oxygen-Regular.ttf);
-}
-
-@font-face {
-  font-family: 'Oxygen, Bold';
-  src: url(../fonts/Oxygen/Oxygen-Bold.ttf);
-}
-/* /Fonts */
-
-body {
-  font-family: 'Oxygen';
-}
-
-html {
-  scroll-behavior: smooth;
-}
-
-
-/* Parallax */
-.parallax .parallax-img {
-  z-index: -1;
-  position: absolute;
-  width: 100%;
-  overflow: hidden;
-}
-
-.parallax .parallax-content {
-  z-index: 100;
-  position: relative;
-  background-color: transparent !important;
-}
-
-.parallax .parallax-bg {
-  z-index: -2;
-  position: absolute;
-  height: 100%;
-  width: 100%;
-  background-color: teal;
-  opacity: 0.3;
-}
-
-.parallax .parallax-mask {
-  z-index: 1;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-
-.parallax .above-parallax {
-  box-shadow: rgba(0, 0, 0, 0.6) 0 0 1rem;
-  background: rgba(5, 20, 40, 0.93);
-  color: white;
-  padding: 2rem;
-  z-index: 100;
-}
-
-.parallax {
-  overflow: hidden;
-}
-/* /Parallax */
-
-/* Global Parallax */
-#global-parallax .parallax-img {
-  width: 100%;
-  margin: 0;
-  position: absolute;
-}
-
-#global-parallax .parallax-mask {
-  position: fixed;
-  background-color: rgb(20, 120, 200);
-  opacity: 0.35;
-}
-
-#global-parallax .parallax-bg {
-  position: fixed;
-  height: 100%;
-  background-color: black;
-  opacity: 1;
-}
-
-#global-parallax {
-  margin: 0;
-}
-/* /Global Parallax */
-
-/* Navbar */
-nav {
-  transition: all 0.4s;
-  box-shadow: rgba(0, 0, 0, 0.6) 0 0 1rem;
-}
-
-.nav-transparent {
-  background-color: transparent !important;
-  box-shadow: none;
-}
-
-.nav-item {
-  color: white !important;
-}
-
-.nav-link.active {
-  background-color: rgb(11, 90, 121);
-  border-radius: 0.2rem;
-}
-/* /Navbar */
-
-/* Special Branded Color Classes*/
-.lbry-teal {
-  background-color:rgb(3, 76, 105);
-}
-
-.dropdown-item.active {
-  background-color:rgb(3, 76, 105);
-}
-
-.dropdown-item:active {
-  background-color:rgb(3, 76, 105);
-}
-
-.dropdown-menu {
-  background-color:rgb(3, 76, 105);
-}
-
-.dropdown-item {
-  color: white;
-}
-/* /Special Branded Color Classes*/

lib/css/index.css

@@ -20,10 +20,8 @@ html {
 
 
 /* Parallax */
-.parallax .parallax-img {
+.parallax .parallax-layer {
   z-index: -1;
-  position: absolute;
-  width: 100%;
   overflow: hidden;
 }
 
@@ -43,7 +41,7 @@ html {
 }
 
 .parallax .parallax-mask {
-  z-index: 1;
+  z-index: 25;
   position: absolute;
   width: 100%;
   height: 100%;
@@ -64,7 +62,7 @@ html {
 /* /Parallax */
 
 /* Global Parallax */
-#global-parallax .parallax-img {
+#global-parallax .main-parallax-img {
   width: 100%;
   margin: 0;
   position: absolute;

lib/js/index.js

@@ -1,13 +1,15 @@
 // Parallax
-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.
+const depthFactor = 5; // Depth of the image wrt to the 0 z-index. Infinity being at the same distance as the rest of the content and 1 being as far away as possible.
 $(window).on('scroll', () => {
   const movedBy = window.scrollY;
 
-  $('.parallax').each((i, elem) => {
+  $('.parallax').each((i, parallax) => {
-    const depth = $(elem).attr('data-depth-factor') || depthFactor; // dynamically get depthFactor
+    $(parallax).find('.parallax-layer').each((i, layer) => {
+      const depth = $(layer).attr('data-depth-factor') || depthFactor; // dynamically get depthFactor
 
-    $(elem).find('.parallax-img').css({
+      $(layer).css({
-      transform: `translateY(${movedBy / depth}px)` // Move differently than the rest of the window
+        transform: `translateY(+${movedBy / depth}px)` // Move differently than the rest of the window
+      })
     })
   })
 })

swarm/index.html

@@ -12,9 +12,8 @@
     <!-- /CSS DEPENDENCIES -->
 
     <!--CUSTOM CSS-->
-    <!-- <link rel="stylesheet" href="../lib/css/Article-Clean.css"> -->
+    <link rel="stylesheet" href="../lib/css/index.css">
     <link rel="stylesheet" href="../lib/css/article.css">
-    <!-- <link rel="stylesheet" href="../lib/css/styles.css"> -->
     <!--/CUSTOM CSS-->
 </head>
 
@@ -41,7 +40,7 @@
 
   <!-- globalParallax -->
   <div class="parallax" data-depth-factor="3" id="global-parallax">
-    <img src="../img/article-bg2.jpg" alt="bg-img" class="parallax-img" />
+    <img src="../img/article-bg2.jpg" alt="bg-img" class="parallax-layer" />
     <div class="parallax-mask"></div>
     <div class="parallax-bg"></div>
 

tavern/index.html

@@ -7,9 +7,9 @@
     <title>LBRY Foundation</title>
     <link rel="stylesheet" href="../lib/bootstrap/css/bootstrap.min.css">
     <link rel="stylesheet" href="../lib/fontawesome/css/all.min.css">
-    <!-- <link rel="stylesheet" href="../lib/css/Article-Clean.css"> -->
+    
+    <link rel="stylesheet" href="../lib/css/index.css">
     <link rel="stylesheet" href="../lib/css/article.css">
-    <!-- <link rel="stylesheet" href="../lib/css/styles.css"> -->
 </head>
 
 <body>
@@ -34,14 +34,14 @@
     <!-- /navbar -->
     
     <!-- globalParallax -->
-    <div class="parallax" data-depth-factor="3" id="global-parallax">
+    <div class="parallax" id="global-parallax">
-      <img src="../img/article-bg.jpg" alt="bg-img" class="parallax-img" />
+      <img src="../img/article-bg.jpg" data-depth-factor="3" alt="bg-img" class="parallax-layer main-parallax-img" />
       <div class="parallax-mask"></div>
       <div class="parallax-bg"></div>
 
       <div class="parallax-content">
         <!-- jumbotron -->
-        <div class="jumbotron text-white" style="background-color: transparent;">
+        <div class="jumbotron text-white parallax-layer" data-depth-factor="4" style="background-color: transparent;">
           <div class="container text-sm-center pt-5">
             <h1 class="display-2" Ideas style="font-weight: bold;">The Tavern</h1>
             <p class="lead">The LBRY Tavern. Cheers!</p>