CodePen – is a code editor that runs in your browser and allows you to immediately see the result. This is also a great place to share your creations and see other people’s work. The site is focused on web development. The article presents the best elements of the Web User Interface (UI) and animations that were posted on the website CodePen. All projects have been created using CSS and JavaScript.

Animated solar system

The developed Garnier Julian (Julian Garnier) animated model is eight planets orbiting the Sun in 3D (Boffins recently decided that Pluto is no longer officially a planet). The creation of this demo projects inspired author Alex Girona (Alex Giron) and Nicholas Gelledzhera (Nicolas Gallager).

Whale

Based on this flash animation whale that follows the mouse pointer across the screen version Diego Lema (Diego Leme) on CodePen created using SVG and JavaScript. This is an excellent example of how some simple shapes can work together to create something absolutely amazing.

Jelly Menu

It looks like any other menu until you scroll down and see what it is made of jelly! Menu items are bent when moving and twang return to a place in a stationary state.

Draggable overflow

Draggable overflow allows you to neatly arrange a web page without having to compromise on content. The text disappears when the band gets over, and you can scroll by dragging.

Fluid grid using text align: justify

The project uses the properties of the “alignment” of the text to create a movable table on a web page, which eliminates the need to define the horizontal field, positioning elements or cancel signified. You can learn more about the method entries Kanka Patrick (Patrick Kunka).

Squishy buttons

This incredible project creates the effect of pseudo tactile touch, even if the buttons act with the mouse.

Pure CSS peeling sticky

This CSS pseudo Velcro is a pleasant tactile feel and is represented in the form of a label that can be easily removed, revealing hidden underneath.

Color Smoke

Animation of colored particles that follow the mouse pointer.

Balls of fear

These balls are afraid of the mouse pointer. If you move the cursor aggressively, they panic and become spread, but if you approach slowly, they will drift off with the same speed, always keep a certain distance. If you retire, they get together and interested and quietly move to you.

Tearable cloth

This curtain that you can shake. No, even more. You can shake the fabric is really hard. You can even make a hole and pull the pieces that will fly across the screen. You can completely destroy the curtain and feel like a vandal.

JavaScript train

This ghost train meanders follows a series of dark tunnels. Incredible project created using a small amount of code.

Gravity points

This simulator particles moving aimlessly around the screen until you add in arbitrary gravitational field point. An interesting aspect that is worth paying attention to: the gravitational point themselves attracted to each other, so that they will move slowly until they join, forming a larger, more powerful point.