Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

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

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

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

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

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

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

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

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

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

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

白丸の大きさを画面幅の1%、移動の幅を左右に49%ずつに設定して。ローカルの動作確認オッケー。それを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時間)

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away