fortytwo/me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

bg: fix rendering issues and improve speed

Browse source
This commit is contained in:
Naman Sood 2021-06-16 04:33:45 -04:00 • committed by GitHub
parent b08461ce82
commit 115d5ed946
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 41 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

2
css/style.css
View file

@ -448,7 +448,7 @@ footer {
width: 100%; width: 100%;
height: 100%; height: 100%;
opacity: 0; opacity: 0;
transition: all 0.225s ease; will-change: opacity;
} }
@media (min-width: 1800px) { @media (min-width: 1800px) {

3
css/style.scss
View file

@ -517,7 +517,8 @@ footer {
width: 100%; width: 100%;
height: 100%; height: 100%;
opacity: 0; opacity: 0;
transition: all 0.225s ease; //transition: all 0.225s linear;
will-change: opacity;
} }
} }

66
js/script.js
View file

@ -32,46 +32,39 @@ function bgInit(useCSSbg) {
bgInit(false); bgInit(false);
var scrolledWindows, minBg, maxBg, delta, ogDelta;
function calculateBg() { function calculateBg() {
if(!mobileConditions()) { if(!mobileConditions()) {
bgInit(false); bgInit(false);
let backgrounds = $('.bg-scroller').find('.bg');
$('.bg-scroller').find('.bg').each(function() { let bgOps = new Array(backgrounds.length).fill(0);
$(this).css('opacity', '0'); let textOps = new Array(backgrounds.length).fill(0);
}); let scrolledWindows = ($(window).scrollTop() - $(window).height()) / $(window).height();
if(scrolledWindows < 0) scrolledWindows = 0;
scrolledWindows = $(window).scrollTop() / $(window).height(); let minBg = Math.floor(scrolledWindows);
// start hax: subtract number of sections above changing background let maxBg = minBg + 1;
scrolledWindows -= $($('.works-card')[0]).offset().top / $(window).height(); let delta = scrolledWindows - minBg;
scrolledWindows = Math.max(scrolledWindows, 0); if(delta < 0.3) {
// end hax
minBg = Math.floor(scrolledWindows);
maxBg = minBg + 1;
delta = scrolledWindows - minBg;
ogDelta = delta;
if(delta < 0.4) {
delta = 0; delta = 0;
} }
else if(delta < 0.6) { else if(delta < 0.7) {
delta = 5*(delta-0.4); delta = 2.5*(delta-0.3);
} }
else { else {
delta = 1; delta = 1;
} }
delta = -1 * Math.cos(delta/1 * (Math.PI/2)) + 1; //delta = -1 * Math.cos(delta/1 * (Math.PI/2)) + 1;
$('.bg-scroller').find('.bg:nth-child(' + (minBg+1) + ')').css('opacity', 1); bgOps[minBg] = 1;
$('.bg-scroller').find('.bg:nth-child(' + (maxBg+1) + ')').css('opacity', delta); bgOps[maxBg] = delta;
backgrounds.each(function(i) {
$(this).css('opacity', bgOps[i]);
$('.works-card:nth-child(' + (minBg+2) + ') .text-container').css({
opacity: 1 - delta,
}); });
$('.works-card:nth-child(' + (maxBg+2) + ') .text-container').css({
opacity: delta, textOps[minBg] = 1-delta;
textOps[maxBg] = delta;
$('.works-card .text-container').each(function(i) {
$(this).css('opacity', textOps[i]);
}); });
} }
@ -84,9 +77,7 @@ calculateBg();
var timer; var timer;
$(window).on('scroll', function() { setInterval(function() {
scrollAnimations();
clearTimeout(timer); clearTimeout(timer);
timer = setTimeout(function() { timer = setTimeout(function() {
@ -103,13 +94,13 @@ $(window).on('scroll', function() {
} }
}); });
if(hash) { if(hash && '#' + hash != location.hash) {
history.replaceState({ history.replaceState({
page: hash page: hash
}, $('title').html(), '#' + hash); }, $('title').html(), '#' + hash);
} }
}, 200); }, 200);
}); }, 500);
function scrollAnimations() { function scrollAnimations() {
calculateBg(); calculateBg();
@ -127,6 +118,13 @@ function scrollAnimations() {
} }
} }
//window.addEventListener('scroll', scrollAnimations);
function scrollLoop() {
scrollAnimations();
requestAnimationFrame(scrollLoop);
}
scrollLoop();
var canvas = $('canvas#bg')[0]; var canvas = $('canvas#bg')[0];
canvas.width = $(window).width(); canvas.width = $(window).width();
@ -195,11 +193,13 @@ for(var i = 0; i < n; i++) {
} }
function loop() { function loop() {
if($(window).scrollTop() <= $(window).height()) {
ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.clearRect(0, 0, canvas.width, canvas.height);
for(var i = 0; i < n; i++) { for(var i = 0; i < n; i++) {
dots[i].render(); dots[i].render();
} }
}
requestAnimationFrame(loop); requestAnimationFrame(loop);
} }