Black Red Yellow Random Reset

Painted Wall

Un effet peinture avec jQuery + CSS.

HTML code :


<p id="rwControls">
        <a id="rwPlay1" class="rwBtn">Black</a>
        <a id="rwPlay2" class="rwBtn">Red</a>
        <a id="rwPlay3" class="rwBtn">Yellow</a>
        <a id="rwPlay4" class="rwBtn">Random</a>
        <a id="rwReset" class="rwBtn">Reset</a>
</p>

<div id="demoPWA" class="demoPW">
    <div class="round" id="roundA1"></div>
</div>

<div id="demoPWB" class="demoPW">
    <div class="round" id="roundB1"></div>
</div>

<div id="demoPWC" class="demoPW">
    <div class="round" id="roundC1"></div>
</div>

<div id="demoPWD" class="demoPW">
    <div class="round" id="roundD1"></div>
</div>

Javascript code :


// intToHex() -- credits : http://www.benwatts.ca/sandbox/jquery-colourific/
 function intToHex(n){
 	n = n.toString(16);
 	// eg: #0099ff. without this check, it would output #099ff
 	if( n.length < 2)
 		n = "0"+n;
 	return n;
 }

 // getHex() -- credits : http://www.benwatts.ca/sandbox/jquery-colourific/
 // shorter code for outputing the whole hex value
 function getHex(r, g, b){
 	return '#'+intToHex(r)+intToHex(g)+intToHex(b);
 }


function generateDrops(firstElement, container, bgcolor){

    var rows = 50;
    var Roundz = Array();

    var curX = 25;

    $('.demoPW:not(.rwDselected)').css('z-index', 2);
    $(container).css('z-index', 50);
    $('.rwDselected').css('z-index', 40);

    $('.rwDselected').removeClass('rwDselected');

    $(container).addClass('rwDselected');

    /*
    if(bgcolor == 'rainbow')
    {
        var bgcolorOrig = bgcolor;
        var r = Math.floor(Math.random()*256);
 	var g = Math.floor(Math.random()*256);
 	var b = Math.floor(Math.random()*256);
        
        bgcolor = getHex(r,g,b);
        
    }
    */

    $(firstElement +"1").css("background-color", bgcolor).css("top", '-650px');

    for(x=2; x<(rows); x++) {

            if($(window).width() < curX + offset)
                break;

            var numRand = Math.floor(Math.random()*25);
            var offset = 25;
            /*
            if(bgcolorOrig == 'rainbow')
            {

                var r = Math.floor(Math.random()*256);
                var g = Math.floor(Math.random()*256);
                var b = Math.floor(Math.random()*256);

                bgcolor = getHex(r,g,b);

            }
            */
            $(firstElement +"1")
            .clone(false)
            .appendTo(container)
            .attr("id", firstElement+x)
            .css("left", (curX))
            .css("top", '-650px')
            .css("background-color", bgcolor)
            .css("width", (numRand + offset)*2)
            .css("-moz-border-radius", (numRand + offset))
            .css("-webkit-border-radius", (numRand + offset))
            .css("border-radius", (numRand + offset));


            curX += numRand + offset;
    }

}


$(document).ready(function(){

    
    
    

    $('a#rwPlay1').click(function () {
        
        $('#demoPWA .round:not(#roundA1)').remove();
        generateDrops("#roundA", "#demoPWA" ,"#1D1D1D");
        $('#demoPWA .round').each(function(){
            $(this).animate({top: -50}, Math.floor(Math.random()*3000));
        });


    });

    $('a#rwPlay2').click(function () {
        
        $('#demoPWB .round:not(#roundB1)').remove();
        generateDrops("#roundB", "#demoPWB" ,"#990000");
        $('#demoPWB .round').each(function(){
            $(this).animate({top: -50}, Math.floor(Math.random()*3000));
        });


    });

    $('a#rwPlay3').click(function () {
        
        $('#demoPWC .round:not(#roundC1)').remove();
        generateDrops("#roundC", "#demoPWC" ,"#ffff00");
        $('#demoPWC .round').each(function(){
            $(this).animate({top: -50}, Math.floor(Math.random()*3000));
        });


    });

    $('a#rwPlay4').click(function () {
        
        $('#demoPWD .round:not(#roundD1)').remove();
        
         r = Math.floor(Math.random()*256);
         g = Math.floor(Math.random()*256);
         b = Math.floor(Math.random()*256);

         $bgcolor = getHex(r,g,b);
        
        generateDrops("#roundD", "#demoPWD", $bgcolor);
        $('#demoPWD .round').each(function(){
            $(this).animate({top: -50}, Math.floor(Math.random()*3000));
        });


    });

    $('a#rwReset').click(function () {
        $('.demoPW').css('z-index', 2);
        $('#demoPWA .round:not(#roundA1)').remove();
        $('#demoPWB .round:not(#roundB1)').remove();
        $('#demoPWC .round:not(#roundC1)').remove();
        $('#demoPWD .round:not(#roundD1)').remove();
        $('.round').css('top', '-650px');
    });

    
});

CSS code :


.demoPW {
    overflow: hidden;
    position: absolute;
    height: 550px;
    width: 100%;

    z-index: 2;
}
#content { position: relative; height: 550px; }
.round {
    background: red;
    position: absolute;
    top: -650px;
    width: 50px;
    height: 650px;
    border-radius: 25px;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
}

a.rwBtn { margin-right: 3px;}

Comments are closed.

Top
Animation vectorielle
Square Animation