Skip to content

Instantly share code, notes, and snippets.

@arifd

arifd/theatre-curtain-preloader.js

Created March 31, 2020 17:25
Show Gist options
  • Save arifd/6cae4af0d16091e752a11cc0ef0efc17 to your computer and use it in GitHub Desktop.
Save arifd/6cae4af0d16091e752a11cc0ef0efc17 to your computer and use it in GitHub Desktop.
Download ZIP
Theatre/Theater/Stage Curtain/Drape Preloader for any website
Raw
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)`;
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment