🍊

ボタンをホバーすると枠線が変化し、マウスの動きに追従するアニメーション

2023/03/09に公開

CSS

ホバーでボタンの枠線が変化して、マウスの動きに追従するアニメーションについて学びました。

サンプル

サンプルはこちら↓

コード抜粋

アニメーションに関する部分を抜粋しました↓

style.scss

.p-button  {
  position: relative;
  font-size:1.5rem;
  font-weight: bold;
  text-transform: uppercase;
  padding:1.5rem 3rem;
  --width:100%;
  --translateX:0;  
  &::before {
    content:"";
    position: absolute;
    inset:0;
    border:1px solid #000;
    pointer-events: none;
    border-radius:100vmax;
    width:var(--width);
    transform:translate(var(--translateX),0);    
  }
}

script.js


const $contactButton = $('.js-button')

const media = gsap.matchMedia()
media.add("(hover:hover) and (pointer:fine)",()=> {
  
$contactButton.addEventListener('mousemove', (e) => {
  const {left,width,height} =e.currentTarget.getBoundingClientRect();
  const posX = e.clientX - left;
  const controlPosX = posX - height /2;
  const interpolatePosX = gsap.utils.interpolate(height / 2 * -1, height / 2,posX /width );
  const calcPercent = height/ width * 100;
  gsap.to(e.currentTarget, {
     "--width":`${calcPercent}%`,
     "--translateX":`${controlPosX}px`,
     x:interpolatePosX,
     duration: .3,
     ease:"sine.out"
  })
})
$contactButton.addEventListener('mouseleave', (e) => {
  gsap.to(e.currentTarget, {
    "--width": "100%",
    "--translateX": `0`,
    x:0,
    duration: .3,
    ease:"sine.out"
  })
 })
})

実装ポイント

個人的に実装において大事だと思ったポイントを書きます。

擬似要素のスタイル変更にはCSS変数を使用

擬似要素はCSSによって追加されるため、DOMに存在しないようです。

But since this content was added with CSS, not HTML, it doesn’t exist in the DOM. This is why it's called a pseudo element; because it isn't technically part of the DOM like our hard-coded HTML is; it's added after-the-fact with style rules.

引用元サイト↓

そのため、擬似要素のスタイルを変更する時はCSS変数を使いました。