Creando un átomo animado solo con CSS

noreply@blogger.com (Anonymous) — Sun, 01 Jun 2014 07:38:00 +0000

En esta ocasión veremos como hacer un átomo solo con técnicas de CSS3, no explicare en detalle como se se hace cada cosa, solo diré que técnicas se utilizaron para obtener el resultado que vemos, quedara para su curiosidad si quieres saber en detalle el funcionamiento puesto que al final dejare el código fuente para que lo utilicen donde quieran.

Inicialmente veremos que es lo que queremos lograr y desde ahí partiremos, así que veamos que queremos hacer:

Primero que todo debemos tener clara la estructura del átomo y un funcionamiento básico, en este caso es un átomo de Litio con 3 electrones de valencia, es decir que debe tener 3 protones y 3 neutrones, ademas sabemos que las rutas que siguen los electrones alrededor del núcleo son llamadas orbitales. Ya con esto ahora si empecemos.

Paso 1: Estructura HTML

Inicialmente crearemos un contenedor para el átomo, dentro de el crearemos tres elementos DIV uno para cada ruta de los electrones (orbitales), para cada ruta crearemos otro DIV dentro con la clase electrón, ya con esto tenemos la parte bonita del átomo. Ahora al finalizar los orbitales debemos crear los elementos div necesarios para los neutrones y protones, en este caso deben ser 3 de cada uno, pero para casos prácticos solo crearemos dos de cada tipo.

Paso 2: Creando Orbitales

Hora crearemos los orbitales o rutas que seguirá cada electrón, para esto haremos uso del la propiedad de CSS3 transform y la función rotate(angulo) la cual nos da una rotación 2D al elemento según el angulo indicado. Ademas de esto debemos poner un border -radius para hacer el orbital redondeado junto con un border para identificar las fronteras del mismo.

Paso 3: Animando electrones

Inicialmente damos atributos a nuestros electrones y a las rutas que llevara cada uno, una cosa debe quedar clara, los orbitales son los elipses creadas anteriormente, pero las rutas son las elementos que animaremos y serán estos los que le den la direccion al átomo. Para animar atributos es necesario utilizar la regla CSS @keyframes, la cual nos permite animar el elemento gradualmente en un tiempo desde un estilo a un estilo nuevo.

Si queremos entender mejor el funcionamiento de esta regla podemos visitar los siguientes enlaces:

Para hacer nuestra rotación debemos utilizar @keyframes para animar los atributos transform: rotate(0deg) hasta transform: rotate(360deg), esto hará un movimiento rotatorio de nuestros electrones. Una vez hecho esto ya podremos ver la animación funcionando.

Ahora ya tenemos la estructura principal lo único que resta es la creación de los demás elementos (protones y neutrones) en lo cual no entrare en detalle. A continuación podemos ver el resultado de todo el trabajo con algunos extras como siempre.

Para terminar pueden encontrar el ejemplo en jsfiffle

Demostración y código fuente

Espero esto haya sido de su utilidad y les sirva de ayuda en sus proyectos web, no obstante si tienen dudas y/o sugerencias no olviden comentar.

Hasta la próxima.

Creando animación circular de "cargando" con Css

noreply@blogger.com (Anonymous) — Mon, 12 May 2014 03:55:00 +0000

La creación de animaciones utilizando CSS3 en lugar de jQuery nos ofrece ventajas en cuanto a la velocidad de carga de nuestra paginas y la reducir el uso de recursos de la maquina de nuestro cliente para ejecutar la animación. Veremos como obtener una animación de cargando como la que vemos a continuación utilizando solamente CSS3.

Paso 1: Estructura HTML

Inicialmente crearemos la estructura html para la animación, necesitaremos un contenedor y dentro de el dos elementos uno para cada circulo como vemos a continuación:

Paso 2: Creando medias circunferencias

En este paso daremos los estilos necesarios a nuestro contenedor y a cada uno de los círculos, el contenedor para nuestro caso con la clase .spiner tendrá un alto definido de 74px. Ademas de esto debemos agregar un border-radius a los elementos .ball y .ball1, para que tomen forma de circulo.

Las medias circunferencias las haremos dando bordes a nuestros elementos .ball y .ball1, dos bordes no tendrán opacidad, los dos bordes restantes en cada elemento tendrá una opacidad de 0.3, de esta forma estamos logrando círculos de colores, medio opaco y medio traslucido como se puede ver en el siguiente ejemplo.

Ya teniendo esto es necesario agregar las animaciones, como se vio en el código CSS anterior, ya se han añadido los tributos animation con las especificaciones de la animación, los cuales me indican que esta se llama spin y spinoff que dura un segundo (tiempo t 1s) ejecutándose con un tipo de animación linear y se repetirá infinitamente.

Paso 3: Animando elementos

Por el momento solo hemos nombrado nuestra animación, para animar atributos es necesario utilizar la regla CSS @keyframes, la cual nos permite animar el elemento gradualmente en un tiempo (tiempo t especificado anteriormente) desde un estilo a un estilo nuevo.

Si queremos entender mejor el funcionamiento de esta regla podemos visitar los siguientes enlaces:

Para hacer nuestra rotación debemos utilizar @keyframes para animar los atributos transform: rotate(0deg) hasta transform: rotate(360deg), esto hará un movimiento rotatorio de nuestros elementos. Una vez hecho esto ya podremos ver la animación funcionando.

La forma de hacerlo podemos evidenciarla continuación.

Si observamos bien, las animaciones de los círculos giran en sentido contrario, esto sucede ya que una animación la iniciamos con rotación 0 hasta 360 y la otra desde 360 a 0, logrando un efecto inverso en ambas circunferencias.

Paso 4: Funcionalidades extra

Como ya tenemos realizada la animación, y para ampliar su utilidad en nuestra web, debemos agregar algunas funcionalidades extra, en este caso agregaremos la posibilitad de pausar la animación. para esto agregaremos la clase .stop la cual sera aplicada a nuestro contenedor .spiner y aplicaremos el estilo animation-play-state: paused; logrando el efecto deseado.

El resultado final de todo este tutorial podemos verlo continuación:

Para finalizar también podemos encontrar este ejemplo en :

Github:gist

Jsfiddle

Espero esto haya sido de su utilidad y les sirva de ayuda en sus proyectos web, no obstante si tienen dudas y/o sugerencias no olviden comentar.

Hasta la próxima.

DujaTuts

Creando un átomo animado solo con CSS

Paso 1: Estructura HTML

Paso 2: Creando Orbitales

Paso 3: Animando electrones

Creando animación circular de "cargando" con Css

Paso 1: Estructura HTML

Paso 2: Creando medias circunferencias

Paso 3: Animando elementos

Paso 4: Funcionalidades extra