7
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

開発者の環境や技術Advent Calendar 2019

Day 24

cssうんちにこっちみんなさせてみた

Last updated at Posted at 2019-12-26

こっちみんな

今回はうんちの目をマウスの動きに合わせて動くようにしたぞ!

Let's Try

See the Pen kocchiminna-unchi by petapetapeta (@petapetapeta) on CodePen.

ポイント

html(pug)& css(stylus)

左右の目を動かしたいので、黒目はそれぞれ要素を作成して中央に配置します。

javascript

今回もvue.jsを使ってます。
mousemoveイベントで座標を取得し、その座標によって目の位置を変えてやります。
白目をはみ出さないように注意しましょう!

いつでもうんちに見られてる感じがして良いですね💩

7
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?