Best Codepens of May

The creative community is saturated with adept programmers, artists, and designers that are always trying their best to build new things and progress the web.

We, here at CreativesFeed like to celebrate all of the amazing projects that get submitted to CodePen by doing a “Best of” compilation at the end of the month. It’s astonishing how much can be achieved with just a small amount of HTML, Javascript, and CSS.

A Pen By Dave Berthiaume

This pen could be described as very simple or minimalist and that’s why it’s great. Each link possesses a different hover style, one of them uses gsap, and for the most part, it’s done in scss, very cool.

Parallax Slider

This pen uses the power of gsap in cohesion with parallax to create a seamless transition between images. The neat thing about this pen is that it’s not so over the top that it couldn’t be used in production.

Glitch Effect

This pen gets points for subtleness.

On one hand, it’s good to try and push things forward but at the same time, it’s important to consider what can actually be used in the production environment for practical purposes and this is something I could see being used on an actual website.

The Last Experience

Here’s a pen that resembles something of an odd dream that one might have after a night out clubbing. Maybe these folks had a few, too many drinks and decided to give it their best shot or maybe they’re just trying to direct traffic at the airport.

Either way, it’s a great pen.

Twin Tornadoes

In terms of pushing CSS to the limits of its capabilities, this pen does exactly that, it has absolute 0 lines of Javascript and even in terms of scss, it only has about 51 lines. It’s also great on performance, it’s easy for a browser to maintain a steady 60fps with this still on the screen.

Waves

The usage of physics in this pen is amazing. It’s done using several JS statements that closely resemble calculus equations. In my opinion, the closer any code resembles actual mathematics, the better (excluding magic numbers and WET programming).

Pure CSS Drawers

As the name entails, this pen is pure CSS. It’s amazing how far CSS has come, it’s resembling an objective-oriented programming more and more with every day.

Gravity Points

Gravity Points simulates how objects react to other objects that have a gravitational pull. It resembles how a solar system behaves in terms of orbit, very interesting.

Chill The Lion

Chill The Lion is an experiment in OpenGL and Threejs. It’s comprised of a pixel-styled lion and a fan. You can use the fan on the lion which he does appreciate.

Pure CSS Twinkling Stars Background

This is a demo of 2 grids overlapping, one of which consists of clouds panning to the top left and the other, a set of twinkling stars. It looks very realistic.