por Omar Benyakhlef | CSS, Diseño Web, HTML5, Trucos CSS
Un sprite es el resultado de juntar varios fotogramas para crear una animación.
En este ejemplo lo que hacemos es crear la animación con una única imagen.
He cogido una imagen de 400×400 px y la he dividido en 4 columnas y 4 filas de 100×100 px. En cada una de las celdas he colocado un frame de la animación, el orden, de izquierda a derecha y de arriba a abajo.
Esta es la imagen utilizada, con medidas 400x400px
Con la CSS, lo que hacemos es marcar un área visible, coincidente con el tamaño de cada frame (100x100px) e ir sustituyendo lo que aparece en ese área moviendo la imagen grande. El resultado es una animación perfecta.
Aquí puedes ver el resultado, copiar el código HTML y el CSS
See the Pen oxWwRV by Omar Benyakhlef Domnguez (@gloobs) on CodePen.dark
Pulsa en 0.25x para ver bien la imagen
El código moveSpritesheet 1s indica el tiempo en el que se tiene que desarrollar el loop, es decir a más tiempo la animación será más lenta y viceversa.
Como podéis ver, el código es mínimo, por lo tanto poco peso y carga rápida, lo ideal !!!
por Omar Benyakhlef | CSS, HTML, HTML5
Animación en HTML5
Conocía la potencia del HTML5 para desarrollar movimiento en diseño web, pero no era consciente de la «salvaje» cantidad de posibilidades que nos ofrece. Unas posibilidades que serían seguramente más, si no fuese por la absurda incompetencia de navegadores como Explorer e incluso Firefox.
En esta impresionante web de la que hablamos hoy, además de mostrarnos cómo realizar animaciones con HTML5, podremos ver una serie de ejemplos web que seguro que os sorprenden.
Los ejemplos que vais a ver están desarrollados con CSS3, SVG, Canvas y WebGL
(más…)
por Omar Benyakhlef | HTML5, jQuery
Dibujar gráficos con HTML5 y jQuery
Hasta ahora, el único modo de introducir un buen gráfico en un diseño web, era o bien mediante una imagen, o con flash si queríamos hacer algo dinámico. Ahora, gracias a HTML5 y por supuesto a jQuery, podemos fácilmente hacer un gráfico personalizado de una forma rápida y con un buen diseño.
Para ello, utilizamos el plugin de jQuery visualize.js
(más…)
por Omar Benyakhlef | HTML5, videos
Una de las herramientas más útiles que ha aportado HTML5, es la posibilidad de mejorar la reproducción de archivos multimedia en nuestras webs. Además HTML5 nos permite construir reproductores tanto de audio como de video.
Webs tan populares como youtube, vimeo o daylimotion ya hace tiempo que incorporan reproductores en HTML5.
En este post de diseño web, vamos a hacer una breve introducción de las etiquetas <AUDIO> y <VIDEO> de HTML5, y vamos a ver varios tipos de reproductores que nos pueden ser muy útiles a la hora de construir nuestros sitios web.
(más…)
por Omar Benyakhlef | HTML5
Audio con Javascript y HTML5
BUZZ es una pequeña librería de Javascript que le ayuda a incluir y gestionar fácilmente los sonidos en tu sitio web mediante la etiqueta audio de HTML5 .
También merece la pena ver la demo que nos han dejado para demostrar su funcionamiento. Se trata de un pequeño juego que combina drag y audio muy chulo !!!
Encontrareis todo el código y documentación bien detallada en Buzz, así como compatibilidades con navegadores y dispositivos móviles y tabletas.
por Omar Benyakhlef | Diseño Web, HTML5, jQuery
Un buen diseño web debe tener como primer objetivo su target. Si además estamos al tanto de las últimas tendencias y técnicas de diseño web, aumentaremos las posibilidades de éxito.
Hoy en día «prácticamente» no tenemos límites a la hora de diseñar, de un modo u otro, casi todo se puede hacer, por eso mismo es obligatorio ser conocedor de estas técnicas, conociéndolas podremos acudir a ellas en función del diseño al que nos enfrentemos.
En este post vamos a ver en qué consiste el Scroll Parallax, vais a poder descargar código gratis y ver algunos ejemplos de efectos que podemos conseguir con esta técnica.
Parallax Scrolling es sin duda un enorme paso hacia adelante y un tremendo reto para diseñadores, ya que ahora no nos limitamos a pensar en cómo rellenar el dichoso papel en blanco. Diseñar una web parallax es en cierto modo, jugar a ser «director de cine». Una sucesión de escenas van a cambiar por completo el escenario que mostramos al usuario, además, tendremos que pensar de qué modo pasamos de una escena a otra, movimientos, máscaras, transparencias, vídeos y fotografías se suceden uno tras otro o simultáneamente, para situarse en su posición correcta cada vez que el usuario se detiene a examinar cada pantalla. Además, tendrás que pensar en cómo conservar la usabilidad de esta web, fijando el menú en una posición absoluta, haciendo que se mueva con el resto de la web… En definitiva es un reto a la imaginación, mucho mayor que cualquier otro tipo de web, es pura creatividad, esta creatividad es la que va a diferenciar una web espectacular de una normal, aunque esta normalidad va a estar acentuada por la vistosidad de esta técnica.
(más…)
