この頃、英語圏におけるSaaSのティザーサイト等で、こちらのアニメーションが付いたボタンをよく見かけます。一見、難解そうに思えるUIですが、実装はとてもシンプルです。
下記のような構造でDOMを用意してみます。
export const MovingButton = () => {
return (
{/* 親要素 */}
<div className="relative h-[60px] w-[180px] overflow-hidden rounded-full">
{/* アニメーションさせたい光 */}
<div
className="absolute bottom-[50%] left-[0%] h-[50%] w-[20%] origin-bottom"
style={{
animation: 'move 3.2s linear infinite',
background: ...,
}}
/>
{/* ボタンの表層 */}
<button className="absolute inset-0 m-auto flex h-[calc(100%-4px)] w-[calc(100%-4px)] items-center justify-center rounded-full bg-dark4/40 font-medium text-white/90 backdrop-blur-2xl">
Moving Button
</button>
</div>
)
}Copied
これらの要素を下のデモのように動かす想定です。
光
親要素
このように2つの要素（親要素とボタンの表層）を重ねて、親要素よりもボタンの表層を1回り小さくすることにより、光の通り道を作っています。2つの要素の中間層で、光を表現するための要素をx軸方向にアニメーションさせましょう。
@keyframes move {
0% { left: 0%; transform: translateX(0px) rotate(0deg); }
30% { left: 100%; transform: translateX(-100%) rotate(0deg); }
50% { left: 100%; transform: translateX(-100%) rotate(180deg); }
80% { left: 0%; transform: translateX(0px) rotate(180deg); }
100% { left: 0%; transform: translateX(0px) rotate(360deg); }
}Copied
最後に、親要素で overflow: hidden; をすることで、不必要な部分を隠して完成です。
本記事で解説をしました、Moving Buttonコンポーネントの全体のコードは、下記よりご確認をしていただけます。是非、ご参考にされてみてください。
まるで工芸品のようなクラフト型コンテンツ
プロダクトの魅力を伝えるための、機能的なウェブコンテンツを発信しませんか？
CMSやマークダウンを用いた、従来の単なるテキストによる記事型コンテンツではなく、技術者が直接コードを書いて執筆することで、より顧客と積極的に関わり合いを持てるようなデジタル体験を提供することが可能です。
あなたのサイトをもっと魅力的にみせるお手伝いが出来るかもしれません。メディアサイト制作、ウェブコンテンツ制作をご希望の企業様は、お気軽にお問い合わせください。