Aunque es un asunto que requeriría un amplio debate, hoy por hoy parece que la mayoría de los lectores prefieren ver en pantalla una simulación virtual del paso de páginas del libro de toda la vida. Habría que preguntarse el porqué de esta elección cuando hay otras soluciones que posiblemente se adaptan mucho mejor al formato pantalla, como puede ser el desenrollado (scroll), como se hacía en los antiguos pergaminos, o la lectura por trozos breves de texto, pantalla a pantalla (recalculando qué entra en el tamaño de la misma dependiendo del dispositivo) y sin "fluidez" en el texto.
El simular el paso de páginas es una tarea engorrosa si se quiere lograr que dicha simulación sea verosímil en cuanto a movimiento, sombras generadas, curvatura de la hoja, etc.
Se ha usado muchas veces Flash para programar el efecto pero dado que Flash está vetado por algunas plataformas (Apple), también se ha simulado con HTML.
Turn.js es una biblioteca JavaScript que se añade como plug-in a JQuery para poder programar de manera muy sencilla estas transiciones que imitan a los libros físicos.
El diseño del "libro" lo fijamos con CSS. Por ejemplo:
#libro {
width:80%;
height:500px;
margin:0 auto;
}
#libro .turn-page {
width:50%;
height:600px;
background-color:e3f;
}
Una vez referenciado su uso en la cabecera del código HTML (ambas, turn.js y query):
<!doctype html>
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/ jquery-1.7.1.min.js"></script>
<script type='text/javascript' src="turn.min.js"></script>
<style type='text/css'>
deben agregarse las páginas que se van a manejar (imágenes) mediante "divs" dentro del "body" del código. Por ejemplo:
<!doctype html>
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/ jquery-1.7.1.min.js"></script>
<script type='text/javascript' src="turn.min.js"></script>
<style type='text/css'>
deben agregarse las páginas que se van a manejar (imágenes) mediante "divs" dentro del "body" del código. Por ejemplo:
<div id="libro">
<div class="caractula"> Turn.js </div>
<div> Página 1 </div>
<div> Página 2 </div>
<div> Página 3 </div>
<div> Página 4 </div>
<div> Página 5 </div>
....
<div class="cierre">
</div>
</div>
Es decir, particularizando:
<div id="magazine">
<div style="background-image:url(pagina01.jpg);"></div>
<div style="background-image:url(pagina02.jpg);"></div>
<div style="background-image:url(pagina03.jpg);"></div>
<div style="background-image:url(pagina04.jpg);"></div>
<div style="background-image:url(pagina05.jpg);"></div>
<div style="background-image:url(pagina06.jpg);"></div>
</div>
Entonces, el script de JavaScript no puede ser más sencillo:
<script type="text/javascript">
$("#libro").turn([opciones]);
</script>
Las "opciones" que Turn.js permite manejar son diez:
- - acceleration : llama al modo de aceleración por hardware; por defecto ponerlo a "True"
- - display : por defecto a "Double", define la pantalla inicial
- - duration: determina el tiempo en microsegundos que tarda en hacerse la transición. Por defecto, se fija a 600 (600 microsegundos)
- - gradients: fija el modo de gradación de la transición. Por defecto, se fija en "True"
- - heights: define la altura de la página.
- - inclination: define cómo se inclina la página al moverse, el ángulo que toma. Por defecto el valor es "0".
- - page: define cuál es la página inicial. Obviamente, por defecto, el valor es "1".
- - pages: fija cuántas páginas se moverán.
- - when: define el control de eventos. Por defecto es "empty object".
- - width: define el ancho del efecto
Hay una versión gratuita para usos no comerciales y otra de pago con más funciones bajo licencia. Puede descargarse y leer más sobre este plug-in en este enlace.
No hay comentarios:
Publicar un comentario