その他

2022.02.25

【CSS】グーやパーに変形!マウスカーソルに掴む動作を実装する方法

スライダーなど、ドラッグで動かすことができる要素の上にカーソルを置いた時、カーソルをドラッグできるような見た目に変形させるとユーザーにとっても親切です。

まずは掴めそうな

実装方法はとても簡単で、cursor: grab;を指定するだけです。

.sample{
  cursor: grab;
}

さらにドラッグしている時は掴んでいるような動作にしたい場合は以下のようにします。

.sample{
  cursor: grab;
}

.sample:active {
  cursor: grabbing;
}

activeの時に、cursor: grabbing;を指定すると掴む動作が実装できます!

実際にスライダーに実装してみました。

See the Pen Untitled by spiqa design (@spiqa_design) on CodePen.

自分のマウス動作に合わせてカーソルが掴んだり離したりするのでとても気持ちいいです!
とても簡単なのでぜひ実装してみてくださいね♪

この記事をシェアする

関連記事

  • 2024.03.22

    Webデザインにおけるアニメーションについて考えてみた〜実例編〜

    その他

  • 2024.03.12

    Webデザインにおけるアニメーションについて考えてみた〜メリット・デメリット編〜

    その他

  • 2023.12.30

    案件を切り替える拡張機能「Project Manager」が便利!

    その他

おすすめ記事

  • 2021.08.31

    超簡単!Wordpressにヒートマップを導入する方法

    その他

  • 2021.02.21

    【勝手にWEBサイトレビュー #12】実績紹介が魅力的!南アフリカ共和国にあるWeb制作会社のコーポレートサイト

    その他

  • 2021.02.06

    【CSS】疑似要素(before, after)に画像を表示させる方法【サイズ変更も可能】

    その他

TAG

×