{"id":5379,"date":"2020-09-08T13:21:00","date_gmt":"2020-09-08T13:21:00","guid":{"rendered":"https:\/\/azoora.com\/blog\/?p=5379"},"modified":"2020-09-04T13:59:47","modified_gmt":"2020-09-04T13:59:47","slug":"chill-out-with-these-calming-css-javascript-code-snippets","status":"publish","type":"post","link":"https:\/\/azoora.com\/blog\/code\/chill-out-with-these-calming-css-javascript-code-snippets\/","title":{"rendered":"Chill Out with These Calming CSS &#038; JavaScript Code Snippets"},"content":{"rendered":"\n<p>We could all use a little calm in our lives. What with the pressures that come along with web design and development \u2013 not to mention the state of the world. There are plenty of reasons to find an escape.<\/p>\n\n\n\n<p>And while&nbsp;getting out&nbsp;of the office is a great way to relax, it\u2019s not always feasible. Therefore, it\u2019s important to find ways to bring about some peace wherever you are.<\/p>\n\n\n\n<p>Our mission for today is to help you recharge from your daily grind with\u2026<em>code<\/em>. That\u2019s 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.<\/p>\n\n\n\n<h2>Take Me to the Tropics<\/h2>\n\n\n\n<p>The gentle swaying of palm trees in the ocean breeze. Is there any destination that\u2019s more desirable? If you can\u2019t 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.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_RNxQqM\" src=\"\/\/codepen.io\/anon\/embed\/RNxQqM?height=320&amp;theme-id=light&amp;slug-hash=RNxQqM&amp;default-tab=result\" height=\"320\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed RNxQqM\" title=\"CodePen Embed RNxQqM\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<h2>Hypnotic Jogging<\/h2>\n\n\n\n<p>Sometimes, it\u2019s 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 \u2013 especially if you turn the speed down a notch. Don\u2019t be fooled by the simple look, however. There\u2019s a good bit of JavaScript powering this athlete.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_yNqNyq\" src=\"\/\/codepen.io\/anon\/embed\/yNqNyq?height=320&amp;theme-id=light&amp;slug-hash=yNqNyq&amp;default-tab=result\" height=\"320\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed yNqNyq\" title=\"CodePen Embed yNqNyq\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<h2>Peace, Love and JavaScript<\/h2>\n\n\n\n<p>Need a colorful reminder to chill out? This trippy animated peace sign will have stars dancing in your eyes \u2013 literally. As the stars spread out across the screen, take a closer look at the motion trail each one leaves behind. A groovy&nbsp;path&nbsp;to follow, for sure.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_MyoMew\" src=\"\/\/codepen.io\/anon\/embed\/MyoMew?height=320&amp;theme-id=light&amp;slug-hash=MyoMew&amp;default-tab=result\" height=\"320\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed MyoMew\" title=\"CodePen Embed MyoMew\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<h2>Calming Curves<\/h2>\n\n\n\n<p>Here\u2019s 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.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_zYqYZQz\" src=\"\/\/codepen.io\/anon\/embed\/zYqYZQz?height=320&amp;theme-id=light&amp;slug-hash=zYqYZQz&amp;default-tab=result\" height=\"320\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed zYqYZQz\" title=\"CodePen Embed zYqYZQz\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<h2>Sweet (Or Sour) Stress Relief<\/h2>\n\n\n\n<p>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&nbsp;gradient&nbsp;colors to gently engage the user. For a fun twist, you can change up the color scheme to reflect \u201csweet\u201d or \u201csour\u201d gum.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_XWXvvmj\" src=\"\/\/codepen.io\/anon\/embed\/XWXvvmj?height=320&amp;theme-id=light&amp;slug-hash=XWXvvmj&amp;default-tab=result\" height=\"320\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed XWXvvmj\" title=\"CodePen Embed XWXvvmj\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<h2>The Calming CSS Cube<\/h2>\n\n\n\n<p>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\u2019s more relaxing than overwhelming.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_BaKaWgg\" src=\"\/\/codepen.io\/anon\/embed\/BaKaWgg?height=320&amp;theme-id=light&amp;slug-hash=BaKaWgg&amp;default-tab=result\" height=\"320\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed BaKaWgg\" title=\"CodePen Embed BaKaWgg\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<h2>Peaceful Design<\/h2>\n\n\n\n<p>While most of the snippets in this collection feature animation, movement isn\u2019t 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.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_QWbXpXV\" src=\"\/\/codepen.io\/anon\/embed\/QWbXpXV?height=320&amp;theme-id=light&amp;slug-hash=QWbXpXV&amp;default-tab=result\" height=\"320\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed QWbXpXV\" title=\"CodePen Embed QWbXpXV\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<h2>Growing Nature<\/h2>\n\n\n\n<p>OK, we generally don\u2019t 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.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_dQLbxQ\" src=\"\/\/codepen.io\/anon\/embed\/dQLbxQ?height=320&amp;theme-id=light&amp;slug-hash=dQLbxQ&amp;default-tab=result\" height=\"320\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed dQLbxQ\" title=\"CodePen Embed dQLbxQ\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<h2>Keep Calm and Code On<\/h2>\n\n\n\n<p>Maybe it seems counterintuitive. But code can actually provide a calming presence \u2013 and these snippets are proof.<\/p>\n\n\n\n<p>By utilizing color, motion and interactivity, they offer up a brief escape from the pressures of daily life. While they aren\u2019t 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.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We could all use a little calm in our lives. What with the pressures that come along with web design and development \u2013 not to mention the state of the world. There are plenty of reasons to find an escape. And while&nbsp;getting out&nbsp;of the office is a great way to relax, it\u2019s not always feasible. [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":5390,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[4,145,12],"tags":[25,56,94,146,116,87],"jetpack_featured_media_url":"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/09\/Calming-Code-Snippets.gif","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p7FQPL-1oL","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/5379"}],"collection":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/comments?post=5379"}],"version-history":[{"count":6,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/5379\/revisions"}],"predecessor-version":[{"id":5401,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/5379\/revisions\/5401"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media\/5390"}],"wp:attachment":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media?parent=5379"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/categories?post=5379"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/tags?post=5379"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}