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: depth-factor data attribute

Browse source
This commit is contained in:
HarshKhandeparkar 2020-06-08 03:11:48 +05:30
parent ed14d06154
commit 9069f48756
2 changed files with 8 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -51,7 +51,7 @@
<!-- /navbar --> <!-- /navbar -->
<!-- globalParallax --> <!-- globalParallax -->
<div class="parallax" id="global-parallax"> <div class="parallax" data-depth-factor="3" id="global-parallax">
<img src="./img/lbry_background_art.png" alt="bg-img" class="parallax-img" /> <img src="./img/lbry_background_art.png" alt="bg-img" class="parallax-img" />
<div class="parallax-mask"></div> <div class="parallax-mask"></div>
<div class="parallax-bg"></div> <div class="parallax-bg"></div>

10
lib/js/index.js
View file

@ -1,10 +1,14 @@
// Parallax // Parallax
const depthFactor = 3; // 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', () => { $(window).on('scroll', () => {
const movedBy = window.scrollY; const movedBy = window.scrollY;
$('.parallax .parallax-img').css({ $('.parallax').each((i, elem) => {
transform: `translateY(${movedBy / depthFactor}px)` // Move differently than the rest of the window const depth = $(elem).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
})
}) })
}) })
// /Parallax // /Parallax