Codepen es un sitio web donde hacer pruebas de código front-end. Te da la oportunidad de implementar en HTML, CSS y Javascript para que pruebes aquellas cositas en las que quieras experimentar. Mucha gente lo utiliza, tal y como te hemos contado, como laboratorios de pruebas y generan unas demos que son dignas de estudio. Te mostramos 10 demos de Codepen increíbles que te dejarán con la boca abierta.
Niño jugando
Esto es una demo desarrollada por God Tier™. Esta pieza de animación 3D es absolutamente asombrosa pero el añadido de la cámara, que se puede controlar mediante el ratón, catapulta a esta demo, sinceramente, a otro nivel. La librería three.js es increíble y es lo único que se utiliza para llevar a cabo esta pequeña joya.
Slider de cubo animado
Importante el aclarar que para esta demo no se ha utilizado ningún código Javascript, aunque parezca increíble. Esta demo ofrece una nueva manera de crear un slide con imágenes. ¿Lo mejor de todo? Es ligerísimo ya que no requiere de ningún script o librería para funcionar. Especialmente agradable la sombra que se muestra en la zona inferior del cubo.
RubiCSSCube
Uno de los mayores retos en mi vida es el poder completar un cubo de Rubik. Nunca he sido capaz de hacerlo, colma mi paciencia y desisto a los pocos minutos. Tal vez con la demo de RubiCSSCube pueda conseguirlo. Esta demo te ofrece la posibilidad de poder completar un cubo de Rubik arrastrando cada una de las filas para poder moverlo y conseguir todas las caras del mismo color. Además, esta demo también cuenta con la opción de visualizar el cubo de distintas formas: Flat Design, Realista o Mezcla.
Platillo Volante SVG
"La verdad está ahí fuera". Ese era el lema de una de las mayores series de ficción que trataba el tema de los extraterrestres y los OVNIs, sí, ya sabéis, Expediente X. La verdad que la programación poco o nada tienen que ver con los temas "ocultos", o tal vez sí, porque al contemplar esta demo te hace plantearte si el desarrollador ha hecho un trato con el diablo para llevarlo a cabo. Fluido, sin lag y funcionando al 100%, todo a base de código. Una auténtica maravilla.
Animación del logo de Marvel
Soy un verdadero enamorado de los cómics de Marvel. Me encantan las aventuras de los X-Men, Spiderman, Los Vengadores, Los cuatro fantásticos... Y ahora que estamos viviendo una nueva época dorada con las películas de estos héroes que no hacen nada más abarrotar de gente los cines, pues podéis imaginar que tengo siempre el hype por las nubes. Una de las características que hacen distinguir si una película es de Marvel, es la cabecera que se muestra al principio de cada película. En esta demo se logra un efecto 100% filedigno.
Mira mamá, sin CSS
Atención que lo que te vamos a mostrar a continuación te hará replantearte si estás en la profesión correcta. Esta animación de un lobo corriendo está desarrollada sin hacer uso de CSS ni de Javascript, solo con HTML5. La animación es fluida y tan impresionante como cualquier demo que te mostramos en esta lista.
Generador de confeti
Tengo que confesaros una cosa. Me encanta la suavidad de la animación de esta demo. El confeti se genera dinámicamente, e incluso podemos generar cuánto confeti queremos generar. Además, también se puede configurar la gravedad de la demo. Si aumentamos la gravedad, el confeti caerá como si estuviese en la cámara de entrenamiento de Vegeta, sin embargo, si la disminuimos, el confeti flotará en el aire. Todos estos parámetros configurables no afectan para nada el rendimiento de la demo.
Isla en partícula
Creado por el mismo desarrollador de Niño Jugando que te hemos mostrado en primer lugar, esta demo muestra un escenario 3D con varias nubes, un avión y un planeta que gira alrededor con árboles y agua cayendo. Una demo asombrosa que te alucinará, no ya por el funcionamiento de la demo en sí, sino porque no me cabe en la cabeza que haya alguien que pueda implementar esto.
Yoga!
¿Recordáis aquellos muñecos que nos hacían crear en el colegio? Sí, os estoy hablando de esas figuras de papel que estaban articuladas mediante un clip. Eran fáciles de hacer y ofrecían un sinfín de diversión. Pues bien, la demo Yoga! lleva a cabo la creación de uno de estos muñecos, pero en vez de estar hecho con papel, está hecho con una pizca de HTML, una cucharada de CSS y un pequeño toque de Javascript. ¿El resultado? Alucinante. Podemos mover la figura a nuestro antojo, cogiendo cada parte del muñeco como si fuera parte de un todo.
Efecto de lluvia con CSS
Una vez vi una demo de una imagen con un efecto de vidrio mojado utilizando HTML5 Canvas y un montón de líneas de código en JavaScript. Esta demo es distinta, crea ese efecto usando nada más que CSS. Nada de Javascript, nada de HTML5, solo CSS y ya está.