こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
WebサイトやUIデザインに「遊び心のある動き」を取り入れると、ユーザーに驚きや楽しさを感じてもらえます。
特に「ドラッグするとゴムのように伸びて、手を離すと元に戻る」動作は、モバイルアプリやインタラクションの表現としてよく見かけるエフェクトです。
この記事では JavaScriptとCSSを使って簡単に実装できる「ゴムのように伸びて戻る動作」 を紹介します。
CodePenでそのまま動かせるデモコードも掲載しているので、ぜひ試してみてください。
ゴムのような動きの仕組み
このアニメーションのポイントは「ドラッグ操作で要素を移動させ、離したときに元の位置へスムーズに戻す」ことです。
具体的には以下の流れで作ります。
- マウスダウンまたはタッチスタートでドラッグを開始
- ドラッグ中は要素をマウス（または指）の位置に追従させる
- マウスアップまたはタッチエンドでドラッグを終了し、アニメーションで元の位置へ戻す
これにより、まるで「伸び縮みするゴム」のような自然な動きを表現できます。
実装コード（コピペOK）
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
このコードを貼り付けると、円形の要素をドラッグして離すと「ビヨーン」と元に戻る動作が再現されます。
応用アイデア
- 要素の形を四角やアイコンに変えて遊び心を演出
- 戻るときのアニメーションを「バウンド」風に変更
- スマホ対応にする場合は touchstart / touchmove / touchend を追加
デザインのヒント
ボタンやキャラクターなどに適用すると、ユーザーの体験をぐっと楽しくすることができます。
まとめ
ドラッグして離すと「ビヨーン」と伸びて戻る動作は、ちょっとした遊び心を演出するのにぴったりです。
JavaScriptとCSSを組み合わせれば簡単に実装できるので、UIに取り入れてみてはいかがでしょうか？
satokotadesignキャンペーン実施中！
