CSS animation day16 となりました。
前回 までのボタンです。
この時点での課題は、以下の通りです。
- クリックを二度すると、突然上の2つのボタンが消えてしまう
- Icon がない
- クリックしたら、一番したのボタンのIcon が変化してない
これらを仕上げていきましょう。
#1. 完成版
See the Pen Gooey Button by hiroya iizuka (@hiroyaiizuka) on CodePen.
#2. 参考文献
Codepen: Gooey Menu CSS ONLY
Codepen: Gooey Menu
サルワカ
#3. 分解してみる
❶. クリックを二度すると、突然上の2つのボタンが消えてしまう
こちらに対しては、ボタンの初期設定に、translate3d(0,0,0)を設定すれば、解決できそうです。ではやっていきましょう。
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="gooey">
<input type="checkbox" id="start" />
<label for="start">
<div class="menu-open-button"></div>
</label>
<div class="circle1"></div>
<div class="circle2"></div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="filter">
<feGaussianBlur
in="SourceGraphic"
stdDeviation="20"
result="blur"
/>
<feColorMatrix
in="blur"
mode="matrix"
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7"
result="filter"
/>
<feBlend in="SourceGraphic" in2="filter" />
</filter>
</defs>
</svg>
</div>
</body>
</html>
styles.css
body {
margin: 0;
padding: 0;
}
.container {
position: relative;
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.gooey {
width: 100%;
height: 100vh;
margin: 0 auto;
filter: url("#filter");
}
#start {
display: none;
}
.menu-open-button {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
border-radius: 50%;
background: green;
cursor: pointer;
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition-duration: 400ms;
transform: scale(1, 1);
z-index: 2;
}
.menu-open-button:hover {
transform: scale(1.1, 1.1);
}
.circle1,
.circle2 {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
border-radius: 50%;
background: green;
transition: transform ease-out 200ms;
transform: translate3d(0, 0, 0);
}
#start:checked ~ .circle1 {
transform: translate3d(0, -150px, 0);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition-duration: 800ms;
}
#start:checked ~ .circle2 {
transform: translate3d(0, -300px, 0);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition-duration: 800ms;
}
いい感じです。
❷. Icon がない
FontAwsome を使いましょう。
まずは、HTML の直前に、下記をコピペしましょう。
index.html
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
FontAwsome のページへ行き、好きなフォントを探します。
メール, はてなマークのアイコンを選択し、HTMLに貼ります
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.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="gooey">
<input type="checkbox" id="start" />
<label for="start">
<div class="menu-open-button"></div>
</label>
<div class="circle1">
<i class="far fa-envelope"></i>
</div>
<div class="circle2">
<i class="far fa-question-circle"></i>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="filter">
<feGaussianBlur
in="SourceGraphic"
stdDeviation="20"
result="blur"
/>
<feColorMatrix
in="blur"
mode="matrix"
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7"
result="filter"
/>
<feBlend in="SourceGraphic" in2="filter" />
</filter>
</defs>
</svg>
</div>
</body>
</html>
アイコンが出てきましたので、サイズや位置を調整します。
サルワカ の記事が大変わかりやすいです。
index.html
<div class="circle1">
<i class="far fa-envelope mail"></i>
</div>
<div class="circle2">
<i class="far fa-question-circle question"></i>
</div>
styles.css
.mail {
font-size: 3em;
color: #fff;
padding: 26px;
}
.question {
font-size: 3em;
color: #fff;
padding: 26px;
}
いい感じです。
表現を加えます、アイコンのopacityが、だんだん濃くなるようにしましょう。
styles.css
#start:checked ~ div i {
animation: blight 600ms ease-in forwards;
}
@keyframes blight {
0% {
opacity: 0.6;
}
100% {
opacity: 1;
}
}
いい感じです。
なお、forwards でアニメーションの再生を終了時で、固定することができます。
❸. クリックしたら、一番したのボタンのIcon が変化してない
menu-opne-buttonに、Iconとアニメーションを設定しましょう。
index.html
<div class="gooey">
<input type="checkbox" id="start" />
<label for="start">
<div class="menu-open-button">
<i class="fas fa-plus"></i>
</div>
</label>
<div class="circle1">
<i class="far fa-envelope mail"></i>
</div>
<div class="circle2">
<i class="far fa-question-circle question"></i>
</div>
</div>
styles.css
.plus {
font-size: 3em;
color: #fff;
padding: 27px 29px;
}
.mail {
font-size: 3em;
color: #fff;
padding: 26px;
}
.question {
font-size: 3em;
color: #fff;
padding: 26px;
}
#start:checked + label div i {
transform: rotateZ(-45deg);
transition-timing-function: ease;
transition-duration: 300ms;
}
隣接セレクタの + を使って、アニメーションを追加してます。
- を × にするには rotateZ すれば OKですね。
というわけで、2回に渡り、Gooey Buttonが完成しました。 プログラミングもそうですが、エラーに遭遇した時に、問題の切り分けを行い、どこで躓くのか？と考えることは大事ですね。すごい作品を見かけた時も、どうすればこの作品は出来上がるのか？自分が表現できてないのは、どこだ？とつぶさに自問自答して取り組めば、今より一歩前進し、ある時、はるか遠くのかなたまでたどり着くんですね。
蝶を無我夢中で追ってると、いつか山の頂上にいたというのが、自分の好きな理想の状態ですが、これからも毎日コツコツ、デザインとアートに取り組みたいと思います。
それでは。また明日〜！