はじめに
今回は、ホバーした時に画像が分割して出現するアニメーションの作成方法を解説します🍕
画像の分割数や縦横の出現方向もHTML内でdata属性を使って決められます!
👇は完成形のCodePenデモです!
結論としては、画像の分割はclip-pathでやりホバー前にtranslateで移動させてたものをホバーしたら戻すことでこのような表現ができます!アニメーションはJavaScriptでGSAPを利用しています🍀
それでは見ていきましょう!
HTMLとCSS
まずは基本的なHTMLとCSSを見ていきましょう!
HTML
ここで分割数をdata-slice-number
で、出現方向をdata-slice-direction
でdata属性を利用して決められます。縦からの出現はverticalで、横からはhorizonになります!
また、JavaScript側で分割数に応じた画像の数を.card-img-wrap
に入れていきます。
それではCSSを見ていきましょう!
CSS
今回のレイアウトに関係がありそうな箇所は以下のコードになります
画像自体はposition: absolute
とinset: 0
でカード内に位置させ、JavaScriptで上下か左右に移動させます。
.card-img
のwidthとheightに関しては画像分割でclip-pathを使う都合上、隙間ができてしまうのでその対策です!こちらはJavaScriptの方で詳しく見ていきます。
JavaScript
👇は今回のJavaScriptの全コードになります。
冒頭に述べたようにアニメーションにはGSAPを使用します!
それでは詳しく見ていきましょう!
init()
ここではオプションとしてdata属性で決めた分割数と出現方向を変数に入れます。
このオプションを画像を複製するsetUpImage()
、分割するsetClipPath()
、アニメーションさせるanimation()
メソッドに引数で渡してあげます。
setUpImage()
ここでは分割数に応じて画像を複製していきます。
すでに画像は1つありますので、1引いてforループを回してcloneNode()
で複製してappendChild()
で..card-img-wrap
の中に入れていきます。this.imagesはアニメーションで使います。
setClipPath()
setClipPath()では画像をclip-pathで分割します。
img.style.clipPathのところはClippyなどのジェネレーターで実際に自分で触ってみると理解できるかと思います。出現方向によって変えているって感じですね!
ホバー前にtranslateで位置を移動させておくのですが、縦方向のときは偶数は下から、奇数は上から出現するように実装しています。
また、先述したようにclip-pathで分割しているので隙間が出てきてしまいます。
なのでleftなどでずらしてあげます。その上でCSSも調整します。
↓はCSSの対策箇所の再掲です!
隙間が出ないようにCSSプロパティの--slice-num
で分割数の個数をセットしてCSSでその個数分をwidthとheightで広げてあげていました。これによりclip-pathで分割しても隙間が出なくなります!
ぜひ対策してないバージョンでも試してみてください!
animation()
最後にホバー時のアニメーションになります。
ホバー前にずらしていた位置を元に戻すだけですね!
マウスが入ったか出たのかの制御はGSAPのtimeline()
を使います。
マウスが入ればplay()
を、出ればreverse()
で戻すことで実現できてます!
まとめ
GSAPとclip-pathを使ってホバーした時に画像が分割して出現するアニメーションの作り方を解説しました。
clip-pathのプロパティの箇所が分かりづらいかとは思いますが、ぜひジェネレーターなどを使ってどうなっているのか確認してみてください!
この記事が参考になれば幸いです。