Came across this site and was blown away by its design!
After spending an inordinate amount of time browsing through it, I decided to see if I could duplicate one of the pages.
One thing they used is jQuery for a couple of functions including fadeIn and fadeOut. I didn’t want to use jQuery. So I tried writing custom functions for fadeIn and fadeOut. Turned out to be so much work haha! I see the value add of jQuery.
The function I wrote only scales linearly. A future iteration would ideally be able to take in a parameter that specifies the rate of change (linear, ease-in, ease-out etc. ) and a parameter that specifies duration. Also it would be class-like such that instances of it could be created as needed.
function id(name){
return document.getElementById(name);
}
document.addEventListener('DOMContentLoaded', function(){
// stackoverflow.com/a/18775368
// substitute for jQuery's $(document).ready()
var stuff = [ id("top_hidden"), id("video-controls")];
fadeInOut( stuff );
});
function fadeIn(elem, dur){
//Gradually increase opacity till reach 1
if (elem[0].style.opacity < 1){
var fIn;
window.clearInterval(fIn); // reset?
fIn = window.setInterval(function(){
for(var i in elem){
var x = window.getComputedStyle(elem[i]).opacity; //includes non-inline opacity
elem[i].style.opacity = parseFloat(x) + 1/dur;
}
if (parseFloat(elem[0].style.opacity) >= 0.96){
window.clearInterval(fIn);
// console.log("I was cleared");
}
}, 1);
}
}
var fOut; //not pretty lol
function fadeOut(elem, dur){
//Gradually decrease opacity till reach 0
if (elem[0].style.opacity > 0){
//var fOut;
fOut = window.setInterval(function(){
for(var i in elem){
var x = window.getComputedStyle(elem[i]).opacity;
elem[i].style.opacity = parseFloat(x) - 1/dur;
}
if (parseFloat(elem[0].style.opacity) <= 0.04){
window.clearInterval(fOut);
// console.log("I was cleared");
}
}, 1);
}
}
function fadeInOut(elem){
var t;
document.onmousemove = function(){
window.clearInterval(fOut); // stop fadingOut
fadeIn(elem, 50); // start fadingIn
clearTimeout(t); // reset counter
t = setTimeout(function(){
fadeOut(elem, 50); // start fadingOut after specified time elapsed
}, 1500)
}
}