Desde Github nos encontramos este interminable listado de librerías que deberían facilitarnos la vida a la hora de dar vida a nuestros proyectos. Efectos de animación, transiciones, fuentes y crear efectos con las potentes librerías de JavaScript.
Sin más preámbulo, vamos al lío.
Animación
Recursos que nos ayudan a generar creaciones con movimiento y cambios de formas.
- Animate.css : Simples efectos de desplazamiento para el texto u otros elementos. Simpelemente anima lo que quieras con CSS.
- Animate.less : Un montón de frescas, divertidas y funcionales animaciones convertidas sobre LESS; para tus proyectos Bootstrap.
- Anime.js : Anime es una flexible y ligera biblioteca de animación en JavaScript. Funciona con CSS, transformaciones individuales, SVG, atributos DOM y objetos JS.
- Approach : Un complemento jQuery,que permite animar un objeto a través de las propiedades CSS, respecto a la distancia del puntero sobre esté.
- CSS Spritesheet Animation Ejemplo : SpriteSheet, animación con CSS3 utilizando la función ‘steps ()’.
- Caat : Representar escenas de animación gráficas, basadas en un framework sobre javascript.
- CanvasScript3 : CanvasScript3 es una biblioteca de Javascript para el nuevo lienzo HTML5 con una interfaz similar a ActionScript3. Esta biblioteca permite Grupos Sprite, Capas, Eventos de Ratón, Eventos de Teclado, Efectos de Bitmap, Animaciones de Tween, etc.
- Collie : Collie es una biblioteca de Javascript que ayuda a crear animaciones altamente optimizadas y juegos utilizando HTML 5. Collie se ejecuta en PC y móvil utilizando HTML 5 y DOM.
- Emile.js : Emile.js es un framework de JavaScript de animación CSS independiente.
- Firmin : Firmin es una biblioteca de animación JavaScript que utiliza transformaciones y transiciones CSS.
- GreenSock Animation Platform : Plataforma de Animación GreenSock es una suite de herramientas para la animación de scripts.
- Repositorio de Codepen : Repositorio de Codepen con ejemplos de uso y código de Greensock.
- Ejemplos : Aquí hay un par de ejemplos que demuestran las características principales de la Plataforma de Animación de Greensock.
- Learning Center : Tutoriales y videos para la plataforma de animación GreenSock.
- Transición de JQuery : Transformaciones y transiciones CSS3 súper suaves para jQuery.
- Janis : Janis es un marco ligero de Javascript que proporciona animaciones simples a través de transiciones CSS para los navegadores modernos en la web, así como dispositivos móviles.
- Keanu : Keanu es una micro-librería para la animación en Canvas / JS.
- Magic : Animaciones CSS3 con efectos especiales.
- Move.js : Move.js es una pequeña biblioteca de JavaScript que hace que la animación con CSS3 sea extremadamente simple y elegante.
- Ramjet : Ramjet hace parecer que un elemento DOM es capaz de transformarse en otro, sin importar dónde se encuentren los dos elementos en el árbol DOM.
- Rekapi : Una biblioteca de animación de keyframes para JavaScript.
- SVG.js : Una biblioteca ligera para manipular y animar SVG.
- Scripty2 : scripty2 es un framework JavaScript, potente y flexible que te ayuda a escribir tus propios efectos visuales y interfaces de usuario.
- Shifty : Shifty es un motor de interpolación construido en JavaScript. Está diseñado para adaptarse a cualquier número de necesidades de interpolación.
- Snap.svg : Snap.svg es una biblioteca de JavaScript, que hace que trabajar con los recursos de SVG sea tan fácil como jQuery trabaja sobre el DOM.
- Stylie : Stylie es una divertida herramienta para crear fácilmente complejas animaciones CSS. ¡Diseño rápido de animaciones gráficas, toma el código y crealo!
- Textillate.js : Textillate.js combina algunas bibliotecas increíbles para proporcionar un complemento de fácil uso que aplica animaciones CSS3 a cualquier texto.
- Tween.js : Motor de interpolación simple, rápido y fácil de usar que incorpora las ecuaciones optimizadas de Robert Penner.
- Twitter Fave Animation : En lugar de confiar en las transiciones CSS, la nueva animación hace uso de una serie de imágenes. Aquí, los ejemplos de cómo volver a crear la animación mediante la sincronización de pasos por CSS.
- Animación Web Pasado, Presente y Futuro (2016) : Rachel Nabors explora el mundo de los estándares, plataformas y herramientas de la animación web en 2016: SVG, SMIL, GreenSock AP, Framer, Browser Tooling, etc.
- Web Animations API : Web Animations es una nueva API JavaScript para crear contenido animado en la web. Al unificar las funciones de las animación de SVG y CSS, Web Animations desbloquea las funciones que anteriormente sólo se podían utilizar de forma declarativa y expone capacidades de animación potentes y de alto rendimiento a los desarrolladores.
- ¿Estamos animados todavía? : Esta página registra el progreso de la implementación de la API de Animaciones Web en Firefox.
- WAAPI Browser Support Test (+ Polyfill) : Este ‘codepen’ muestra qué extensión de su navegador admite la API de animaciones web. La prueba se ejecuta después de incluir Polyfill.
- Animaciones Web Polyfill : Implementación de JavaScript de la API de Animaciones Web.
Tipografía
El estilo, disposición o apariencia de la fuente tipográfica.
- Una guía completa sobre las estrategias de instalación de fuentes : Zach Leatherman describe diversos enfoques sobre como cargar las fuentes sobre un proyecto web.
- Adobe Edge Web Fonts : Edge Web Fonts es un servicio gratuito que proporciona acceso a una gran biblioteca de fuentes para su sitio web. Es una de las herramientas y servicios de Edge de Adobe. El uso del servicio es gratuito e ilimitado.
- Baseline.js : Un complemento jQuery simple para restaurar las líneas de base arrojadas bajo los tamaños de imagen impares.
- CSS Typography cheat sheet : Pequeño resumen de las características de CSS que mejorará su tipografía web.
- Convencer a un navegador para cargar fuentes desde otros dominios : Una pregunta de StackOverflow acerca de la carga de fuentes entre dominios.
- FitText : FitText hace que los tamaños de fuente sean flexibles. Utilice este complemento en su diseño fluido o responsivo para obtener titulares escalables que llenen el ancho de un elemento padre.
- FlowType.JS : Tamaño de fuente y altura de línea según el ancho del elemento.
- Fontmatrix : Matriz de fuentes incluidas con sistemas operativos Mac y Windows, Microsoft Office y Adobe Creative Suite.
- Google Fonts : Google Fonts hace que sea rápido y fácil para todos usar fuentes web. Nuestro objetivo es crear un directorio de fuentes web para el mundo. Nuestro servicio de API facilita la adición de fuentes de Google a un sitio web en cuestión de segundos.
- Gutenberg : Gutenberg es kit de tipografías flexible y sencillo con el que comenzar proyectos, para diseñadores y desarrolladores web.
- Lettering.js : Complemento jQuery que ofrece control sobre la animación de las letras.
- OpenFoundry : Una plataforma de fuentes de código abierto; donde previsualizar las fuentes de forma elegante y fomentar la exploración.
- Pure Tipografía : Estilos CSS para un mejor tipo de web. Dependiente de Pure.
- Guía rápida de funciones web a través de @ font-face : La función @font-face de CSS3 nos permite utilizar tipos de letra personalizados en la web de manera accesible, manipulable y escalable.
- Tipografía verdaderamente fluidas con Unidades: vh y vw : En este artículo se describen las unidades de visualización y otras técnicas para lograr una tipografía que se redimensiona suavemente con la pantalla.
- TypeButter : TypeButter le permite establecer ‘kerning’ óptico para cualquier fuente en su sitio web. Si está deseando un texto bellamente diseñado que los navegadores de hoy en día no proporcionan, este es el complemento para usted.
- Typeset.css : Un restablecimiento de la tipografía CSS sin sentido para diseñar contenido generado por el usuario como publicaciones, comentarios y contenido del foro.
- Typeset.css : Una biblioteca de Sass que proporciona algunos estilos por defecto. Clases opcionales para usar y extender según sea necesario, y algunas funciones de utilidad y mixins para hacer más simple su tipografía.
- Bacon : Bacon es un plugin de jQuery que te permite envolver texto alrededor de una curva de bezier o una línea.
- SlabText : Un plugin jQuery para producir títulos grandes, audaces y receptivos.
- trunk8 : trunk8 es un complemento de acortamiento de texto inteligente para jQuery. Cuando se aplica a un gran bloque de texto, cortará el texto suficiente para evitar que se derrame; misma función al típico “Leer Más”.
Visualización
Colocación de datos en un contexto visual.
- Bonsai.js : Una biblioteca de gráficos ligeros con una API gráfica intuitiva y un renderizador SVG.
- Chart.js : gráficos simples, limpios y atractivos para diseñadores y desarrolladores.
- Crossfilter : Crossfilter es una biblioteca JavaScript para explorar grandes conjuntos de datos multivariados en el navegador.
- Cubo : Cube es un sistema para recopilar eventos de tiempo y derivar métricas. Mediante la recopilación de eventos en lugar de métricas, Cube le permite calcular las estadísticas agregadas post hoc.
- Cubism.js : Cubism.js es un plugin D3 para visualizar series de tiempo. Utilice Cubism para construir mejores cuadros de mando en tiempo real, extrayendo datos de Graphite, Cube y otras fuentes.
- D3.js : D3.js es una biblioteca JavaScript para manipular documentos basados en datos. D3 le ayuda a llevar datos a la vida usando HTML, SVG y CSS.
- DataMaps : Visualizaciones personalizables de mapa SVG (mundial) para la web en un solo archivo Javascript usando D3.js.
- Introducción interactiva a D3 : diapositivas en D3 que creo luego después de frustarme al realizar una explicación de D3 con PowerPoint.
- NVD3 : Este proyecto es un intento de construir gráficos reutilizables y componentes de gráfico para d3.js sin quitar el poder que d3.js le da.
- Tutorial: Introducción a D3 : Básicamente, sólo traza círculos ocultos aleatoriamente en la pantalla, y luego la transición a una parte de la pantalla. A continuación, añadimos alguna interacción para que los círculos se muevan una vez que mueva el ratón sobre ellos.
- xCharts : xCharts es una biblioteca de JavaScript para la construcción de visualizaciones de gráficos personalizadas para la web usando D3.js. Usando HTML, CSS y SVG; xCharts está diseñado para ser dinámico, fluido y abierto a integraciones y personalización.
- Easy Pie Chart : Complemento sencillo de jQuery que utiliza el elemento canvas para representar gráficas circulares sencillas para valores individuales.
- Flot : Flot es una biblioteca de trazado JavaScript puro para jQuery; con un enfoque simple, aspecto atractivo y características interactivas.
- Google Chart Tools : La API de Google Visualization le permite crear gráficos y aplicaciones de informes sobre datos estructurados y ayuda a integrarlos directamente en su sitio web.
- Paper.js : Paper.js ofrece una de gráficos limpios y una poderosa cantidad de posibilidades para crear y trabajar con gráficos vectoriales y curvas bezier.
- Photon : Photon es una biblioteca de JavaScript que agrega efectos de iluminación simples a los elementos DOM en el espacio 3D.
- Piecon : Una minúscula librería javascript para generar dinámicamente gráficas de progreso en tus favicons.
- Processing.js : Processing.js es el proyecto hermano del popular lenguaje de programación Visual, diseñado para la web. Processing.js hace que tus visualizaciones de datos funcionen utilizando estándares web.
- Smoothie Charts : Una biblioteca de gráficos JavaScript para la transmisión de datos.
- TimelineJS : TimelineJS es una herramienta de código abierto que permite a cualquier persona construir líneas de tiempo visualmente ricas e interactivas.
- Timesheet.js : Visualice sus datos y eventos con sexy HTML5 y CSS3. Crea hojas de tiempo sencillas con JavaScript disimulado. Estilo con CSS y tienen diversión móvil también.
- Treefun by Jim Blackler : Esta herramienta crea archivos SVG (Standard Vector Graphics) para ilustrar la información estructurada como un árbol básico.
- jQuery.Gantt : Dibuja gráficos de Gantt con la famosa facilidad de desarrollo de jQuery.
- jStat : jStat es una biblioteca estadística escrita en JavaScript que le permite realizar operaciones estadísticas avanzadas sin necesidad de un lenguaje estadístico dedicado (por ejemplo, MATLAB o R).
- morris.js : Morris.js es un API muy simple para dibujar líneas, barras, áreas y gráficos de donuts.
- mxgraph : mxGraph es una biblioteca de diagramación de JavaScript que permite la creación rápida de gráficos interactivos y aplicaciones de gráficos que se ejecutan de forma nativa en cualquier navegador principal, HTML5 capaz e Internet Explorer v7 +.
- three.js : Three.js es una biblioteca que hace que WebGL — 3D en el navegador — sea fácil de usar. Mientras que un simple cubo en WebGL sin procesar resultaría cientos de líneas de código de Javascript y shader, un equivalente de Three.js es sólo una fracción de eso.
- vis.js : Vis.js es una biblioteca de visualización dinámica basada en navegador. La biblioteca está diseñada para ser fácil de usar, manejar grandes cantidades de datos dinámicos y permitir la manipulación de los datos.
Relacionado
