3
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

CSS animation で遊び倒す - ボタン Gooey Effect-

Last updated at Posted at 2019-02-05

CSS animation day16 となりました。

本日からしばらく、SPAやアプリに使える、Gooey Effectについて、学んでいきます。なお、今後 Qiita で作る作品は、著作権フリーなので、ブログ紹介などで、どんどんコピペして気兼ねなくお使いください。(その際、いいね、シェアなどしていただけると、ハッピーです。)

#1. 完成版
ダウンロード (38).gif

#2. なぜか?
Gooey Effect は (2019 年に勝手に流行ると思っている) 流体デザイン と相性がめちゃめちゃよいです。SPAやアプリに取り入れることで、柔らかい印象を与え、マイクロインタラクションにもってこいですね! 

#3. 参考文献
Codepen: Gooey Menu CSS ONLY
Codepen: Gooey Menu

#4. 分解してみる

❶.

ボタンを押して、サークルが移動するためにはどうしたら良いでしょうか?
Javascript を使えば、

document.addEventLister('click', ()=> {...}) 

アローファンクションの中で、移動するアニメーションのクラスを addすれば、できそうですが、CSS のみでなんとかならないでしょうか?

結論から言うと、checkbox, input, label を使えば可能です。下記コードを参照ください。

index.html
 <input type="checkbox" id="start" />
 <label for="start">
     <div class="menu-open-button"></div>
 </label>

styles.css

 .menu-open-button {
  position: absolute;
  top: 20%;
  left: 20%;
  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); 
}

#start {
  display: none;
}

#start:checked ~ label .menu-open-button{
  transform: scale(5.0, 5.0);
}

.menu-open-button:hover {
  transform: scale(1.1, 1.1) translate3d(0, 0, 0);
}

ポイント:
1: CSS セレクタ ~ は、同じ階層のその後に続く要素に適応します。
この場合、label のことです。詳細は、[サルワカ] (https://saruwakakun.com/html-css/reference/selector) の記事をご参照ください。

2: input ボタンを、display: none することで、labelの要素(緑の丸)へのクリックが アニメーションと連動します。

ダウンロード (37).gif

こちら の記事が大変参考になりました。

❷.
では、ボタンをクリックして、別の緑の丸が動くようにします。

index.html
 <input type="checkbox" id="start" />
    <label for="start">
       <div class="menu-open-button"></div>
    </label>
    <div class="circle"></div>
styles.css
#start {
  display: none;
}

.menu-open-button {
  position: absolute;
  top: 20%;
  left: 20%;
  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);
}

.menu-open-button:hover {
  transform: scale(1.1, 1.1);
}

.circle {
  position: absolute;
  top: 20%;
  left: 50%;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: green;
}

#start:checked ~ .circle {
  margin-top: 200px;
}

ポイントは、
labelの中に起動ボタンを配置し、
labelの下に動かしたい要素を配置することです。

ダウンロード (36).gif

❸.
では、❶, ❷を組み合わせて、縦にボタンを2つ出して行きましょう。

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;
}

#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;
}

ダウンロード (38).gif

いい感じの動きになりました。
HTMLの下半分の SVG filter がよくわからない方は、こちら をご参照ください。
明日は、アニメーションの修正を加えたり、icon をつけて、ボタンの最終系を目指します。それではまた〜!

3
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?