伸びる矢印

2021年8月25日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

前回作成した「トップへ戻るボタン」を、マウスカーソルを乗せると矢印がニュッと伸びるように改造したのですが、かなりの苦戦を強いられました。今回はその様子をお伝えします。

CSSを書き換える

前回作成したCSSがこちら

#page-top {
  position: fixed;
  right: 12px;
  bottom: -60px;
  height: 50px;
  text-decoration: none;
  font-weight: 700;
  transform: rotate(90deg);
  font-size: 11px;
  line-height: 1.5rem;
  color: #000;
  padding: 0 0 0 35px;
  border-top: solid 2px;
}

#page-top::before {
  content: "";
  display: block;
  position: absolute;
  top: -2px;
  left: 0px;
  width: 15px;
  border-top: solid 2px;
  transform: rotate(35deg);
  transform-origin: left top;
}

これを以下のように書き換えます。

#page-top {
  position: fixed;
  right: 57px;
  bottom: -60px;
  height: 40px;
  text-decoration: none;
  font-weight: 700;
  transform: rotate(90deg);
  transform-origin: right bottom;
  font-size: 11px;
  line-height: 1.5rem;
  color: #000;
  padding: 0 0 0 20px;
  border-top: solid 2px;
  -webkit-transition: all .3s;
  transition: all .3s;
}

#page-top:hover {
  padding-left: 35px;
}

#page-top::before {
  content: "";
  display: block;
  position: absolute;
  top: -2px;
  left: 0px;
  width: 15px;
  border-top: solid 2px;
  transform: rotate(35deg);
  transform-origin: left top;
}

hoverというのは擬似クラスの一種で、マウスカーソルを乗せた時にスタイルを変化させることができます。

今回の矢印の長さは「padding-left」によって決まるので、もともとのpadding-leftを20pxにして、マウスを乗せた時に35pxになるようにしました。

この矢印は横向きで作成した後transform:rotate(90deg)で右に90度回転させているのですが、そのままpadding-leftを変化させると挙動がおかしくなるので、90度回転の起点を初期状態の中心点からtransform-origin:right bottomで右下に変更して、rightとheightを微調整しました。

矢印の長さの変化を滑らかにするため、transitionを追加しました。かかる時間は0.3秒にしました。

これで完璧と思ったんだがなァ...

我々科学者にとって"完璧"とは"絶望"だヨ

なぜか震える

なぜかChromeや一部のEdgeで、矢印にマウスを乗せると微妙にプルプルと震えてしまいます。

気づいてしまうと気になってしかたがないので、解決策を考えることにしました。

参考：CREATOR NOTE｜transformプロパティでcssがガタつくときの対処法

a {
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}

「backface-visibility」というプロパティをhiddenにすることで、謎の震えが解消されるらしいです。

-webkit-はベンダープレフィックスといって、CSSのプロパティの頭につけてそれが拡張機能であることを示すものです。
-webkit-はChromeやSafari用です。
他にはInternet Explorer用の-ms-と、Firefox用の-moz-があります。
ベンダープレフィックスなしバージョンも併記する必要があります。

では早速試してみましょう。

なん...だと...

結論：transformとtransitionは併用注意

そしてすべて作り直す

「ちょっと震えるくらいいいじゃないの」

「別にTOPっていう文字いらなくね？」

「どうせ誰もその矢印押さんやろ」

「そもそも矢印が伸びる必要がない」

...などの（脳内）意見を封殺しつつ、考えに考え抜いた結果、

・回転させるのはTOPの文字だけにする

・縦向きの矢印を別に作って重ねる

きた！これで勝つる！

#page-top {
  position: fixed;
  right: 57px;
  bottom: -60px;
  height: 40px;
  text-decoration: none;
  font-weight: 700;
  transform: rotate(90deg);
  transform-origin: right bottom;
  font-size: 11px;
  line-height: 1.5rem;
  color: #000;
  z-index: 9998;
}

#page-top-arrow {
  position: fixed;
  right: 17px;
  bottom: -60px;
  width: 20px;
  height: 40px;
  color: #000;
  border-right: solid 2px;
  -webkit-transition: height .3s;
  transition: height .3s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 9999;
}

#page-top-arrow:hover {
    height: 59px;
}

#page-top-arrow::before {
  content: "";
  display: block;
  position: absolute;
  top: 0px;
  left: 20px;
  width: 15px;
  border-top: solid 2px;
  transform: rotate(125deg);
  transform-origin: left top;
  z-index: 9999;
}

<a href="#" id="page-top">TOP</a><a href="#" id="page-top-arrow"></a>

「ほんなら卍解は　どんくらい延びるかわかる？」

「しゃァない　よう分かるように　キミらの長さで　教えたげるわ」

「13ピクセルや」

「ピンとけぇへんやろ　数で聞いても」

まとめ

こうして「マウスホバーで伸びる矢印」が完成しました！

修正前と修正後で右下の矢印を比べてみてください。

なお、TOPの文字と矢印を分けたせいで、これらが時間差で別々に動くようになってしまいました。
まあこれはこれでオサレ...かな

たまには「トップへ戻る」を押してやってください。