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

fix: optimize the scroll linked effects

Browse source
This commit is contained in:
Harsh Khandeparkar 2020-06-29 11:27:50 +05:30 • committed by GitHub
parent 62a2d02eca
commit 1595031250
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 12 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
lib/js/index.js
View file

@ -1,17 +1,20 @@
// Parallax // Parallax
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. 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.
const parallaxOffset = 20;
$(window).on('scroll', () => { $(window).on('scroll', () => {
const movedBy = window.scrollY; const movedBy = window.scrollY;
if ($(window).height() - elem.getBoundingClientRect().top >= parallaxOffset) {
$('.parallax').each((i, parallax) => {
$(parallax).find('.parallax-layer').each((i, layer) => {
const depth = $(layer).attr('data-depth-factor') || depthFactor; // dynamically get depthFactor
$('.parallax').each((i, parallax) => { $(layer).css({
$(parallax).find('.parallax-layer').each((i, layer) => { transform: `translateY(+${movedBy / depth}px)` // Move differently than the rest of the window
const depth = $(layer).attr('data-depth-factor') || depthFactor; // dynamically get depthFactor })
$(layer).css({
transform: `translateY(+${movedBy / depth}px)` // Move differently than the rest of the window
}) })
}) })
}) }
}) })
// /Parallax // /Parallax
@ -34,8 +37,8 @@ $(window).on('scroll', () => {
const delay = $(elem).attr('data-fade-delay') || fadeDelay; const delay = $(elem).attr('data-fade-delay') || fadeDelay;
if ($(window).height() - elem.getBoundingClientRect().top >= offset) { if ($(window).height() - elem.getBoundingClientRect().top >= offset) {
$(elem).delay(delay).animate({opacity: 1}, duration).css({transition: `transform ${duration / 1000}s`}).css({transform: 'scale(1)'}); $(elem).delay(delay).animate({opacity: 1}, duration).css({transition: `transform ${duration / 1000}s`}).css({transform: 'scale(1)'}).removeClass('scroll-fade');
} }
}) })
}) })
// /ScrollFade Anim // /ScrollFade Anim