Musings of a Fondue

Website Study - Parachutes

Original Date: August 31, 2014

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.

Here is the result

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.
easing functions


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)
    }
}

Comments