Acho bonito colocar enfeites de Natal tanto em casa física quanto em “casas virtuais” – sites.
No natal do ano passado, resolvi colocar um simples – porém agradável – efeito de luzes de Natal.
As luzes ímpares alternam com as luzes pares…
Adquiri este plugin pronto, mas óbvio que eu fui conferir como foi feito…
Eis os detalhes:
Código (embutido em todas as páginas WordPress):
<!– xmas_lights [ start ] –>
<script type=”text/javascript”>
document.write(“<div id=’lights’ style=’position:absolute;width:956px;height:180px;top:-20px;background:url(http://brunorogano.com.br/wp-content/plugins/xmas-lights/light.png) no-repeat;left:50%;margin-left:-478px’></div>”)
setInterval( “xmasLights();”, 1000 );
var lights = “active”;
function xmasLights(){
var img = document.getElementById(‘lights’);
if(lights == “active”){
img.style.backgroundPosition = “0 -180px”;
lights = “inactive”;
}else{
img.style.backgroundPosition = “”;
lights = “active”;
}
}
</script>
<!– xmas_lights [ end ] –>
Analisando o código, podemos perceber que ele apenas “movimenta” a imagem na tela, para que em determinado instante uma parte “A” da imagem apareça e a parte “B” não…e vice-versa…
Não temos duas imagens! É apenas uma, manipulada pelo CSS…
light.png >> para exemplificar o parágrafo explicativo acima, vamos chamar a primeira parte (1ª luz vermelha apagada) de “A”, e a segunda parte (1ª luz vermelha acesa) de “B”.
