[et_pb_section admin_label=”Section” fullwidth=”on” specialty=”off”][et_pb_fullwidth_post_title admin_label=”Fullwidth Post Title” title=”on” meta=”on” author=”on” date=”on” categories=”on” comments=”on” featured_image=”on” featured_placement=”background” parallax_effect=”on” parallax_method=”on” text_orientation=”center” text_color=”light” text_background=”on” text_bg_color=”#fcb040″ module_bg_color=”rgba(255,255,255,0)” title_all_caps=”off” use_border_color=”off” border_color=”#ffffff” border_style=”solid” saved_tabs=”all” global_module=”5040″] [/et_pb_fullwidth_post_title][/et_pb_section][et_pb_section admin_label=”section”][et_pb_row admin_label=”row”][et_pb_column type=”4_4″][et_pb_text admin_label=”Text”]
Hace algunos ayeres me revisando un codigo de una pagina me tope que no hacia llamados a imagenes individuales, que en realidad era una sola imagen y realizaba una sola carga de información y por medio de las hojas de estilo iba decidiendo que etapa de la imagen iba a mostrar. Esto es muy sencillo de entender son CSS SPRITES.
Por ejemplo de estas imagenes de angry birds,
bird{
width: 112px;
height: 117px;
background: url('bird.png') left top;
background-repeat: no-repeat;
background-position: 0 -112px; /* Icon background position in sprite */
}
Es sencillo seleccionamos el ancho y alto de la imagen, después por medio de la posición del background vamos escogiendo cual de los pájaros va a mostrar, como veran en el ejemplo del codigo anterior tenemos que seleccionamos al segundo pájaro de arriba hacia abajo.
¿Que son los CSS SPRITES?
Para no molestarnos en pensar en hadas y brujos les comento que simplemente son muchas imágenes en un solo archivo que para empezar ayude al desempeño de carga, ya que siendo un solo archivo no tiene que realizar mas peticiones al server.
El nombre del sprite que podría recordarnos sprites del juego ; consola de juegos retro y juegos en navegadores .
Tomamos esta imagen, y como verán es una simple imagen corrida de una moneda en sus 10 posiciones. por lo que debemos hacer es crear la animación tal como la vimos en este post de animacion con CSS y keyframes.
Es fácil de suponer que lo primero que tenemos que hacer es seleccionar el tamaño de la imagen en este caso es de 44 px por 44px, después seleccionamos la imagen para el background la cual le ponemos la propiedad no-repeat, y empezamos la animación diciendo que realice los movimientos del keyframe play en 1 segundo y 10 pasos.
.coin {
width: 44px;
height: 44px;
background: url('coin.png') left top;
background-repeat: no-repeat;
-webkit-animation: play 1s steps(10) infinite;
animation: play 1s steps(10) infinite;
}
@-webkit-keyframes play {
100% { background-position: -440px; }
}
La posición de la animación debe comenzar al inicio de la imagen es por eso que la posición de background se mueve a -440px, que es el tamaño de la imagen recuerdan, 44px por 10 imagenes son 440 pixeles.
See the Pen JoeZNE by Francisco Moreno (@fmorenor) on CodePen.
[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]