Hola gente, necesito vuestra ayuda para hcer el siguiente efecto.
Tengo una imagen de una resolucion superior a 1280 * 1024 osea que puedo recortarla y cambiarle el tamaño a mi gusto, sin problema.
Ese no es el problema.
El problema es que necesito que primero se muestre solo la esquina inferior izquierda de la imagen, pero a pantalla completa, y que luego haga un efecto zoom como de alejamiento y que termine por mostrar toda la imagen completa.
Aquí os dejo mi codigo (Funciona en Firefox 3.5)
Código HTML:
Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> <script type="text/javascript"> $(function(){
$("#intro").css({
width: '400%',
height: '400%',
top: '-300%',
opacity: 0
})
.animate({
width: '100%',
height: '100%',
top: 0,
opacity: 1
}, 7000)
});
body, html
{
overflow: hidden;
}
body
{
margin: 0;
padding: 0;
background-color: #000;
}
#intro
{
position: absolute;
left: 0%;
margin: 0px;
padding: 0px;
width: 400%;
height: 400%;
top: -300%;
}
<img id="imagen" src="./images/intro.jpg" width="100%" height="100%" />