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: scroll fade effect

Browse source
This commit is contained in:
HarshKhandeparkar 2020-06-12 02:02:46 +05:30
parent aa7a219418
commit 5c3b4d0e97
2 changed files with 25 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
lib/css/index.css
View file

@ -165,4 +165,11 @@ nav {
.card:hover {
transform: scale(1.05);
}
/* /Card animations*/
/* /Card animations*/
/* scrollFade */
.scroll-fade {
opacity: 0;
transform: scale(0.9);
}
/* /scrollFade */

18
lib/js/index.js
View file

@ -20,4 +20,20 @@ $(window).on('scroll', () => {
if (window.scrollY !== 0) $('nav').removeClass('nav-transparent')
else $('nav').addClass('nav-transparent')
})
// /Transparent Navbar
// /Transparent Navbar
// ScrollFade Anim
const fadeOffset = 50;
const fadeDuration = 500;
$(window).on('scroll', () => {
$('.scroll-fade').each((i, elem) => {
const offset = $(elem).attr('data-fade-offset') || fadeOffset;
const duration = $(elem).attr('data-fade-duration') || fadeDuration;
if ($(window).height() - elem.getBoundingClientRect().top >= offset) {
$(elem).animate({opacity: 1}, duration).css({transition: `transform ${duration / 1000}s`}).css({transform: 'scale(1)'});
}
})
})
// /ScrollFade Anim