投稿日：2019-03-01T18:55:52+09:00

CSS animation で遊び倒す - Submit Button -

CSS animation day39 となりました。
やっと、画像アップロード制限(100MB月)が解除されました。
これから、バシバシ画像を貼っていきます！

1. 完成版

See the Pen Plane Button (Experiment2) by hiroya iizuka (@hiroyaiizuka) on CodePen.

2. なぜか？

UX Milk に大変わかりやすい、マイクロインタラクションの記事が載ってました。　

効果的なマイクロインタラクションには、4つのステップが大事である。

1: トリガー　　　　　
　ユーザーが次の行動へと促すためのきっかけ
2: ルール 　　　　　　
　文言などのパラメーターは、インタラクションで何が起こるのかを示す
3: フィードバック　　
　ユーザーがマイクロインタラクションをクリックするとき、何らかの反応を返す
4: ループとモード
　マイクロインタラクションがどれくらいの頻度で使われているか。
　繰り返されることで、ユーザーは親近感がわく。
　モードは、別のフィードバック反応で、ユーザーの操作が最初と異なるものを示す・

3, 4 は知らなかったです。納得ですね！

こちらの記事では、マイクロインタラクションには

1: 無意識にストレスなく利用できる様にする
2: 欲しいものをすぐに提供する
3: 人間味を感じるフィードバックを与える

が大事とのことです。大変勉強になりますね。

そして何と、

こういう本があるそうです、読破したら、後日共有いたします。

3. 参考文献

Flyaway Send Button
ANIMISTA

4. 分解してみる

❶.
今日は、メールを送信する時に、ボタンを押すと飛行機が飛んでいくアニメーションをつくりましょう。マークアップします。
index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="button">
        Send
      </div>
    </div>
  </body>
</html>
styles.scss
body {
  background: #000;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}

.button {
  position: relative;
  width: 200px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: #8fc866;
  font-size: 28px;
  border-radius: 30px;
  border: 2px solid #8fc866;
  background-size: 400%;
}
画像を貼れることに、幸せを感じます。
Qiitaに投稿する皆様も、アップロード制限(100MB/月)には、気をつけてくださいね。

Send の横に、FontAwsomeで、飛行機のアイコンを探します。
やり方がわからないかたは、前回の記事を参照ください。

テレグラムplane を採用します。

では、このicon を Send の横に配置しましょう。
index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/styles.css" />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
      integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="container">
      <div class="button">
        Send
        <i class="fab fa-telegram-plane plane"></i>
      </div>
    </div>
  </body>
</html>
styles.scss
.plane {
  font-size: 35px;
  color: #ffc;
  position: absolute;
  top: 37px;
  left: 155px;
}
いい感じです！

❷.

では、アニメーションをつけていきましょう。
上述の、マイクロインタラクションの4つのステップに則りましょう。

1: トリガー
ボタンをhover して、クリックに繋がる様に促すには、どういうアニメーションにしたら良いでしょうか？

飛行機が離陸準備をしていることを連想させるアニメーションをつければ良さそうですね。
そのためには

1: 飛行機が角度が変わって、滑走路を動く可能様に、X軸方向に動く
2: ボタンが発射準備整ったら、エンジン吹いて揺れるかの様に、振動が起こる
3: 離陸準備が整ったことを、border-width を変えて表現する

では、やっていきましょう！
styles.scss
.button {
  position: relative;
  width: 200px;
  height: 100px;
  padding-right: 20px;
  text-align: center;
  line-height: 100px;
  color: #8fc866;
  font-size: 28px;
  border-radius: 30px;
  border: 2px solid #8fc866;
  background-size: 400%;

  &:hover {
    transition-delay: 0.2s;
    animation: vibrate 0.3s infinite 0.5s both;
    border-width: 4px;
    .plane {
      transform: translateX(5px) rotate(10deg);
      transition-timing-function: ease-in;
      transition-duration: 0.2s;
    }
  }
}

.plane {
  font-size: 35px;
  color: #ffc;
  position: absolute;
  top: 37px;
  left: 155px;
}

@keyframes vibrate {
  0% {
    transform: translate(0);
  }
  20% {
    transform: translate(-2px, 2px);
  }
  40% {
    transform: translate(-2px, -2px);
  }
  60% {
    transform: translate(2px, 2px);
  }
  80% {
    transform: translate(2px, -2px);
  }
  100% {
    transform: translate(0);
  }
}
See the Pen Plane Button (experiment) by hiroya iizuka (@hiroyaiizuka) on CodePen.

animation-delay とtransform プロパティを使いました。

ちょっと振動がくどい場合は
styles.scss
.button {
  position: relative;
  width: 200px;
  height: 100px;
  padding-right: 20px;
  text-align: center;
  line-height: 100px;
  color: #8fc866;
  font-size: 28px;
  border-radius: 30px;
  border: 2px solid #8fc866;
  background-size: 400%;

  &:hover {
    border-width: 4px;
    .plane {
      animation: vibrate 0.3s infinite 0.5s both;
    }
  }
}

.plane {
  font-size: 35px;
  color: #ffc;
  position: absolute;
  top: 37px;
  left: 155px;
}

@keyframes vibrate {
  0% {
    transform: translate(0) rotate(10deg);
  }
  20% {
    transform: translate(-1px, 1px) rotate(10deg);
  }
  40% {
    transform: translate(0px, 0px) rotate(10deg);
  }
  60% {
    transform: translate(-1px, 1px);
  }
  80% {
    transform: translate(0px, 0px) rotate(10deg);
  }
  100% {
    transform: translate(0, 1px) rotate(10deg);
  }
}
See the Pen Plane Button (Experiment2) by hiroya iizuka (@hiroyaiizuka) on CodePen.

後者の方が、「micro」なinteraction で、飛行機が飛びたくてうずうずしている表現が生まれ、クリックするトリガーになっています。
こっちの方がいいかもしれません。

飛行機が滑走路を移動し、到着し、エンジンをふかしたアニメーションを表現できました。
では次にといきたいところですが、長くなりそうなので、続きは次回にします。
それでは、また明日〜

　 Tweet
Qiitaで続きを読む

投稿日：2019-03-01T18:45:58+09:00

rgbaで背景色を半透明にする方法

ヘッダーの背景色を半透明にしたらかっこいいなと思い調べて見ました

RGBAとは？
赤（R）緑（G）青（B）にアルファという透過度という情報を加えたもの
RGBは1~255の数値で色を指定し、A（透明度）は0（完全に透明）~1（不透明）という数値で指定します。
example.rb
background: rgba(10,10,100,0.2);
こんな感じの青透明なヘッダーができました。

rgbaで半透明にするメリット

opacityでも半透明にすることができるが、中のテキストも透過するらしい

rgbaなら背景色のみを透過できるというメリットがある

参考

RGBA値で背景を半透明にする
 CSS：CSS3の「rgba()」で背景色を透過する方法

　 Tweet
Qiitaで続きを読む

投稿日：2019-03-01T16:48:56+09:00

スマホでフォントサイズが16px以下でもinputフォーカス時にズームインさせない

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
いつもinputは16px以上でとデザイナーの方に言っていたのですが、格好いいデザインなのでどうにかできないかといろいろやってたら上でできました。

iPhone、Androidともに拡大しない。(ここでいうAndroidは9を指します。)
Androidの場合maximum-scale=1を入れるとズームインできなくなるみたい。

なお、Androidの場合
<meta name="viewport" content="width=device-width,initial-scale=1">
のみでも拡大しない。前は拡大してたような…
JSでUA判別してViewport切り替えるのがベストなのでしょうか

　 Tweet
Qiitaで続きを読む

投稿日：2019-03-01T16:23:52+09:00

游ゴシックの指定方法

毎回、游ゴシックを指定するたびに調べているので、メモを残す。（99%自分のため。）

主に参考にしたのはこちらです。
游ゴシックのfont-family指定方法2018年度版！@font-faceは絶対NG！WindowsのChromeでかすれる問題徹底検証

どうしてとか、そうしないとどうなるのとかはこちらをご覧ください。

游ゴシックの指定方法
body{
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
}
boldの指定方法
.bold{
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  font-weight: bold;
}
アルファベットと日本語で太さを変えたい時
body{
  font-family: "アルファベットに指定したいフォントファミリー", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
}
.bold_ja{
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  font-weight: 700;
}
.bold_en{
  font-family: "アルファベットに指定したいフォントファミリー", sans-serif;
  font-weight: 500;
}

　 Tweet
Qiitaで続きを読む

20190301のCSSに関する記事は4件です。

CSS animation で遊び倒す - Submit Button -

1. 完成版

2. なぜか？

3. 参考文献

4. 分解してみる

rgbaで背景色を半透明にする方法

スマホでフォントサイズが16px以下でもinputフォーカス時にズームインさせない

游ゴシックの指定方法

游ゴシックの指定方法

boldの指定方法

アルファベットと日本語で太さを変えたい時

日付別

タグ一覧