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;}