7
<!– /* Font Definitions */ @font-face {font-family:”Cambria Math”; panose-1:2 4 5 3 5 4 6 3 2 4; mso-font-charset:0; mso-generic-font-family:roman; mso-font-pitch:variable; mso-font-signature:-1610611985 1107304683 0 0 159 0;} @font-face {font-family:Calibri; panose-1:2 15 5 2 2 2 4 3 2 4; mso-font-charset:0; mso-generic-font-family:swiss; mso-font-pitch:variable; mso-font-signature:-1610611985 1073750139 0 0 159 0;} @font-face {font-family:”Helvetica LT Std”; panose-1:0 0 0 0 0 0 0 0 0 0; mso-font-alt:Arial; mso-font-charset:0; mso-generic-font-family:swiss; mso-font-format:other; mso-font-pitch:variable; mso-font-signature:1 1342185546 0 0 5 0;} @font-face {font-family:”Mentor Sans Std Light”; panose-1:0 0 0 0 0 0 0 0 0 0; mso-font-charset:0; mso-generic-font-family:modern; mso-font-format:other; mso-font-pitch:variable; mso-font-signature:3 0 0 0 1 0;} @font-face {font-family:”Lucida Console”; panose-1:2 11 6 9 4 5 4 2 2 4; mso-font-charset:0; mso-generic-font-family:modern; mso-font-pitch:fixed; mso-font-signature:-2147482993 6144 0 0 31 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-unhide:no; mso-style-qformat:yes; mso-style-parent:”"; margin-top:0cm; margin-right:0cm; margin-bottom:10.0pt; margin-left:0cm; line-height:115%; mso-pagination:widow-orphan; font-size:11.0pt; font-family:”Calibri”,”sans-serif”; mso-fareast-font-family:Calibri; mso-bidi-font-family:”Times New Roman”; mso-ansi-language:ES; mso-fareast-language:EN-US;} a:link, span.MsoHyperlink {mso-style-priority:99; color:blue; mso-themecolor:hyperlink; text-decoration:underline; text-underline:single;} a:visited, span.MsoHyperlinkFollowed {mso-style-noshow:yes; mso-style-priority:99; color:purple; mso-themecolor:followedhyperlink; text-decoration:underline; text-underline:single;} p {mso-style-priority:99; mso-margin-top-alt:auto; margin-right:0cm; mso-margin-bottom-alt:auto; margin-left:0cm; mso-pagination:widow-orphan; font-size:12.0pt; font-family:”Times New Roman”,”serif”; mso-fareast-font-family:”Times New Roman”; mso-ansi-language:ES; mso-fareast-language:ES;} .MsoChpDefault {mso-style-type:export-only; mso-default-props:yes; font-size:10.0pt; mso-ansi-font-size:10.0pt; mso-bidi-font-size:10.0pt; mso-ascii-font-family:Calibri; mso-fareast-font-family:Calibri; mso-hansi-font-family:Calibri; mso-ansi-language:ES; mso-fareast-language:ES;} @page Section1 {size:595.3pt 841.9pt; margin:72.0pt 54.0pt 72.0pt 54.0pt; mso-header-margin:35.4pt; mso-footer-margin:35.4pt; mso-paper-source:0;} div.Section1 {page:Section1;} –>
Es una solución elegante en jQuery para obtener el efecto de pliegue sobre la pantalla (que ya hemos visto por la red bastantes veces), que sea fácil de usar, y a la vez evite el uso de complicadas animaciones flash que pueden ser bloqueadas por algunos navegadores (Firefox equipado con AdBlock Plus, por ejemplo).
La instalación es relativamente simple, y probando que tengas un buen uso para el efecto en tu sitio, seguro te garantizará unos visitantes animados y entretenidos. El script en sí es de código abierto, y puedes hacer lo que quieras con él.
Si tienes instalado jQuery en tu blog o sitio personal, lo único que debes hacer es descargar el script, subirlo a un directorio especial de tu sitio, y recordar la dirección relativa al documento en el que quieres que se visualice el efecto.
Luego, necesitas ingresar este código en la página de tu sitio, entre las etiquetas <head> y </head>:
<script type=”text/javascript” src=”subdirectorio-donde-instalaste-el-script/turn.js”></script>
Y llama el “efecto” así (estas líneas van debajo de lo anterior):
<script type=”text/javascript”>
$(document).ready(function(){
$( ‘#target’ ).fold();
});
</script>
Finalmente, agrega un enlace a la hoja de estilos del efecto:
<link rel=”stylesheet” type=”text/css” href=”subdirectorio-donde-instalaste-el-script/turn.css”>
Este código lo único que hace es “llamar” el script cuando la página de tu sitio carga para que puedas visualizar correctamente el efecto. Entonces sube una imagen que se verá como si estuviera debajo de tu página (puedes insertar este código al final de tu página, antes de </body>):
<div>
<img id=”target” src=” subdirectorio-donde-instalaste-el-script /nombre-de-imagen.jpg”>
</div>
Puedes personalizar la presentación del script. Por ejemplo, puedes elegir sobre cuál esquina estará el pliegue (derecha o izquierda), qué tamaño máximo y mínimo tendrá este doblez virtual, y qué imagen se usará para mostrarlo.
Recuerda que para utilizarlo necesitarás instalar en tu sitio jQuery y jQuery UI 1.5+ (ambos pueden descargarse gratis de http://jquery.com/ y http://ui.jquery.com/). El script para SexyCurls puede descargarse desde http://github.com/elliottkember/the-sexy-curls-jquery-plugin/tree/master. La demo del script en http://www.elliottkember.com/sexy_curls.html.
switchStyles
Un efecto que verás en muchos sitios de la Web 2.0: el cambiador de temas. Se trata de un simple script que les permitirá a los visitantes de tu sitio cambiar su presentación. Debajo del capó, jQuery se encarga de seleccionar otra hoja de estilo que hayas preparado para tal fin. Por ejemplo, una que cambie simplemente el color de fondo y la decoración de los enlaces, o si te sientes más atrevido, una que modifique por completo el orden de las columnas y la paleta de colores.
Puedes ver un ejemplo del script y descargar el código en http://www.kelvinluck.com/2006/05/switch-stylesheets-with-jquery/.
Deja tu comentario
Debes estar logueado para escribir comentarios.