EffectHub.com: your best source for gaming

Recommendation

More Effects...

for (var k = 0; k < lgt; k++) {
                    shape[k].update();
                }
    
    TweenLite.ticker.addEventListener("tick", drawAll);
 
  }

/*
class Snowflake
*/

function Snowflake() {
        this.x = 0;
        this.y = 0;
        this.vy = 0;
        this.vx = 0;
        this.r = 0;
       
    
    this.reset = function () {
        this.x = Math.random() * width;
        this.y = Math.random() * -height;
        this.vy = 1 + Math.random() * 3;
        this.vx = 0.5 - Math.random();
        this.r = 1 + Math.random() * 2;
        this.o = 0.5 + Math.random() * 0.5;
    }
    
   
    this.update= function () {
    
            this.y += this.vy;
            this.x += this.vx;
            ctx.fillStyle = "rgba(255, 255, 255, " + snowflake.o + ")";
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
            ctx.closePath();
            ctx.fill();

if (this.y > height) {
               this.reset();
            }
        }
    }
    /*
class Point
*/
    function Point(x, y) {
        this.x = x;
        this.y = y;
    };
  /*
Méthod calculGravityCenter
*/
    function calculGravityCenter(x1, x2, y1, y2) {
        var x = x1 + (2 * (x2 - x1)) / 3;
        var y = y1 + (2 * (y2 - y1)) / 3;
        return {
            'x': x,
            'y': y
        };
    };

/*
class Triangle
*/
    function Triangle(j, _array) {
        this.points = [];
        this.color = _array[j]['color'];
        this.n = j;
        for (var i = 0; i < 3; i++) {
        this.points.push(new Point(calculGravityCenter(Number(_array[j]['x0']), Number(_array[j]['x1']), Number(_array[j]['y0']), Number(_array[j]['y1'])).x, calculGravityCenter(Number(_array[j]['x0']), Number(_array[j]['x1']), Number(_array[j]['y0']), Number(_array[j]['y1'])).y));
          
        }

this.update = function () {
            var _t = Math.floor(Math.random() * 10) / 10 + 1;
           for (var i = 0; i < 3; i++)

{
                TweenLite.to(this.points[i], _t, {
                    x: Number(_array[j]['x' + i]),
                    y: Number(_array[j]['y' + i]),
                    delay: j / 80,
                    ease: Elastic.easeOut,
                    onComplete : countTweenShape
                });
            }

}
       
        this.draw = function () {
            ctx.fillStyle = this.color;
            ctx.beginPath();
            ctx.moveTo(this.points[0].x, this.points[0].y);
            ctx.lineTo(this.points[1].x, this.points[1].y);
            ctx.lineTo(this.points[2].x, this.points[2].y);
            ctx.lineTo(this.points[0].x, this.points[0].y);
            ctx.closePath();
            ctx.fill();
        };
    }
    var countTween=0;
function countTweenShape() {
countTween+=1;

if(countTween==1200){
    $("h1").animate({

top: "20",
}, 800, function () {
// Animation complete.
}); 
    
    }
}
/*
Method initSnowflake 
*/
function initSnowflake () {
    for (var i = 0; i < COUNT; i++) {
        snowflake = new Snowflake();
        snowflakes.push(snowflake);
        snowflakes[i].reset();  
    }
    
    
}
/*
Method drawAll
* draw all shape
*/ 
    function drawAll() {
        ctx.clearRect(0, 0, 800, 500);
        for (var j = 0; j < lgt; j++) {
            shape[j].draw();

}
         for (var k = 0; k < COUNT; k++) {
            snowflakes[k].update();

}
        
      
    }
/*
Method hex2rgb
*/    
    function hex2rgb(hex, opacity) {
        var rgb = hex.replace('#', '').match(/(.{2})/g);

var i = 3;
        while (i--) {
            rgb[i] = parseInt(rgb[i], 16);
        }

if (typeof opacity == 'undefined') {
            return 'rgb(' + rgb.join(', ') + ')';
        }
          return 'rgba(' + rgb.join(', ') + ', ' + opacity + ')';
    };

CSS

/* FONT */
        @import url(http://fonts.googleapis.com/css?family=Titan+One);
        html,
        body,
        div,
        span,
        applet,
        object,
        iframe,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        p,
        blockquote,
        pre,
        a,
        abbr,
        acronym,
        address,
        big,
        cite,
        code,
        del,
        dfn,
        em,
        img,
        ins,
        kbd,
        q,
        s,
        samp,
        small,
        strike,
        strong,
        sub,
        sup,
        tt,
        var,
        b,
        u,
        i,
        center,
        dl,
        dt,
        dd,
        ol,
        ul,
        li,
        fieldset,
        form,
        label,
        legend,
        table,
        caption,
        tbody,
        tfoot,
        thead,
        tr,
        th,
        td,
        article,
        aside,
        canvas,
        details,
        embed,
        figure,
        figcaption,
        footer,
        header,
        hgroup,
        menu,
        nav,
        output,
        ruby,
        section,
        summary,
        time,
        mark,
        audio,
        video {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            font: inherit;
            vertical-align: baseline;
        }
        article,
        aside,
        details,
        figcaption,
        figure,
        footer,
        header,
        hgroup,
        menu,
        nav,
        section {
            display: block;
        }
        body {
            line-height: 1;
        }
        ol,
        ul {
            list-style: none;
        }
        blockquote,
        q {
            quotes: none;
        }
        blockquote: before, blockquote: after, q: before, q: after {
            content: '';
            content: none;
        }
        table {
            border-collapse: collapse;
            border-spacing: 0;
        }
        html {
            height: 100%;
            min-height: 100%;
        }
        body {
            height: 100%;
            min-height: 100%;
            margin: 0;
            background: #a3c7e5;
            background: -moz-linear-gradient(top, #a3c7e5 0%, #ffffff 58%, #ffffff 100%);
            background: -webkit-gradient(left top, left bottom, color-stop(0%, #a3c7e5), color-stop(58%, #ffffff), color-stop(100%, #ffffff));
            background: -webkit-linear-gradient(top, #a3c7e5 0%, #ffffff 58%, #ffffff 100%);
            background: -o-linear-gradient(top, #a3c7e5 0%, #ffffff 58%, #ffffff 100%);
            background: -ms-linear-gradient(top, #a3c7e5 0%, #ffffff 58%, #ffffff 100%);
            background: linear-gradient(to bottom, #a3c7e5 0%, #ffffff 58%, #ffffff 100%);
            filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#a3c7e5', endColorstr='#ffffff', GradientType=0);
        }
        /* JUMP */
        h1 {
            cursor: default;
            position: absolute;
            top: -100px;
            left: 140px;
            right: 0;
            bottom: 0;
            height: 0px;
            margin: 0 auto;
            display: block;
            width: 800px;
            /* -webkit-animation: bounce .3s ease infinite alternate;*/
            font-family: 'Titan One', cursive;
            font-size: 70px;
            color: #FFF;
            text-align: left;
            line-height: 100px;
            text-shadow: 0 1px 0 #CCC, 0 2px 0 #CCC, 0 3px 0 #CCC, 0 4px 0 #CCC, 0 5px 0 #CCC, 0 6px 0 transparent, 0 7px 0 transparent, 0 8px 0 transparent, 0 9px 0 transparent, 0 10px 10px rgba(0, 0, 0, .6);
        }
        /* ANIMATION */
        @-webkit-keyframes bounce {
            100% {
                top: -10px;
                text-shadow: 0 1px 0 #CCC, 0 2px 0 #CCC, 0 3px 0 #CCC, 0 4px 0 #CCC, 0 5px 0 #CCC, 0 6px 0 #CCC, 0 7px 0 #CCC, 0 8px 0 #CCC, 0 9px 0 #CCC, 0 30px 30px rgba(0, 0, 0, .3);
            }
        }
        /* CONTAINER */
        #container {
            width: 100%;
            height: 100%;
        }
        /* BACKGROUND */
        #background {
            border: 2px solid #595570;
            z-index: 300;
            width: 798px;
            height: 498px;
            border-radius: 6px;
            -moz-border-radius: 6px;
            -webkit-border-radius: 6px;
            position: absolute;
            
        }
        #background span {
        position: absolute;
        right: 5px;
        bottom: 5px;
        color:#595570;
        font-family: 'Titan One', cursive;
            font-size: 12px;
        }
        /* CONTENT */
        #content {
            width: 800px;
            height: 500px;
            margin: auto;
        }

HTML

Recommendation

Join Effecthub.com