Quick Tip: 4 Really Useful, Re-Useable Code Snippets from Codepen

Share this article

Quick Tip: 4 Really Useful, Re-Useable Code Snippets from Codepen

Perhaps the single coolest aspect of learning front-end design is being able to see how the brightest minds in the industry do their job.

Unlike back-end technologies hiding in their web servers, we’re all free to wander the web ‘peeking under the hoods’ of any site or web app that might intrigue us. ‘View source’ has become central to how we learn and get better.

Today, with code playgrounds like JSBin, Dabblet, and Codepen, things are easier than ever before. The world’s best front-end people deliver their ideas to us in pretty windows. Often all we need is a nicely crafted code snippet we can customize or alter to fit our brand’s theme.

To help, we’ve trawled through Codepen to put together a short list of useful, ready-to-use code snippets. If you’re looking for some nifty ways to spruce up your site, then you’ve come to the right place!

1. Perspective Transform Loading Bar

Though our first goal is always to reduce or eliminate load times, sometimes they can’t be completely avoided. An increasing number of site designs are making use of purely CSS loading bars that employ neat special effects.

If you really want to capture the attention of your visitors, you can set up a status loader that uses a CSS perspective transform. In simple terms, this tag allows the related element to be displayed at a slight angle to the viewer’s perspective.

See the Pen TRON Spinner by SitePoint (@SitePoint) on CodePen.

TRON Spinner. Forked from simurai)’s Pen

You wouldn’t think so, but when used to create a circular loading bar, the perspective transform property gives the indicator a unique and engaging aesthetic that pays homage to Tron. This code snippet was created by well-known UI designer and CSS tinkerer Simurai, so you know it’s rock-solid CSS.

2. The Parallax Starfield

Animated backgrounds that are continually in motion coupled with parallax design techniques are better suited to working with more complex JavaScript animations. You’ll still need to rely on JavaScript for more advanced stuff, but you’ll be happy to learn it is now possible to create simple animated backgrounds with motion in CSS3.

This code snippet by Saransh Sinha allows you to deploy an animated, starry sky background for your page or site. It’s image-free, using CSS box-shadow and gradient effects to display the objects and a CSS3 animation to get them moving, as opposed to images.

See the Pen Parallax Star background in CSS by Saransh Sinha (@saransh) on CodePen.

Parallax Star background in CSS. Forked from Saransh’s Pen

This is possible thanks to open-source frameworks like Compass, SASS, and HAML. You can even take it a step further and generate custom sprites to be used in your animated background.

Saransh’s demo strikes me as a perfect option for a ‘Coming soon’ page, a launch screen or even a 404 page.

Side Note:

If there’s something bugging you about the physics of this demo, there’s good reason. From a technical perspective, in parallax, the smaller (presumably further away) stars should move more slowly than the bigger, closer stars. Here they don’t.

However, this can be easily fixed by changing the “animation” value under the “#stars2” object. More specifically, you can change the number in this snippet: “animStar 100s linear infinite”. The lower the number, the faster the background stars will be. We recommend setting it a value between 10 to 30s. If you wanted, you could also fix this by doing the opposite and speeding up the “#stars” object instead.

Of course, you can make the stars slide sideways like you’re flying an X-wing if you like.

While JavaScript has nearly always been used to power components such as sliders or carousels till now, today CSS3 offers us viable, worthwhile options. Transient animations are easy with CSS, but recording and reacting to user inputs – ‘changes in state’ computer science calls it – always required an extra touch of JavaScript.

That was until someone realized we can use radio buttons and the ‘:checked‘ selector to remember what a user clicked, and this unleashes a raft of new UI possibilities. Our radio buttons don’t even need to look like a radio button – we can restyle them any way we like.

See the Pen Without JavaScript Carousel by SitePoint (@SitePoint) on CodePen.

Forked from Kohei Shingai‘s Pen Without JavaScript Carousel.

We can now implement UI elements like a carousel, draw-style menus and foldout panels entirely through CSS. JavaScript can be aimed at more complex problems and the end result is more attractive and responsive than ever! And if you’re aiming to drive leads through your interactive content, this type of unique interactivity will get people excited.

4. Animated Photo Stack

This Expanding Photo Stack snippet by Miro Karilahti calls for some eye-catching animation techniques to display a collection of images. While empty, it doesn’t look like it uses any more than standard CSS3 animation properties.

See the Pen Expanding Photo Stack by SitePoint (@SitePoint) on CodePen.

Forked from miroot‘s Pen Animated Photo Stack.

However, as soon as you populate the photo fields, you’ll notice the stack also adds some depth to your page, as each photo moves individually. Even better, the required HTML to go along with the snippet is remarkably simple. It has a single div container with separate anchor links for the photos.

There are limitations to this code. If you alter the number of images in the stack – not an unreasonable expectation – things go a bit haywire. When adding an extra image or trying to remove one, the other elements don’t adjust accordingly.

This seems like an issue that could be remedied by using CSS3 flexbox to force new elements to behave properly. In fact, that’s a nice little challenge for anyone looking to show off their flexbox chops.

Obviously, you can do this with any of the snippets discussed here!

Modern web design constantly evolves and we all get a front row seat to cherry-pick the best of it as it’s created.

Frequently Asked Questions (FAQs) about Code Snippets from CodePen

What are the benefits of using reusable code snippets from CodePen?

Reusable code snippets from CodePen offer several benefits. Firstly, they save time and effort as you don’t have to write code from scratch. Secondly, they provide a platform to learn and understand different coding techniques and styles from other developers. Lastly, they offer a way to test and debug your code in a live environment before integrating it into your project.

How can I use the JavaScript animation snippets from CodePen?

To use JavaScript animation snippets from CodePen, you need to first find a snippet that suits your needs. Once you’ve found one, you can copy the code and paste it into your project. You may need to modify the code to fit your specific requirements. Remember to test the animation to ensure it works as expected.

What are some common uses for loader snippets from CodePen?

Loader snippets from CodePen are commonly used to indicate that a page or a section of a page is loading. They provide a visual cue to users that something is happening in the background. This can improve user experience by reducing perceived wait times.

Why should I choose CodePen for my code snippets?

CodePen is a popular platform for sharing and discovering code snippets. It offers a wide variety of snippets in different languages and for different purposes. It also provides a live environment for testing and debugging code. Furthermore, it has a large community of developers who can provide help and feedback.

How can I use the ‘Why Choose Us’ snippets from CodePen?

Why Choose Us’ snippets from CodePen can be used to highlight the unique selling points of your product or service. You can copy the code and paste it into your project, then modify the text and design to suit your brand.

Can I modify the code snippets from CodePen?

Yes, you can modify the code snippets from CodePen to suit your specific needs. However, it’s important to understand the code before making changes to ensure it still functions as expected.

How can I share my own code snippets on CodePen?

To share your own code snippets on CodePen, you need to create an account. Once you’ve done that, you can create a new ‘Pen’, which is a code snippet, and share it with the community.

Can I use CodePen snippets for commercial projects?

Yes, you can use CodePen snippets for commercial projects. However, it’s important to check the license of each snippet as some may have restrictions on commercial use.

How can I find specific code snippets on CodePen?

You can find specific code snippets on CodePen by using the search function. You can search by language, tag, or user. You can also browse the ‘Picked Pens’ section to find popular and highly-rated snippets.

Can I use CodePen snippets in any programming language?

CodePen supports a variety of programming languages including HTML, CSS, and JavaScript. However, the code snippets are written in specific languages, so you’ll need to choose snippets that match the language you’re working in.

Sarah LandrumSarah Landrum
View Author

Career blogger at Punched Clocks. Contributor at Personal Branding Blog, Business.com, Brit + Co, Elite Daily and others. Freelance writer across the Internet.

Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week