Un effet peinture avec jQuery + CSS.
<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>
// 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'); }); });
.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;}