Efecto con JQuery y CSS: Despegar la esquina

Siempre pensamos que las ideas más novedosas pueden llevarse a cabo simplemente gracias a Flash, pero las maravillas del CSS y JQuery siguen sorprendiéndonos y dándonos ideas novedosas para implementar en nuestros sitios.

Inspirados por un tutorial genial y muy completo realizado por Soh Tanaka hemos recreado la página de prueba para que los que recién comienzan tengan la oportunidad de comprender y ejecutar este recurso en sus páginas sin problemas.

Posición inicial

Las medidas que se ven en la imagen son las que encontrarán en el CSS. El color celeste de fondo es la imagen bg_bg.jpg que colocamos como background de la esquina que tendrá el efecto.

Posición final

Vemos ahora la totalidad del backgroun de la esquina. Las medidas que ven aquí son las que se otorgan a la figura en el script JQuery.
Crear un documento HTML y colocar el siguiente contenido:

Colocar el nombre que deseamos que nuestra muestra tenga, como estamos recreando la página, linkeamos a la hoja de estilos que utilizó Soh

Sumamente importante, debe llamarse a JQuery al documento correctamente.

Links importantes: Descarga JQuery

Dependiendo de la versión utilizada cambiar el link

Coloquemos a continuación del código anterior el script que hará que la esquina de nuestra página caiga como una hoja de papel

Es importante que no olvidemos presentar el código con el siguiente código para que las indicaciones queden bien implementadas en nuestra página.

Luego de colocar este código en la página necesitamos dar algunos parámetros más en CSS, los colocaremos dentro de este HTML también del siguiente modo.

En el demo en la página de Soh Tanaka lo que quedaba al descubierto era una invitación a suscribirse a sus RSS, pero en este caso colocamos una imagen neutra.

Esta imagen debe colocarse en el CSS como fondo o background de la esquina que se desplazará.

Finalmente colocaremos las divs o contenedores.

Para dirigir la imagen a una página determinada reemplazar el “#” por el enlace deseado.

Scroll to top