arifd/theatre-curtain-preloader.js

## theatre-curtain-preloader.js
// THEATRE CURTAIN PRELOADER
// by: Arif Driessen
// about: this code produces a fast loading, auto revealing theatre-curtain preloader.
// usage: put this code inside <script> tags INSIDE and at the top of <body>
function createCurtainCSS(NUMFOLDS) {
  // draw a preloading Curtain!
  const parabola = val => Math.pow(4.0 * val * (1.0 - val), 1.0);
  let curtainCSS = 'background-image: ';
  // fade to top
  curtainCSS += 'linear-gradient(180deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%), ';
  // generate folds
  curtainCSS += 'linear-gradient(90deg, rgb(255,0,0) 0%, ';
  for (let i = 1; i < NUMFOLDS-1; i++) {
    const random = 1 - parabola(Math.random());
    const colour = Math.floor(random * 190 + 65);
    curtainCSS += `rgb(${colour},0,0) ${(100/NUMFOLDS) * i}%, `;
  }
  curtainCSS += 'rgb(255,0,0) 100%);';
  return curtainCSS;
}

// create a container to disable overflow
const container = document.createElement('div');
container.style.cssText = 'pointer-events: none;overflow:hidden;position:absolute;top:0;left:0;width:100%;height:100vh;';

const backdrop = document.createElement('div');
backdrop.style.cssText = 'pointer-events: none;overflow:hidden;position:absolute;top:0;left:0;width:100%;height:100vh;z-index:99;background:#000;';
document.body.appendChild(container);
container.appendChild(backdrop);

const curtainLeft = document.createElement('div');
curtainLeft.style.cssText = 'position:absolute;top:0;left:0;width:50%;height:100vh;z-index:100;background:#000;';
curtainLeft.style.cssText += createCurtainCSS(25);
curtainLeft.style.cssText += 'box-shadow:0px 0px 10px 0px rgba(51,51,51,0.75);'
container.appendChild(curtainLeft);

const curtainRight = document.createElement('div');
curtainRight.style.cssText = 'position:absolute;top:0;right:0;width:50%;height:100vh;z-index:100;background:#000;';
curtainRight.style.cssText += createCurtainCSS(25);
curtainRight.style.cssText += 'box-shadow:0px 0px 10px 0px rgba(51,51,51,0.75);';
container.appendChild(curtainRight);

// pull back the curtains when ready!
window.addEventListener('load',() => {
  backdrop.style.transition = 'opacity 2s ease-in-out';
  backdrop.style.opacity = 0;
  curtainLeft.style.transition = 'all 2s cubic-bezier(0.5,-0.025,0.6,1)';
  curtainLeft.style.width = 0;
  curtainLeft.style.transform = `translateX(-${window.innerHeight/8}px)`;
  curtainRight.style.transition = 'all 2s cubic-bezier(0.5,-0.025,0.6,1)';
  curtainRight.style.width = 0;
  curtainRight.style.transform = `translateX(${window.innerHeight/8}px)`;
});
	// THEATRE CURTAIN PRELOADER
	// by: Arif Driessen
	// about: this code produces a fast loading, auto revealing theatre-curtain preloader.
	// usage: put this code inside <script> tags INSIDE and at the top of <body>
	function createCurtainCSS(NUMFOLDS) {
	// draw a preloading Curtain!
	const parabola = val => Math.pow(4.0 * val * (1.0 - val), 1.0);
	let curtainCSS = 'background-image: ';
	// fade to top
	curtainCSS += 'linear-gradient(180deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%), ';
	// generate folds
	curtainCSS += 'linear-gradient(90deg, rgb(255,0,0) 0%, ';
	for (let i = 1; i < NUMFOLDS-1; i++) {
	const random = 1 - parabola(Math.random());
	const colour = Math.floor(random * 190 + 65);
	curtainCSS += `rgb(${colour},0,0) ${(100/NUMFOLDS) * i}%, `;
	}
	curtainCSS += 'rgb(255,0,0) 100%);';
	return curtainCSS;
	}

	// create a container to disable overflow
	const container = document.createElement('div');
	container.style.cssText = 'pointer-events: none;overflow:hidden;position:absolute;top:0;left:0;width:100%;height:100vh;';

	const backdrop = document.createElement('div');
	backdrop.style.cssText = 'pointer-events: none;overflow:hidden;position:absolute;top:0;left:0;width:100%;height:100vh;z-index:99;background:#000;';
	document.body.appendChild(container);
	container.appendChild(backdrop);

	const curtainLeft = document.createElement('div');
	curtainLeft.style.cssText = 'position:absolute;top:0;left:0;width:50%;height:100vh;z-index:100;background:#000;';
	curtainLeft.style.cssText += createCurtainCSS(25);
	curtainLeft.style.cssText += 'box-shadow:0px 0px 10px 0px rgba(51,51,51,0.75);'
	container.appendChild(curtainLeft);

	const curtainRight = document.createElement('div');
	curtainRight.style.cssText = 'position:absolute;top:0;right:0;width:50%;height:100vh;z-index:100;background:#000;';
	curtainRight.style.cssText += createCurtainCSS(25);
	curtainRight.style.cssText += 'box-shadow:0px 0px 10px 0px rgba(51,51,51,0.75);';
	container.appendChild(curtainRight);

	// pull back the curtains when ready!
	window.addEventListener('load',() => {
	backdrop.style.transition = 'opacity 2s ease-in-out';
	backdrop.style.opacity = 0;
	curtainLeft.style.transition = 'all 2s cubic-bezier(0.5,-0.025,0.6,1)';
	curtainLeft.style.width = 0;
	curtainLeft.style.transform = `translateX(-${window.innerHeight/8}px)`;
	curtainRight.style.transition = 'all 2s cubic-bezier(0.5,-0.025,0.6,1)';
	curtainRight.style.width = 0;
	curtainRight.style.transform = `translateX(${window.innerHeight/8}px)`;
	});