🍓
ボタンホバーでランダムな背景色が波紋状に広がるアニメーション
ボタンホバーでランダムな背景色が波紋上に広がるアニメーションの実装について学びました。
サンプル
サンプルはこちら↓
コード抜粋
アニメーションに関係する部分のみ抜粋します。
style.scss
.p-button {
--base-offset-y: 2em;
--background-color: #135589;
position: relative;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
padding: 1.5rem 2rem;
background-color: var(--background-color);
overflow: hidden;
}
.p-button__text {
--shadow-color: #fff;
display: inline-block;
font-size: 1.5rem;
text-transform: uppercase;
color: transparent;
text-shadow: 0 calc(var(--hover-offset-y, 0em) * -1) 0 var(--shadow-color),
0 calc(var(--base-offset-y, 0) - var(--hover-offset-y, 0em)) 0 var(--shadow-color);
z-index: 1;
}
.p-colorful {
display:block;
position:absolute;
inset:0;
width:75px;
height:75px;
margin:auto;
background-color:red;
transform:scale(0);
border-radius:50%;
z-index:0;
}
script.js
const $button = $(".js-button");
const $colorfulElements = createElementsWithClass(5, "span", "p-colorful");
const coloful = gsap.timeline();
coloful.fromTo(
$colorfulElements,
{
scale: 0
},
{
duration: 0.5,
scale: 4,
ease: "power1.out",
stagger: {
each: 0.15
}
}
).to($button, {
"--hover-offset-y": "2em",
duration: 0.5,
ease: "power2.inOut",
},0).pause();
$button.addEventListener("mouseenter", (e) => {
$colorfulElements.forEach((elem) => {
elem.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 50%)`;
});
appendAll(e.currentTarget, $colorfulElements);
coloful.play();
});
$button.addEventListener("mouseleave", (e) => {
coloful.reverse().eventCallback("onReverseComplete", () => {
removeAll($colorfulElements);
});
});
実装ポイント
個人的に実装において大事だと思ったポイントを書きます。
z-indexを指定して重なり順を変更する
z-indexを指定して背景色の要素より「HOVER ME」のテキストの方が上に来るようにします。
指定しなかった場合はテキストが隠れます↓
波紋上に背景色が広がるようにStaggerを指定する
複数の要素に対して一定の遅延を持たせて、アニメーションさせています。
staggerについてはこちら↓
gsap.timeline()の第三引数に0を指定
0を指定して「テキストが上に動くアニメーション」を「背景色が広がるアニメーション」と同時に発生させています。
0を指定しなかった場合↓
Timelineについてはこちら↓
参考サイト
参考サイトはこちら↓
Discussion