En la primera parte, hemos visto como crear el logo con formas geométricas creadas con css y html. En esta segunda parte veremos como hacer que estas formas caigan con un efecto parecido al Tetris.
El movimiento
Quiero que las formas aparezcan desde la parte de arriba de la pantalla (primero no se verán y luego a medida que van cayendo se irán descubriendo) y ocupen su lugar. Una vez la pieza haya ocupado su lugar, la siguiente pieza iniciará el movimiento. Para realizar esto, debemos jugar con el «top» de las formas geométricas. Al iniciar el efecto el top será «-100px», esto significa que estará fuera de la visión del navegador e iremos aumentando el top poco a poco hasta llegar a «0px» que es el lugar donde debería estar situado el logo. Para esto, utilizaré keyframes.
|
1 2 3 4 5 6 7 8 |
@-webkit-keyframes moveit { from { top: -100px; } to { top: 0px; } } @keyframes moveit { from { top: -100px; } to { top: 0px; } } |
En este sencillo código estamos definiendo un keyframe llamado «moveit» que el «top» del elemento debe de ir desde -100px hasta 0px que es su posición original. Como supondréis el @-webkit-keyframes se refiere a los navegadores que utilicen webkit (Safari y Chrome).
|
1 2 3 4 5 |
.move { -webkit-animation: moveit 2s steps(8); -moz-animation: moveit 2s steps(8); animation: moveit 2s steps(8); } |
En este segundo cacho, estamos indicando que los elementos que tengan la clase move aplicada deberán implementar la animación definida en el keyframe «moveit» en 2 segundos y en 8 pasos. No me voy a parar en por qué 2 segundos y por qué 8 pasos, después de probar varios valores, estos son los que me dan exactamente el efecto que quiero, podéis variar esos valores y veréis que conseguís con ello.
El javascript para conseguir el efecto
Una vez que tenemos el css listo, debemos ahora añadir la clase move a nuestras formas geométricas para que vayan apareciendo. No podemos aplicar la clase move directamente al html, porque si lo hiciera de esta manera, todas las formas bajarían al mismo tiempo y no es lo que yo quiero. Lo que quiero es que vayan bajando una tras otra. Para realizar este efecto tenemos que utilizar un sencillo código de javascript. Usaré jQuery por supuesto para que el código sea todavía más sencillo.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$(document).ready(function() { var shapes = ['shape-d-one', 'shape-d-two', 'shape-o', 'shape-n', 'shape-m-one', 'shape-m-two', 'shape-i-one', 'shape-k-one', 'shape-k-two', 'shape-k-three', 'shape-i-two']; moveIt(shapes, 0); }); function moveIt(shapes, i) { if (i >= shapes.length) { return; } var id = shapes[i]; $('#'+id).addClass('move'); setTimeout(function() { moveIt(shapes, ++i); }, 2100); } |
Primero, creamos un array «shapes» en el que metemos los ids de nuestras formas geométricas. Luego creamos una función llamada «moveIt» a la que pasamos el array de formas y un índice «i». Como es lógico cuando la página haya cargado, llamamos a esa función con el índice 0 para que nuestro efecto empiece desde la primera forma. Esta función sólo añadirá la clase move a la forma geométrica y utilizando un setTimeout se volverá a llamar a si misma pero para el siguiente índice. El resultado que obtendremos así no será exactamente el que queremos ya que al cargar la página aparecerá el logo formado y una a una veremos como nuestras formas geométricas desaparecerán e irán bajando para volver a situarse en el lugar que les corresponde. Lo que debemos hacer ahora es ocultar de inicio nuestro logo para que no aparezca hasta que la función de javascript le haya añadido la clase «move». Para eso debemos añadir el siguiente código a nuestro javascript:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$(document).ready(function() { $('.hidden').hide(); var shapes = ['shape-d-one', 'shape-d-two', 'shape-o', 'shape-n', 'shape-m-one', 'shape-m-two', 'shape-i-one', 'shape-k-one', 'shape-k-two', 'shape-k-three', 'shape-i-two']; moveIt(shapes, 0); }); function moveIt(shapes, i) { if (i >= shapes.length) { return; } var id = shapes[i]; $('#'+id).show().addClass('move'); setTimeout(function() { moveIt(shapes, ++i); }, 2100); } |
Además en nuestro html, debemos añadir la clase «hidden» a nuestras formas geométricas. Con estos dos sencillos cambios, lo que conseguimos es ocultar el logo (las formas geométricas) desde el principio al usuario y justo antes de añadir la clase «move», mostramos la forma para dejar de ocultarla.
El último toque
Sólo nos queda por hacer el acabado final. En mi caso, he decidido que podría quedar bien que los bloques fueran cayendo de un color y cuando la palabra acabara formada completamente se cambiara al color final. De esta forma, quedaría claro de que el efecto Tetris habría terminado.
Para eso, debemos añadir un poco de css:
|
1 |
.shapetetris.undone { background: url('./img/squareyellow.jpg'); } |
La clase «undone» aplicada a nuestras formas utilizará una imagen diferente de color amarillo.
Y un poco de javascript:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$(document).ready(function() { $('.hidden').hide(); $('.shapetetris').addClass('undone'); var shapes = ['shape-d-one', 'shape-d-two', 'shape-o', 'shape-n', 'shape-m-one', 'shape-m-two', 'shape-i-one', 'shape-k-one', 'shape-k-two', 'shape-k-three', 'shape-i-two']; moveIt(shapes, 0); }); function moveIt(shapes, i) { if (i >= shapes.length) { $('.shapetetris').removeClass('undone'); return; } var id = shapes[i]; $('#'+id).show().addClass('move'); setTimeout(function() { moveIt(shapes, ++i); }, 2100); } |
En este caso, justo después de ocultar las formas, lo que hacemos es añadir la clase «undone» que cambia el fondo de las imagenes al fondo amarillo. El otro cambio es una vez que hemos finalizado completamente el movimiento, eliminamos esa clase lo que cambiará el fondo amarillo al fondo rojo.
Y esto es todo, puedes ver la demo completa en el siguiente enlace: VER DEMO
¡Si tenéis alguna duda o sugerencia, dejad un comentario!
