Etiqueta: animacion


Círculos con animación parallax Css

Esta es una animación completamente en css, no utiliza javascript, aunque está escrita en Haml y Scss, se puede ver también la versión compilada en simple html y css. Estos círculos contienen una pequeña animación que se ejecuta al posicionar el cursor sobre ellos, dando un efecto parallax. Es una manera muy eficiente de realizar una animación y como no se está ejecutando todo el tiempo, no consume ningún tipo de recursos y se puede utilizar en conjunto con otras animaciones. Pueden ir al enlace original: http://codepen.io/jcoulterdesign/pen/OMOqjy [codepen_embed height=”446″ theme_id=”0″ slug_hash=”OMOqjy” default_tab=”result” user=”jcoulterdesign”]See the Pen <a href=’http://codepen.io/jcoulterdesign/pen/OMOqjy/’>CSS Parallax Orbs</a> by […]


Fondo con animación Css – Js

Este es un fondo animado de burbujas o partículas, utilizando css para la estructura y los gradientes, mientras que se usa enteramente javascript para realizar cálculos para la animación y generación de partículas que se esparcirán por el fondo. Es basado en canvas de html5, así que se necesita de los navegadores actuales que lo soporten. Una ventaja de hacer animaciones en javascript, es que se mantiene un estándar que soporta varios navegadores, en cambio sí usaran ccs3, estaría limitado a los navegadores que lo soporten. Sin importar que tecnología utilicen, las animaciones generadas de esta manera tienden a ser […]


Grabar pantalla como animación GIF

Ya existen programas para crear videos de lo que grabamos en pantalla y si los queremos en gif debemos convertirlos o utilizar programas que ya permitan generarlos. Esta aplicación tiene la conveniencia de grabarlos en gif directamente y permite editarlos de manera simple en la interfaz, podemos adaptarlo a cualquier sección de la pantalla y luego grabar al mismo tiempo que utilizamos la pc. https://screentogif.codeplex.com/


Tarjeta de presentación con animación css

Codepen.io es una página para publicar códigos del lado del cliente, ya sea html, css y javascript. Se ejecuta en un pequeño entorno, esto nos permite mostrar el resultado en vivo y compartirlo. Aquí les muestro una pequeña aplicación que me compartieron, se trata de una tarjeta de presentación web, con la capacidad de realizar pequeñas animaciones para darle un toque artístico increíble, esto demuestra lo que se puede realizar con diseño y programación css. Pueden ir al enlace original: http://codepen.io/darkosxrc/pen/ZGRQbv [codepen_embed height=”599″ theme_id=”0″ slug_hash=”ZGRQbv” default_tab=”result” user=”darkosxrc”]See the Pen <a href=’http://codepen.io/darkosxrc/pen/ZGRQbv/’>Hover Card</a> by darkos (<a href=’http://codepen.io/darkosxrc’>@darkosxrc</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]