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: way better parallax with mask; transparent header;

Browse source
This commit is contained in:
HarshKhandeparkar 2020-06-08 02:33:04 +05:30
parent 20ac41a21e
commit 3cd5480e2b
3 changed files with 48 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
index.html
View file

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

35
lib/css/index.css
View file

@ -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;
}
}
/* Navbar */
nav {
transition: all 1s;
}
.nav-transparent {
background-color: transparent !important;
}
/* /Navbar */

11
lib/js/index.js
View file

@ -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
// /Parallax
// Transparent Navbar
$(window).on('scroll', () => {
if (window.scrollY !== 0) $('nav').removeClass('nav-transparent')
else $('nav').addClass('nav-transparent')
})
// /Transparent Navbar