Efecto página doblada con JQuery

Antes de nada tenéis que saber que para conseguir este efecto se usa la librería JQuery.
Si estamos usando en el blog Protype y Scriptaculous para cualquier efecto no podemos usar JQuery al mismo tiempo en el blog.

Este efecto lo había visto publicado en CSS Reflex y me había llamado la atención, pero no ha sido hasta hace un par de días que ordago13 me indicaba de nuevo la posibilidad de publicar este mismo truco.

Se trata de usar el efecto de página doblada en la esquina superior derecha de nuestro blog, para mostrar la posibilidad de suscribirse al blog (aunque puede usarse para mostrar cualquier otra cosa).

Podéis ver el ejemplo de CSS Reflex en funcionamiento en este blog, aunque yo he modificado la imagen para que el texto se muestre en español.
Ya sabéis algunos que lo de trabajar con imágenes no se me da nada bien, así que cada uno puede hacer la suya propia, yo he hecho lo que he podido...


Página doblada


[1] Copiamos este código y en Edición HTML de nuestro panel lo pegamos justo antes de </head>

[2] Pegamos ahora este otro código justo después de <body>:

<div id='pageflip'>
<a href='URL_DEL_FEED'><img alt='feed' src='http://www.wallheaven.com/page_flip.png'/></a>
<div class='msg_block'/>
</div>

Cambiamos donde dice "URL_DEL_FEED" por la dirección de nuestro feed.

Para cambiar la imagen que sale debajo por la vuestra, lo hacemos en el primer código (el que colocamos antes de </head>).

Para cambiar la imagen que "se dobla" (la parte de color negro), lo hacemos en este último código (el que colocamos después de <body>).

0 comentarios:

Publicar un comentario