LBRYFoundation/lbryorg
1
0
Fork 0
mirror of https://github.com/LBRYFoundation/lbryorg.git synced 2025-08-23 20:47:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: multi-layered parallax

Browse source
This commit is contained in:
HarshKhandeparkar 2020-06-10 01:29:17 +05:30
parent 19f2a95065
commit f6d7ddd069
8 changed files with 24 additions and 157 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
branding/index.html
View file

@ -40,15 +40,15 @@
<!-- /navbar -->
<!-- globalParallax -->
<div class="parallax" data-depth-factor="3" id="global-parallax">
<img src="../img/lbry_background_art.png" alt="bg-img" class="parallax-img" />
<div class="parallax" id="global-parallax">
<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>

2
governance/index.html
View file

@ -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>

6
index.html
View file

@ -52,15 +52,15 @@
<!-- /navbar -->
<!-- globalParallax -->
<div class="parallax" data-depth-factor="3" id="global-parallax">
<img src="./img/lbry_background_art.png" alt="bg-img" class="parallax-img" />
<div class="parallax" id="global-parallax">
<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>

132
lib/css/article.css
View file

@ -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*/

8
lib/css/index.css
View file

@ -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;

12
lib/js/index.js
View file

@ -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) => {
const depth = $(elem).attr('data-depth-factor') || depthFactor; // dynamically get depthFactor
$('.parallax').each((i, parallax) => {
$(parallax).find('.parallax-layer').each((i, layer) => {
const depth = $(layer).attr('data-depth-factor') || depthFactor; // dynamically get depthFactor
$(elem).find('.parallax-img').css({
transform: `translateY(${movedBy / depth}px)` // Move differently than the rest of the window
$(layer).css({
transform: `translateY(+${movedBy / depth}px)` // Move differently than the rest of the window
})
})
})
})

5
swarm/index.html
View file

@ -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>

10
tavern/index.html
View file

@ -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">
<img src="../img/article-bg.jpg" alt="bg-img" class="parallax-img" />
<div class="parallax" id="global-parallax">
<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>