[APORTE] Efecto de esquina doblada en jquery

HackGhost · #1 (**permalink**) 30/07/2012, 12:55

Hola gente del foroo.. queria aportar algo a este gran foro asi que me decidi por algo sencillo..

Recuerdo que dias atras vi una pagina donde en la parte superior derecha(arriba a la derecha.. xD) tenia un efecto que simulaba como si la pagina estuviera doblada en la esquina al igual q un papel y que cuando posabas el puntero encima este se doblaba mas grande y dejaba ver algo detras.. Me di cuenta de que estaba hecho en flash por lo que se me ocurrio hacer lo mismo pero en jquery.

Para los que quieran aplicarlo a su web les cuento que fue lo que hice

use una imagen como esta:

(La parte de arriba es transparente, para que se vea lo que hay atras)

Inserté la imagen al inicio de la pagina

Código HTML:

Ver original</head>
<body>
    <a href="http://teamestudio.com"><img id="esquina" src="esquina_doblada.png"/></a>
    <div id="fondo"></div>
</body>
</html>

Se los puse en un HTML vacio para que no nos enredemos tanto.. el div que esta mas debajo de la imagen nos va a servir para el fondo..

El codigo css para la imagen y el div de fondo es:

Código CSS:

Ver original#esquina{ 
        border:0px;
        position:absolute;
        right:0px;/*para posicionar en la esquina superior derecha*/
        top:0px;
        width:100px;/*la imagen es escalada a esta resolucion*/
        height:102px;
        z-index:1;
    }
    #fondo{
        z-index:-1;
        right:0px;
        top:0px;
        position:absolute;
        background: url(esquina_fondo.png) no-repeat top right;
        width:100px;/*el fondo se pega arriba a la derecha*/
        height:102px;/*el mismo tamaño que la imagen*/
    }

El div de fondo contiene una imagen del mismo tamaño que la imagen de esquina doblada, ambos son escalados a una resolucion mas pequeña(resolucion original 387x393 px).

Con jquery creamos la animacion. Basicamente lo que hacemos es cambiar el tamaño de la imagen a su dimension original pero con una animacion.
Aqui esta el codigo.

Código Javascript:

Ver original<script type="text/javascript">
        $(document).ready(function(e){
            $('#esquina').hover(
            function(){
                    $('#esquina, #fondo').animate({
                        'width':'387px',
                        'height':'393px'
                    },'slow');
            },
            function(){
                    $('#esquina, #fondo').animate({
                        'width':'100px',
                        'height':'102px'
                    },'fast')
            });
        });
    </script>

Como se habran fijado el efecto se aplica a ambos, solo que la imagen de la esquina doblada es redimensiona proporcionalmente mientras que el div de fondo mantiene el tamaño original del fondo aun siendo redimensionado.

Espero les sea de utilidad..
[URL="http://teamestudio.com/efecto-esquina-doblada"]Aqui[/URL] pueden verlo funcionando-
Saludos desde paraguay

Dradi7 · #2 (**permalink**) 30/07/2012, 13:05

Muy buen aporte

Lynxcraft · #3 (**permalink**) 30/07/2012, 16:23

XD muy bueno sencillo y de gran aporte