Top 10 mejores experimentos en Codepen

Diseño web

17 de March, 2014

Personalmente, cuando quiero buscar inspiración para nuevas interfaces, probar códigos de jQuery o practicar para algún curso cuyas lecciones no requieren de un proyecto grande en un servidor local utilizo la genial página de la gente de CSS-Tricks donde puedo pasar horas y horas viendo cosas geniales que hace la gente. Aquí está el TOP 10 mejores experimentos en Codepen con los que me he topado últimamente:

10.- Shape Shifter by Kenneth Cachia

Shape Shifter de Kenneth Cachia

Este pen realizado por Kenneth Cachia utiliza un algoritmo en javascript mas las propiedades ccs de la etiqueta <canvas> para crear a partir de un input el texto en forma de acumulación de puntos blancos que flotan por el espacio azul. Es bastante entretenido y visualmente atractivo, trata poniendo tu nombre en el input y ve como se forma una nube con el texto.

9.- Interactive Illustration via Snap –  by Kenneth Cachia

Interactive Illustration via Snap by CJ Gammon

A veces, mezclar un svg con mucho css y una interactividad llena de javascript puede resultar en obras de arte como esta, si bien el pen CJ Gammon probablemente no sea muy útil para tu proyecto por lo menos pasaras un rato sacando gusanos del camino de serpientes y quien sabe, fijándote en el código tal vez aprendas algo.

8.- 27 Card Trick by Max

27 card trick

Si hoy en día las reuniones son vía web, las conferencia y hasta conciertos viajan por internet, ¿Por qué no un truco de magia? Te piden elegir un numero y una carta, el resto es carpintería. (Damos el beneficio de la duda y pensamos que nada esta trucado por el código de javascript). El resultado no deja de ser entretenido.

7.- Interactive Image nodes by Tim Holman

Tim Holman pen image node

Tim Holman nos presenta un curioso experimento usando canvas y la libería D3 para crear una imagen del Browser mas querido por los desarrolladores “Chrome” de Google a punta de nodos interconectados que pueden ser separados pasando el mouse por encima de ellos, el efecto es muy suave y muy bien logrado.

6.- PassColor by Refus

PassColor Codepen

Probablemente un día Refus pensó: ¿Por qué no puedo hacer mis  contraseñas con colores? Si bien no sabemos que tan robustas pueden llegar a ser, no creemos recomendable hacer nuestra contraseña de la cuenta bancaria con este sistema, aun así no para de ser una divertida idea.

5.- CSS Equations for Organic Motion by Justin Windle

Organic Motion test sheet

Este curioso experimento web realizado por Justin Windle basa su sencillez en demostrar como se comportan las animaciones de los respectivos círculos en CCS al agregarle funciones trigonometricas que afectan la velocidad y uniformidad de la transición. Sencillo pero práctico.

4.- Hexel Flames by Brown

 

Hexel Flames

Este sencillo experimento de  Jason Brown muestra las capacidades del canvas y javascript combinados, para los que les gusta una fogata, inútil pero 100% atractivo.

3.- GoogleElastic by Francesco Trillini

Google Elastic

Curiosa aplicación numero 1650 sobre efectos a partir de una entrada de texto, sin embargo, la interactividad elástica del texto con respecto al mouse es real y fluida, muy entretenido. Pen hecho por Francesco Trillini

 

2.- CSS 3D Solar System by Julian Garnier

CSS 3D Solar System codepen

Probablamente la demostración de física mas impresionante que hemos visto en la web. Codificada solo con html, css y un poquito de jQuery, super atractiva visualmente, con una interactividad envidiable y perfectamente lograda. Desde JPS nuestros respetos a Julian Garnier. Eres tu perrito.

1.- Tearable Cloth by suffick

Tearable Clothes

Si alguna vez quisiste rasgar una cortina en tu casa, o romper una franela pero tenías miedo de que te botaran de tu casa este es el pen para ti. Mas utilidad que eso no vas a obtener de este pen de suffick pero sin duda gana el primer premio en este Top 10 experimentos en Codepen por demostrar que no hay nada imposible cuando mezclas canvas de html5, un buen ccs, mucho javascript y una imaginación infinita.

Committees of https://essayclick.net/ correspondence they were colonial groups in 1772 which were organized to form resistance to british tyranny