Speckyboy RSS: Chill Out with These Calming CSS & JavaScript Code Snippets

Your latest Speckyboy content is here!.

Speckyboy Design Magazine

Design News, Resources & Inspiration

Chill Out with These Calming CSS & JavaScript Code Snippets


By Eric Karkovack on Sep 01, 2020 07:43 am


We could all use a little calm in our lives. What with the pressures that come along with web design and development – not to mention the state of the world. There are plenty of reasons to find an escape.

And while getting out of the office is a great way to relax, it’s not always feasible. Therefore, it’s important to find ways to bring about some peace wherever you are.

Our mission for today is to help you recharge from your daily grind with…code. That’s right. The snippets in this collection can take you away, even as you sit at your desk. So, sit back and gain some positive energy from these clever creations.

Take Me to the Tropics

The gentle swaying of palm trees in the ocean breeze. Is there any destination that’s more desirable? If you can’t get there in person, you can at least check out this sunny JavaScript animation. Pro Tip: To make the experience fully-immersive, turn on a fan and grab one of those fancy umbrella drinks.

See the Pen
Light breeze on perfectly round island
by Bailh.

Hypnotic Jogging

Sometimes, it’s the simplest-looking animations that are the most calming. This jogger is a prime example. The looping motion of each step, wind in hair and blowing scarf make for a serene scene – especially if you turn the speed down a notch. Don’t be fooled by the simple look, however. There’s a good bit of JavaScript powering this athlete.

See the Pen
Cole run cycle
by Dave DeSandro.

Peace, Love and JavaScript

Need a colorful reminder to chill out? This trippy animated peace sign will have stars dancing in your eyes – literally. As the stars spread out across the screen, take a closer look at the motion trail each one leaves behind. A groovy path to follow, for sure.

See the Pen
Peace Springs
by Tiffany Rayside.

Calming Curves

Here’s another example of how simple is often better. This CSS conglomeration of curved lines is quite basic, yet powerful. Their ribbon-like movements and changes in opacity result in a pleasing effect. Watching for a few minutes can help you shed that daily stress.

See the Pen
Stay Calm
by Eric Porter.

Sweet (Or Sour) Stress Relief

When done at a leisurely pace, changing colors can bring a sense of serenity. Take this bubble gum experiment, for example. Both the 3D sphere and background shift gradient colors to gently engage the user. For a fun twist, you can change up the color scheme to reflect “sweet” or “sour” gum.

See the Pen
Bubble Gum
by ilithya.

The Calming CSS Cube

This 3D cube has a lot going on. As it rotates on an axis, a set of circles within swing back and forth like a pendulum. But because this CSS animation is set to a lower speed, it’s more relaxing than overwhelming.

See the Pen
Abstract Cube
by Mattia Astorino.

Peaceful Design

While most of the snippets in this collection feature animation, movement isn’t always necessary. This mockup for a mindfulness app demonstrates how design itself can bring some Zen into your life. Both the day and night modes are attractive and serve as a reminder to simply breathe.

See the Pen
Mindfulness app
by co0kie.

Growing Nature

OK, we generally don’t have time to sit and watch plants grow. But we can take a few seconds out of our busy day to see these virtual vines come to life. Plants sprout and gently sway in a virtual breeze, thanks to HTML5 canvas animation powered by JavaScript.

See the Pen
Plant Growth Prototype: Dark Garden
by Matthew Main.

Keep Calm and Code On

Maybe it seems counterintuitive. But code can actually provide a calming presence – and these snippets are proof.

By utilizing color, motion and interactivity, they offer up a brief escape from the pressures of daily life. While they aren’t going to replace a proper vacation or even a day off, there are benefits to be had. Think of them as a tiny reset that will refresh your brain so that you can get on with your to-do list.

Want to see even more calming code snippets? Check out our CodePen collection for 20+ examples!

The post Chill Out with These Calming CSS & JavaScript Code Snippets appeared first on Speckyboy Design Magazine.



Read in browser »

Recent Articles:

Is the WordPress Comment System Still Relevant?
Weekly News for Designers № 555
The 20+ Best Banner Mockup Templates for Photoshop
Together at Home: Managing Kids and Your Web Design Business
Should You Use WordPress Auto Updates?
Share
Tweet
+1
Share
Forward
Copyright © 2020 Speckyboy Design Magazine, All rights reserved.
You signed up for daily Speckyboy Design Magazine email alerts either via Feedburner or directly through our site.

Our mailing address is:
Speckyboy Design Magazine
27 Braeside Park
Inverness, Scotland IV2 7HL
United Kingdom

Add us to your address book


Want to change how you receive these emails?
You can update your preferences or unsubscribe from this list.

Older messages

Speckyboy RSS: How to Improve Your Communication With Clients

Friday, September 4, 2020

Your latest Speckyboy content is here!. Speckyboy Design Magazine Design News, Resources & Inspiration How to Improve Your Communication With Clients By Addison Duvall on Sep 02, 2020 06:53 am When

Speckyboy RSS: Is the WordPress Comment System Still Relevant?

Monday, August 31, 2020

Your latest Speckyboy content is here!. Speckyboy Design Magazine Design News, Resources & Inspiration Is the WordPress Comment System Still Relevant? By Eric Karkovack on Aug 30, 2020 05:49 pm

Speckyboy RSS: Weekly News for Designers № 555

Friday, August 28, 2020

Your latest Speckyboy content is here!. Speckyboy Design Magazine Design News, Resources & Inspiration Weekly News for Designers № 555 By Speckyboy on Aug 28, 2020 10:19 am Envato Elements

Speckyboy RSS: The 20+ Best Banner Mockup Templates for Photoshop

Thursday, August 27, 2020

Your latest Speckyboy content is here!. Speckyboy Design Magazine Design News, Resources & Inspiration The 20+ Best Banner Mockup Templates for Photoshop By Paul Andrew on Aug 27, 2020 05:45 am You

Speckyboy RSS: Together at Home: Managing Kids and Your Web Design Business

Tuesday, August 25, 2020

Your latest Speckyboy content is here!. Speckyboy Design Magazine Design News, Resources & Inspiration Together at Home: Managing Kids and Your Web Design Business By Eric Karkovack on Aug 24, 2020

You Might Also Like

🐺 How to create a high impact press page.

Friday, February 14, 2025

͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏

#494: UX and Product Design

Friday, February 14, 2025

Redesigning complex navigation, product design process, UX in legacy systems, UX workshops with users. Issue #494 • Feb 11, 2025 • View in the browser Smashing Newsletter Halò Smashing Friends, How do

Nick Mafi on Capturing LA’s Loss

Friday, February 14, 2025

View in your browser | Update your preferences ADPro 77 Stories Shared As we watched the worst fires in Los Angeles history spread across the city, the editors at AD came together to discuss the

🐺 Content that Converts - the replay is up!

Friday, February 14, 2025

And everyone who joined loved it! ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌

Designer or Couple’s Therapist?

Friday, February 14, 2025

View in your browser | Update your preferences ADPro Let's Make a Deal There's no shortage of spoils in the wonderfully eclectic Hudson Valley home of actor Walton Goggins and writer-director

178 / Visualize your dreams in 2025

Wednesday, January 15, 2025

Product Disrupt Logo Product Disrupt Half-Monthly Jan 2025 • Part 1 View in browser Welcome to Issue 178 Ever get curious about how this newsletter is doing? I shared the 2024 behind-the-scenes and

Mayer Rus on Loss, and Living, in LA

Tuesday, January 14, 2025

View in your browser | Update your preferences ADPro LA, I Love You Los Angeles has been my home for nearly 20 years, and the devastation here, now, is unfathomable. Entire neighborhoods have been

🐺 How to make a great first impression

Tuesday, January 14, 2025

With real examples. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

#490: Interface Design

Tuesday, January 14, 2025

How to design better interfaces, how to choose icons, optical effects, iconography, Gestalt principles and icon design. Issue #490 • Jan 14, 2025 • View in the browser Smashing Newsletter Buona

🐺LAST CHANCE to get 20%-off our PR Masterclass Series

Monday, January 13, 2025

Make 2025 your biggest press year yet. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏