12日目。ムシャクシャしたので、ストレス解消アプリを作りました。 #初心者

１２日目です。
ムシャクシャする事がありました。
イライラしながらツイッターをながめていたら、イライラしながら目玉を左右に動かすと、スッキリするというライフハックが流れてきました。

EMDRというそうです。
https://ja.wikipedia.org/wiki/EMDR

ふむふむ、これCSSで実装できるんじゃない？

まず、CSSアニメーションの例をざっくり探しました。
その中でシンプルなのを選びました。

今回は、こちらのプログでご紹介の「クネクネ動く CSS loading」を参考にさせていただきました。

<こちらを参考にさせていただきました>
使える！CSSアニメーション 20選
https://lab.sonicmoov.com/markup/css/css-animation-20/

７個の白丸がクネクネしておりましたので、ここから１ついただきました。

この白丸が画面の端から端まで行ったり来たりするように、CSS用語を調べたら、@keyframes 、 transform: translate と、animationあたりをどうにかすればよさそうです！

<こちらを参考にさせていただきました>
【CSS3】@keyframes と animation 関連のまとめ
https://qiita.com/7968/items/1d999354e00db53bcbd8

-1000pxから1000pxを5sで行ったり来たりするようにしました。よさげです。
しかし、パソコンではOKですが、スマホでみるとはみ出します。なんかいい方法ないかなーと探したらありました！ vwとvhです。

<こちらを参考にさせていただきました>
CSSでフルスクリーン(全画面) ＋縦横中央配置レイアウトを作る【3ステップ + おまけ】
https://mae.chab.in/archives/2749

白丸の大きさを画面幅の１％、移動の幅を左右に４９％ずつに設定して。ローカルの動作確認オッケー。それをHerokuにアップ。できました！

ボールが左右に動きます。
http://appdays.herokuapp.com/Day12/

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ボールが左右にうごきます</title> 
    <link rel="stylesheet" href="design.css">
  </head>

<div class="container">
  <div class="ball"></div>
</div>

design.css

body {
    margin: 0;
    padding: 0;
    background: #000000;
}

.container {
    width: 100vw;
    height: 20vh;
    padding-top: 20vh;
    margin: 0 auto;
}

.ball {
    width: 1vw;
    height: 1vw;
    margin: 1vw auto;
    border-radius: 5vw;
}

.ball:nth-child(1) {
    background: #ffffff;
    -webkit-animation: right 5s infinite ease-in-out;
    -moz-animation: right 5s infinite ease-in-out;
    animation: right 5s infinite ease-in-out;
}

@keyframes right {
    0% {
        transform: translate(-49vw);
    }
    50% {
        transform: translate(49vw);
    }
    100% {
        transform: translate(-49vw);
    }
}

ちゃんと縦横ひっくり返してもサイズがきりかわります。レスポンシブ対応できました！

たしかに、左右に動く白丸をぼーっとながめながら、ムシャクシャした事を思い出してみると、なんだかどうでもよくなってきました。催眠術みたいなものでしょうか。

超しょぼいアプリですが、プログラミングって面白いな〜と思いました。
(所要時間 3時間)