こんにちは。デザイナーの野尻です。
近日リニューアルオープンを予定している自社サイトの制作を担当しました。
今回、長年導入したかった「スライムみたいにプルプルした動き」が思ったより簡単に導入できたので、紹介したいと思います。
「スライムみたいにプルプルした動き」とはなんぞ？
これは某ドラゴンクエストをプレイしたことのある方なら想像できると思います。
あのスライムが跳ね回るときの動きをイメージしてください。
あの動きがようやくできるようになりました！
CSSのtransitionプロパティの中にcubic-bezierを追記！
マウスオーバー時に動きをつけたりするときに使うtransitionプロパティですが、ここに「cubic-bezier」を追記するだけで動きを実装することができました！
具体的には
.block {
transition: transform 0.6s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}
こんな感じです。
cubic-bezier(0.68, -0.6, 0.32, 1.6) ←この部分を追記しただけ。
これはイージングモーションの「easeInOutBack」という動きに該当します。
詳しくはこちら
通常のイージングには無い、ちょっと溜めてグーンと伸びて元の大きさに戻る みたいな動きを実装することができます。
実際に動かしてみます
下のロゴにマウスオーバーしてみてください
cubic-bezierなし
cubic-bezier(0.68, -0.6, 0.32, 1.6)つき
いかがでしたでしょうか。
通常のイージングより、動きにアクティブな雰囲気が追加されてより目立たせることができるんじゃないかと思います。
easingモーションはまだまだ色んな動きを表現可能なので、どんどん取り入れていきたいと思います！
