jQuery: efecto rebote
2 comentarios
Vamos a crear un simple efecto de bote / rebote de un elemento (en este caso un div con forma redonda con CSS3) utilizando la función animate() de jQuery, similar a cuando hacemos botar una pelota repetidamente.
CSS
.circulo{
width:100px;
height:100px;
background-color: #C30;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
border-radius: 60px;
}
width:100px;
height:100px;
background-color: #C30;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
border-radius: 60px;
}
Script jQuery
$(document).ready(function(){
function animacion() {
$('.circulo').animate({
marginTop: '+=200',
}, 500, function() {
$('.circulo').animate({
marginTop: '-=200',
}, 500, function() {
animacion()
});
});
}
animacion();
});
function animacion() {
$('.circulo').animate({
marginTop: '+=200',
}, 500, function() {
$('.circulo').animate({
marginTop: '-=200',
}, 500, function() {
animacion()
});
});
}
animacion();
});
2 Comentarios
javier, el 21/06/2011 a las 11:16:06
No funcionan los enlaces
NMO, el 26/03/2012 a las 19:27:45
Efecto Zoom en el circulo
.circulo{
width:100px;
height:100px;
background-color: #C30;
-webkit-border-radius: 260px;
-moz-border-radius: 260px;
border-radius: 260px;
position:absolute;
top:300;
left:500;
}
$(document).ready(function(){
function animacion() {
$(‘.circulo’).animate({
height: ‘+=200′, width: ‘+=200′, top: ‘-=100′, left: ‘-=100′
}, 2500, function() {
$(‘.circulo’).animate({
height: ‘-=200′, width: ‘-=200′, top: ‘+=100′, left: ‘+=100′
}, 2500, function() {
animacion()
});
});
}
animacion();
});