En esta nueva entrega de la serie de artículos ¿Cómo se hizo?, explicaré el proceso de creación de la página Acerca de. Esta página tiene una línea de tiempo y está hecha con HTML5, CSS y Javascript para poner la guinda con el efecto visual.
El código HTML
El HTML es bastante sencillo. No voy a copiar y pegar el código completo ya que es muy repetitivo y tan sólo copiando un hito podré explicar lo necesario. Si queréis ver el código completo, como siempre os dejo el enlace de la demo completa.
|
1 |
<!-- Div que contiene la línea de tiempo --> |
El div de id «timeline» contiene todas las partes necesarias para mostrar la línea de tiempo. Esta línea de tiempo está dividida en cuatro partes:
- La línea central de color rojo oscuro: es nuestra línea de tiempo. En nuestro HTML, es un simple div con una única clase «linea».
- Los círculos de color gris que aparecen encima de esa línea de tiempo. Representan nuestros hitos. Lo represento con un div con un id que tiene relación con el año del tipo «hitoXXX» donde XXX es el año del hito. Este elemento tiene varias clases aplicadas:
- «hito»: Esta clase tendrá el css encargado de darle la forma de círculo y el color.
- «alturaX»: Esta clase se compondrá siempre de altura y un número. Es la encargada de posicionar verticalmente el hito modificando el valor del «top» del div. Estas clases (altura1, altura2, altura3, …) son necesariamente modificadas en el caso de distintos tamaños de pantalla como se verá en las media queries.
- «left» o «right»: Posiciona el círculo a la izquierda o derecha dependiendo de hacia donde quiera dirigir la línea y donde esté situada la caja de texto correspondiente al hito.
- «hidden»: Esta clase es necesaria para el javascript para ocultar inicialmente todos los hitos e ir haciéndolos aparecer sucesivamente.
- Las cajas de textos son el detalle de nuestros hitos con el año y una descripción del hito. Cada caja de texto tiene un id del tipo «hitoXXX_caja» donde XXX es el año del hito. Esto nos permite después identificar los hitos y sus distintos componentes (círculo, línea y caja) desde el javascript. También tiene aplicadas las mismas clases que tiene el círculo : «alturaX», «left» o «right» y «hidden». Además de esas clases, la clase «hito-caja» se encarga del aspecto de la propia caja.
- Por último, las líneas grises que unen los círculos con las cajas de hitos. Estas líneas tienen el id creado con la misma idea que los anteriores «hitoXXX_linea». Las clases aplicadas vuelven a ser las mismas con el añadido de la clase «hito-linea» que se encarga de darle el aspecto a la línea.
Veamos entonces ahora el código CSS.
¡Dame estilos… el CSS!
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 |
#timeline { position: relative; margin: 30px 10px 0; min-height: 700px; min-width: 320px; width: 95%; } #timeline .linea { height: 660px; width: 20px; background: #944A4A; border: 1px solid #944A4A; border-radius: 10px; position: absolute; left: 50%; } #timeline .hito { width: 10px; height: 10px; background: #ABABAB; border: 1px solid #ABABAB; border-radius: 50%; position: absolute; left: 50%; } #timeline .hito.left { left: 50.5%; } #timeline .hito.right { left: 51%; } #timeline .altura1 { top: 10px; } #timeline .altura2 { top: 55px; } #timeline .altura2_1 { top: 110px; } #timeline .altura3 { top: 165px; } #timeline .altura4 { top: 220px; } #timeline .altura5 { top: 275px; } #timeline .altura6 { top: 330px; } #timeline .altura7 { top: 385px; } #timeline .altura8 { top: 440px; } #timeline .altura9 { top: 495px; } #timeline .altura10 { top: 550px; } #timeline .altura11 { top: 605px; } #timeline .altura12 { top: 645px; } #timeline .hito-caja { position: absolute; left: 0; margin: -15px 0 0; width: 20%; padding: 1%; background: #ABABAB; border: 1px solid #ABABAB; display: block; font-size: 85%; line-height: 120%; color: #F2F2F2; } #timeline .hito-caja.left { left: 0%; } #timeline .hito-caja.right { left: 80%; } #timeline .hito-caja .hito-ano { margin: 0; color: #676767; letter-spacing: 1px; } #timeline .hito-caja a { text-decoration: none; } #timeline .hito-linea { background: #ABABAB; width: 51%; height: 1px; margin-top: 5px; position: absolute; } #timeline .hito-linea.left { right: 49%; } #timeline .hito-linea.right { left: 52%; width: 49%; } |
El «#timeline» lleva position: relative porque todos los elementos dentro del div de la línea de tiempo tendrán un posicionamiento absoluto respecto a ese div. Además, ese div tiene un mínimo ancho obligatorio de 320px esto es para evitar que al hacer cada vez más pequeña la pantalla se vaya amontonando las cajas de texto unas encima de otras, si la pantalla es menor que 320px, aparecerá scroll horizontal para mantener un aspecto visual decente.
El círculo del hito «#timeline .hito» es un simple div con un border-radius: 50%. Esta instrucción hace que el div parezca un círculo casi perfecto. Después de esta clase, defino las clases «left» y «right» para el círculo y las clases «alturaX» que sólo van aumentando el top para que cada círculo aparezca a una distancia razonable del anterior y dejar sitio suficiente a la caja de texto.
El resto del css es entendible pero si tienes alguna duda, deja un comentario e intentaré ayudarte.
¡Pero esto no acaba aquí! Falta el CSS que hace moverse los divs, los keyframes de los que he hablado en el artículo del ¿Cómo se hizo? El logo.
¡Move, move, move!
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
/** Movimientos **/ /** growit => Hace crecer la línea roja de 0 a su tamaño completo **/ @-webkit-keyframes growit { from { height: 0px; } to { height: 660px; } } @keyframes growit { from { height: 0px; } to { height: 660px; } } /** showit-left => Hace crecer la línea del hito hacia la izquierda **/ @-webkit-keyframes showit-left { from { width: 0px; } to { width: 51%; } } @keyframes showit-left { from { width: 0px; } to { width: 51%; } } /** showit-right => Hace crecer la línea de hito hasta la derecha **/ @-webkit-keyframes showit-right { from { width: 0px; } to { width: 49%; } } @keyframes showit-right { from { width: 0px; } to { width: 49%; } } /** appears => Cambia la opacidad de la caja de hito para que aparezca progresivamente **/ @-webkit-keyframes appears { from { opacity: 0; } to { opacity: 1; } } @keyframes appears { from { opacity: 0; } to { opacity: 1; } } .start { -webkit-animation: growit 2s; -moz-animation: growit 2s; animation: growit 2s; } .show-left { -webkit-animation: showit-left 2s; -moz-animation: showit-left 2s; animation: showit-left 2s; } .show-right { -webkit-animation: showit-right 2s; -moz-animation: showit-right 2s; animation: showit-right 2s; } .show-hito { -webkit-animation: appears 1.5s; -moz-animation: appears 1.5s; animation: appears 1.5s; } |
He creado 4 keyframes para poder realizar todos los efectos necesarios:
- «growit» se encarga de hacer crecer la línea roja hasta su tamaño completo.
- «showit-left» y «showit-right» se encargan de hacer crecer las líneas grises de los hitos hacia la izquierda o derecha como el nombre de las clases indican.
- «appears» modifica la opacidad de la caja de texto del hito para hacerla aparecer progresivamente.
Y ahora lo último pero no menos importante:
El javascript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
$(function() { // Oculto todo. $('#timeline .hidden').hide(); // Añado la clase start a la línea roja para empezar la animación que la hace crecer. $('#timeline .linea').addClass('start'); // Array en el que guardo todos mis hitos. var hitos = ['hito1983', 'hito1993', 'hito1994', 'hito1995', 'hito1996', 'hito2001', 'hito2005', 'hito2007', 'hito2008', 'hito2010', 'hito2011', 'hito2012', 'hito2013']; // Llamada a la función para que empiece a mostrar hitos uno a uno. showIt(hitos, 0); }); function showIt(hitos, i) { if (i >= hitos.length) { // Si no quedan hitos, salimos. return; } // El id del hito. var id = hitos[i]; // Muestro el círculo del hito y le añado la clase show-hito. // Esto hará aparecer el hito progresivamente. $('#'+id).show().addClass('show-hito'); // Para mostrar la línea gris, compruebo si tiene la clase left o right // así puedo saber que clase debo de usar si show-left o show-right. if ($('#'+id+'_linea').hasClass('left')) { $('#'+id+'_linea').show().addClass('show-left'); } else { $('#'+id+'_linea').show().addClass('show-right'); } // Por último, muestro la caja del hito. $('#'+id+'_caja').show().addClass('show-hito'); // Y sigo con el siguiente hito, 1 segundo después. setTimeout(function() { showIt(hitos, ++i); }, 1000); } |
El javascript os sonará, porque no difiere en exceso del que he utilizado para hacer el logotipo. Consiste en añadir las clases que he creado con los keyframes una a una para hacer el efecto de que vaya apareciendo cada hito uno tras otro.
Un último esfuerzo: Las media queries.
Sólo nos queda un último esfuerzo, adaptar nuestra línea de tiempo a pantallas más pequeñas.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 |
/** Tablets... Pantallas menores de 780px **/ @media screen and (max-width: 780px) { #timeline { min-height: 800px; width: 85%; } #timeline .linea { height: 760px; } #timeline .altura1 { top: 10px; } #timeline .altura2 { top: 70px; } #timeline .altura2_1 { top: 130px; } #timeline .altura3 { top: 190px; } #timeline .altura4 { top: 250px; } #timeline .altura5 { top: 310px; } #timeline .altura6 { top: 370px; } #timeline .altura7 { top: 430px; } #timeline .altura8 { top: 490px; } #timeline .altura9 { top: 550px; } #timeline .altura10 { top: 610px; } #timeline .altura11 { top: 670px; } #timeline .altura12 { top: 730px; } #timeline .hito-caja { width: 30%; } @-webkit-keyframes growit { from { height: 0px; } to { height: 800px; } } @keyframes growit { from { height: 0px; } to { height: 800px; } } } /** Móviles... Pantallas menores de 480px **/ @media screen and (max-width: 480px) { #timeline { min-height: 1200px; width: 75%; } #timeline .linea { height: 1160px; } #timeline .altura1 { top: 10px; } #timeline .altura2 { top: 105px; } #timeline .altura2_1 { top: 200px; } #timeline .altura3 { top: 295px; } #timeline .altura4 { top: 360px; } #timeline .altura5 { top: 485px; } #timeline .altura6 { top: 580px; } #timeline .altura7 { top: 675px; } #timeline .altura8 { top: 760px; } #timeline .altura9 { top: 855px; } #timeline .altura10 { top: 940px; } #timeline .altura11 { top: 1035px; } #timeline .altura12 { top: 1120px; } #timeline .hito-caja { width: 25%; } #timeline .hito-caja.left { left: 0%; } @-webkit-keyframes growit { from { height: 0px; } to { height: 1200px; } } @keyframes growit { from { height: 0px; } to { height: 1200px; } } } |
Sólo tengo que adaptar el alto de la línea roja, y la posición de cada clase «alturaX». Tampoco hay que olvidar de adaptar los keyframes y retocar el tamaño de las cajas de hitos para que el texto pueda leerse mejor.
Ahora sí, se acabó, la línea de tiempo está completamente lista. Aquí tenéis el enlace para ver la demo: VER DEMO
