cloud particles random motion w/ hands moving and video rect and video centered

cloud particles random motion cloudy sky black jesus title absolute centered video

by Nick Hulea

HTML

<script src="http://use.typekit.net/aba1wjf.js"></script>
<div id="type" style="display:none;">
    <div id="asLogo"><a href="http://www.adultswim.com/" target="_blank"><img alt="adult swim" title="adult swim" src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/asLogo.png"/></a>

    </div>
    <div id="bjLogo">BLACK JESUS</div>
    <div id="showTime"> <a href="http://www.adultswim.com/" target="_blank">
        <img alt="show time" title="show time" src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/080714.png"/></a>

    </div>
</div>
<div id="out" style="display:none;">
    <div id="rightHand"><img src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/right-hand3.png"/></div>
    <iframe src="//www.youtube.com/embed/aKi-cj39-xg" frameborder="0" allowfullscreen></iframe>
    <div id="leftHand"><img src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/left-hand.png"/></div>
    <!--<video id="vid" controls poster="http://0639ac876cdeb83a534d-95c931daa7c80b903aae4215b472f9f8.r4.cf1.rackcdn.com/Snowball.png">
        <source src="http://0639ac876cdeb83a534d-95c931daa7c80b903aae4215b472f9f8.r4.cf1.rackcdn.com/Snowball.mp4" type="video/mp4" />
        <source src="http://0639ac876cdeb83a534d-95c931daa7c80b903aae4215b472f9f8.r4.cf1.rackcdn.com/Snowball.ogv" type="video/ogg" />
        <source src="http://0639ac876cdeb83a534d-95c931daa7c80b903aae4215b472f9f8.r4.cf1.rackcdn.com/Snowball.mp4" type="video/webm" />
<em>Sorry, your browser doesn't support HTML5 video.</em>
    </video>-->
</div>
<canvas id="canvas"></canvas>
<div style="font-family:'helveticaCndBld';"></div>
<div style="font-family:'TrajanPro3Bold';"></div>
<div id="bg1"></div>
<div id="bg2"></div>
<!-- ctx.globalCompositeOperation=' source-atop'; ctx.globalCompositeOperation=' source-in'; ctx.globalCompositeOperation=' source-out'; ctx.globalCompositeOperation='...

CSS

html, body {
                width: 100%;
                height: 100%;
                margin: 0px;
                border: 0;
                overflow: hidden;
                /*  Disable scrollbars */
                display: block;
                /* No floating content on sides */
            }
            iframe, video {
                position: relative;
                width: 689px;
                height: 405px;
            }
            canvas {
                z-index: 3;
                position: absolute;
                top: 0;
                left: 0;
            }
            #out {
                z-index: 2;
                height: 50%;
                width: 50%;
                max-width: 689px;
                min-width: 689px;
                min-height: 405px;
                max-height: 405px;
                margin: auto;
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
            }
            #asLogo {
                position: absolute;
                top: 0;
                left: 0;
                max-width: 192px;
                margin: 30px;
            }
            #bjLogo {
                font-family:'trajan-pro-3';
                font-weight: bold;
                position: absolute;
                bottom: 0;
                left: 0;
                max-width: 484px;
                margin: 11px 21px;
                font-size: 2em;
            }
            #showTime {
                position: absolute;
                top: 0;
                right: 0;
                max-width: 130px;
                margin: 28px;
            }
            #type {
                z-index: 1;
            }
            img {
                max-width:100%;
            }
            #bg1 {
                background: url('http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/sky.jpg') no-repeat center center fixed;
        ...

JavaScript

//Typekit
   try {
       Typekit.load();
   } catch (e) {}

   //Image Cloud Array 
   var clouds = [
       'http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/cloud_2.png',
       'http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/cloud_4.png',
       'http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/cloud_3.png'];

   //Initializing the canvas
   var canvas = document.getElementById("canvas");
   var ctx = canvas.getContext("2d");



   //VIDEO ELEMENT
   var vid = document.getElementById("out");

   //LOGO ELEMENTS
   var type = document.getElementById("type");

   //Canvas Images 
   var img = new Image();
   img.src = 'http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/cloud_2.png';
   var skyImg = new Image();
   skyImg.src = 'http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/black_jesus_concept_rough-copy_background.png';
   var skyImg2 = new Image();
   skyImg2.src = 'http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/sky.jpg';
   var eSky = new Image();
   eSky.src = 'http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/enlighten_sky3.png';
   var rHand = new Image();
   rHand.src = 'http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/right-hand3.png';
   var lHand = new Image();
   lHand.src = 'http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/left-hand.png';
   var rVid = new Image();
   rVid.src = 'http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/rightVid3.png';
   var lVid = new Image();
   lVid.src = 'http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/lefttVid3.png';

   //CLOUD VELOCITY
   var vel = 0.75;

   //RECT SIZE
   var rw = 344;
   var rh = 405;

   //Text Init Value
   fontSize = 0;

   //Count
   var v =...