馃帹 Librer铆as de Javascript para Front End de Generaci贸n de Animaciones, Gr谩ficas y Modificaci贸n de Tipograf铆as

9 minuto(s) de lectura

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 鈥榮teps ()鈥.
  • 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 deCodepen 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 鈥榗odepen鈥 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.
  • 馃啎 Zim JS (2019)

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 鈥榢erning鈥 贸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 鈥淟eer 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鈥娾斺妔ea 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.

Fuente : Recopilatorio de Herramientas Online Total