Foros del Web » Programando para Internet » Jquery »

[APORTE] Efecto de esquina doblada en jquery

Estas en el tema de [APORTE] Efecto de esquina doblada en jquery en el foro de Jquery en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 30/07/2012, 13:55
Avatar de HackGhost  
Fecha de Ingreso: marzo-2012
Ubicación: En la pesadilla de mis enemigos
Mensajes: 114
Antigüedad: 7 años, 9 meses
Puntos: 23
Información [APORTE] Efecto de esquina doblada en jquery

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
  1. </head>
  2.     <a href="http://teamestudio.com"><img id="esquina" src="esquina_doblada.png"/></a>
  3.     <div id="fondo"></div>
  4. </body>
  5. </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
  1. #esquina{
  2.         border:0px;
  3.         position:absolute;
  4.         right:0px;/*para posicionar en la esquina superior derecha*/
  5.         top:0px;
  6.         width:100px;/*la imagen es escalada a esta resolucion*/
  7.         height:102px;
  8.         z-index:1;
  9.     }
  10.     #fondo{
  11.         z-index:-1;
  12.         right:0px;
  13.         top:0px;
  14.         position:absolute;
  15.         background: url(esquina_fondo.png) no-repeat top right;
  16.         width:100px;/*el fondo se pega arriba a la derecha*/
  17.         height:102px;/*el mismo tamaño que la imagen*/
  18.     }

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
  1. <script type="text/javascript">
  2.         $(document).ready(function(e){
  3.             $('#esquina').hover(
  4.             function(){
  5.                     $('#esquina, #fondo').animate({
  6.                         'width':'387px',
  7.                         'height':'393px'
  8.                     },'slow');
  9.             },
  10.             function(){
  11.                     $('#esquina, #fondo').animate({
  12.                         'width':'100px',
  13.                         'height':'102px'
  14.                     },'fast')
  15.             });
  16.         });
  17.     </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
  #2 (permalink)  
Antiguo 30/07/2012, 14:05
Avatar de Dradi7  
Fecha de Ingreso: junio-2008
Ubicación: Peru - Lima
Mensajes: 1.518
Antigüedad: 11 años, 5 meses
Puntos: 220
Respuesta: [APORTE] Efecto de esquina doblada en jquery

Muy buen aporte
__________________
La clave de todo triunfador es eliminar todas sus excusas y sus limitaciones
  #3 (permalink)  
Antiguo 30/07/2012, 17:23
Avatar de Lynxcraft  
Fecha de Ingreso: noviembre-2007
Ubicación: yecla murcia
Mensajes: 1.346
Antigüedad: 12 años
Puntos: 51
Respuesta: [APORTE] Efecto de esquina doblada en jquery

XD muy bueno sencillo y de gran aporte
__________________
Sobran las ideas cuando faltan ganas de trabajar en ellas
Lynxcraft

Etiquetas: doblada, esquina, esquina-doblada, hack6host
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 4 personas




La zona horaria es GMT -6. Ahora son las 06:53.