loader

loader

by nhulea

HTML

<img id="rating-icon" src="http://i.cdn.turner.com/adultswim/adultswimtv/tools/img/global/rating-icons/tv-ma.gif" alt="tv-ma">
<div id="center">
    <div id="videoWrapper" style="display:none;">
        <!--<img src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/vid_image_150.png" />-->
        <iframe id="bj_vid" src="//www.youtube.com/embed/aKi-cj39-xg" frameborder="0" allowfullscreen></iframe>
        <div id="txtImages" style="display:none;">
            <div id="blogo">
                <img src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/BLACK-JESUS.png" />
            </div>
            <div id="tune">
                <img src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/PREMIERES-AUGUST-7TH-AT-11-00P-.png" />
            </div>
            <div id="aslogo">
                <img src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/asLogo.png" />
            </div>
        </div>
    </div>
</div>
<div id="hands">
    <div id="left" style="display:none;">
        <img src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/lefty_v3_slice.png" />
    </div>
    <div id="right" style="display:none;">
        <img src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/righty_v3_slice_54.png" />
    </div>
</div>
<canvas id="myCanvas"></canvas>
<canvas id="myCanvas2"></canvas>
<div id="loading">
    <img src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/loader.gif" />
</div>

CSS

html, body {
                width: 100%;
                height: 100%;
                margin: 0px;
                border: 0;
                overflow: hidden;
                /*  Disable scrollbars */
                display: block;
                /* No floating content on sides */
            }
            #videoWrapper img {
                position: relative;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
            #videoWrapper iframe {
                position: relative;
                top: 0;
                left: 8px;
                width: 96%;
                height: 100%;
            }
            #videoWrapper {
                position: absolute;
                top: 0;
                bottom: 114px;
                left: 0;
                right: 0;
                margin: auto;
                width:50%;
                height:50%;
                z-index:8;
            }
            #myCanvas {
                z-index: 1;
                display: block;
                position: absolute;
                bottom: 35px;
                left: 0;
                right: 0;
            }
            #myCanvas2 {
                z-index:-1;
                display:block;
                position: absolute;
                top: 0;
                left: 0;
            }
            #center {
                width: 50%;
                height: 100%;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
            }
            #hands {
                width: 50%;
                height: 100%;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
            }
            #left {
                z-index: 8;
                height: 50%;
               ...

JavaScript

function preloadImages(srcs, imgs, callback) {
    var img;
    var remaining = srcs.length;
    for (var i = 0; i < srcs.length; i++) {
        img = new Image();
        img.onload = function () {
            --remaining;
            if (remaining <= 0) {
                callback();
            }
        };
        img.src = srcs[i];
        imgs.push(img);
    }
}

imageSrcs = [
    "http://files.hulea.org/lefty_v3.png", 
    "http://files.hulea.org/righty_v3.png", 
    "http://files.hulea.org/lefty_v3_slice.png", 
    "http://files.hulea.org/righty_v3_slice_54.png", 
    "http://files.hulea.org/cloud_final_2.png", 
    "http://files.hulea.org/cloud_4.png", 
    "http://files.hulea.org/sky.jpg", 
    "http://files.hulea.org/vid_image_right_150.png", 
    "http://files.hulea.org/vid_image_left_150.png"];

var images = [];

console.log(images);   

var canvas = document.getElementById("myCanvas");
var canvas2 = document.getElementById("myCanvas2");
var center = document.getElementById("center");
var hands = document.getElementById("hands");
var vid = document.getElementById("videoWrapper");
var video = document.getElementById("bj_vid");
var vWrapper = document.getElementById("videoWrapper");
var leftHand = document.getElementById("left");
var rightHand = document.getElementById("right");
var txt = document.getElementById("txtImages");
var vidWidth, vidHeight;
var W = window.outerWidth;
var H = window.outerHeight;
var m = Math.min(W, H);
var s = m * 4.5E-4;
var ch = 29.75 * s;
canvas.width = W;
canvas.height = H;
canvas2.width = W;
canvas2.height = H;
var vidWidth = images[7].width * s + images[8].width * s,
    vidHeight = images[7].height * s,
    lhWidth = images[2].width * s,
    rhWidth = images[3].width * s,
    rhHeight = images[1].height * s;
var ctx = canvas.getContext("2d");
var ctx2 = canvas2.getContext("2d");
var clouds = [images[4], images[5]];
var idx = 0;
var vel = 0.55;
var v = isNaN(v) ? 0 : v;
var f = isNaN(f) ? 0 : f;
var alpha = 1;
var alpha2...