Feliz Navidad! Ya están aquí las fiestas y estas navidad queríamos aportar nuestro granito de arena con una felicitación navideña original, creativa y con un toque de diseño. El formato, una pequeña web donde la interacción del usuario se realiza mediante scroll. Aquí la tienes, feliz navidad!
Click Aquí para ver la Felicitación
Un poco de diseño en Navidad.
El año se acaba, y mientras preparamos en SiloCreativo un resumen del año, de lo bueno y lo malo, nos hemos tomado unas horas para hacer algo original y distinto y felicitar la navidad a todos nuestros lectores, suscriptores, seguidores en twitter y demás compañeros que hacéis posible SiloCreativo. Gracias a todos!
EL formato que hemos elegido es una web, muy sencilla con cuatro slides. ¿y como están hechos los efectos de transición? Pues precisamente hablábamos la semana pasada durante la charla de la WordCamp Sevilla sobre Parallax. Pues sí, le hemos sacado algo de punta y aquí tenéis nuestra felicitación navideña.
¿Cansado de las mismas felicitaciones navideñas?
Estábamos un poco cansados de las típicas felicitaciones navideñas por email o una simple tarjeta impresa. Pensamos en darle una vuelta de tuerca y salirnos de la norma para felicitar la navidad y desearos un feliz año nuevo lleno de buenas ideas.
Pensamos en algo impreso, tipo craft. O en una lámina compuesta por tipografías originales para componer un mensaje, algo parecido a lo que hicimos recientemente con la láminas “los números de la WordCamp”, pero al final hemos optado por una felicitación navideña online. Ahora te contamos como la hemos diseñado
¿Es flash? ¿HTLM5? ¿Parallax?
No, nada de Flash, solo diseño web con HTML5, Parallax y un poco de CSS. Básicamente hemos construido una plantilla muy sencilla para WordPress (prometemos liberarlo en unos días, cuando limpiemos el código 😉 ) al que le hemos incluido algunas ilustraciones y diseños de Verónica. Esperamos que os gusten!
Contado de forma resumida, tenemos cuatro slides o transparencias. En el código HTML son 4 section. Cada una de estas secciones tiene consta de tres elementos que se repiten. Por un lado un fondo plano, de colores planos. En segundo lugar una ilustración sobre dicho fondo. Las ilustraciones con los textos y felicitaciones están en png para conservar las transparencias.
En tercer lugar, existe un elemento comodín, que usamos para algún adorno concreto (como en la segunda lámina de la felicitación, los copos de nieve que caen) o en la tercera, donde utilizamos un patrón y no un fondo plano.
Estos tres elementos llevan un orden cuando se muestran de forma simultánea en cada lámina, y así no pisarse entre ellos. la regla z-index de CSS juega un papel importante aquí. Pero la magia de la felicitación navideña la pone Parallax.
Como hemos hablado en otros artículos sobre diseño web, parallax es una librería Javascript que consigue dar estos efectos que véis a la web. En nuestro caso hemos usado skrollr.js que ya habíamos conocido cuando diseñamos el tema para WordPress Livia.
Lo que nos permite hacer Parallax es jugar con el elemento scroll del usuario. Es decir, a medida que vaya navegando en vertical, podemos ir cambiando los elementos de la web. En nuestra felicitación damos saltos de 1000 en 1000 píxeles, es decir, cada 20 scroll aproximadamente, pasamos de una lámina a otra.
Los efectos son muy sencillos. En la primera ilustración con el “Feliz Navidad” pasamos de una altura 100% de la lámina a una del 0%, mientras que en la segunda, con el árbol de navidad, pasamos de un ancho 100% a un 0%. Con esto conseguimos los efectos vertical y horizontal que sirven de transición en toda la felicitación.
El efecto de los copos de nieve cayendo sigue la misma lógica. Cuando empezamos a hacer scroll, le indicamos que queremos un top:-500px, y que cuando estemos en 2000 píxeles, que la regla top esté en 200px. Hemos conseguido un desplazamiento de 700px de esa ilustración que se superpone sobre el árbol de navidad.
Felicitando la Navidad por el Móvil.
El inconveniente de Parallax es que la respuesta en móvil aún no está muy conseguida. Por ello, optamos por mostrar la felicitación navideña de forma continua, es decir, una ilustración encima de otra, y así no tener problemas. Esto solo se aplica si la resolución del dispositivo es menor que 700px de ancho. Gracias al diseño web responsive podemos hacerlo así!
Lo dicho, preparamos un artículo con el código comentado y lo publicamos en breve para que podáis ver y experimentar creando vuestras propias felicitaciones navideñas creativas! Feliz Navidad a todos, os deseamos una navidad y un nuevo año lleno de cosas bonitas y buenas ideas. Felicidades! 🙂
