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用語を調べたら、@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
白丸の大きさを画面幅の1%、移動の幅を左右に49%ずつに設定して。ローカルの動作確認オッケー。それをHerokuにアップ。できました!
ボールが左右に動きます。
http://appdays.herokuapp.com/Day12/
<!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>
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時間)