【CSSとJavaScript】リラックスするための方法

私たちは、日常で少しリラックスできる時間を持つことができます。Webデザインやその開発からくるプレッシャーは言うまでもなくありますが、それを逃れる手段はあります。

 

オフィスを出ることはリラックスするための方法ではありますが、常にうまくいくとはありません。そこで、いつでも平和な気持ちになれる方法を探すことが大切になってきます。

 

今日、私たちのすべきことは人々がコードを噛み砕いて理解できるように助けることです。そうです、今回のコレクションは旅に連れて行ってくれます。たとえデスクの前に居てもです。なので深く腰をかけて、何か創造的な作品からエネルギーをもらいましょう。

 

熱帯雨林の世界へ

See the Pen
Light breeze on perfectly round island by Bailh (@cathbailh)
on CodePen.

nbsp;

海風でヤシの木が優しく揺れています。どこか行ってみたい目的地はありますか？現地に赴くことができないのならば、せめてもJavascriptのアニメーションでその雰囲気を味わってみましょう。

お勧め：この体験にのめり込めるように、ファンを使えて南国風のドリンクを片手にお楽しみください

 

 

眠り誘うようなジョギング？

See the Pen
Cole run cycle by Dave DeSandro (@desandro)
on CodePen.

nbsp;

時々、何かシンプルなアニメーションは落ち着くと感じる時がありますよね？このジョギングをしている人も同じです。それぞれの足のステップや風になびく髪、穏やかに揺れるスカーフ、特に速度を下げると一層感じますよね。ただし、シンプルだからといって惑わされてはいけません。このアスリートを動かすだけでも、Javascriptはたくさん使われています。

 

平和、愛そしてJavascript

See the Pen
Peace Springs by Tiffany Rayside (@tmrDevelops)
on CodePen.

nbsp;

リラックスには、ポップな色が良いですか？この不思議な色のピースサインは、あなたの目に星が踊るように移ります。スクリーンを星が横切ると、その残像が残ります。その後に従って素敵な跡が

 

落ち着かせてくれる曲線

See the Pen
Stay Calm by Eric Porter (@EricPorter)
on CodePen.

nbsp;

これもシンプルであることがどんなに良いかを示す例です。CSSの構造自体はとてもシンプルなものですが、とても印象が強いものになっています。リボンのような動きとその変化は、安らぎを与える効果があります。数分間眺めていると、日々のストレスを解消してくれるでしょう。

 

甘め？それとも酸っぱめ

See the Pen
Bubble Gum by ilithya (@ilithya)
on CodePen.

nbsp;

自分の心地よいペースで、色を変化させるのはとても落ち着かせる効果があります。この風船の実験を例にしてみましょう。3Dの球体とその背景の両方のグラデーションが変化していき、見る人の心を優しく引きつけます。自分の好みで、甘い印象や酸っぱい印象に配色を変えることができます。

 

心が落ち着くキューブ

See the Pen
Abstract Cube by Mattia Astorino (@equinusocio)
on CodePen.

nbsp;

この3Dのキューブは多くが施されています。軸を中心に回転すると、内部にできる円が振り子のようにゆらゆらと揺れます。このCSSのアニメーションは、スピードを遅めに設定してあるため、圧倒されるというよりはリラックスできるものになっています。

 

平和的なデザイン

See the Pen
Mindfulness app by co0kie (@co0kie)
on CodePen.

nbsp;

このコレクションのほとんどのスニペットはアニメーションがありますが、動きは必ずしも必要ではありません。精神を安定させる模型が、私たちの生活にどのくらい落ち着きをもたらしてくれるかを表しています。昼よる関係なく、深呼吸することを思い出させてくれるような役割を果たします。

 

自然を広げよう

See the Pen
Plant Growth Prototype: Dark Garden by Matthew Main (@matthewmain)
on CodePen.

nbsp;

植物が成長していくのを座って、じっくりと観察できる時間は私たちにありません。しかし、日常生活で束の間ならば、その時間を取ることができます。植物の芽が開き、優しく揺れ動きながら芽吹いていく様子を観察できます。これもJavascriptによるHTML5で作られるアニメーションによるものです。

 

落ち着いて、そしてコードをオンにしよう

少し違和感を持つかもしれませんが、コードは私たちに安らぎをもたらせてくれます。これまで、それをスニペットで証明してきました。

 

色や動きを活用することで、日々のストレスのある生活から少しだけ離れることができます。実際の休暇や休日に取って代わるものにはなりませんが、きちんと利益はあります。小さなリセットは、私たちの脳をリフレッシュしてくれ、また今日やるべきことに向かうやる気をくれるのです。