概要
- cssで円や三角形などを配置してペンギンさんを作りました。
- css animationでペンギンさんを無限にジャンプさせ続けました。
- jQueryでペンギンさんの目にマウス追尾能を与えました。
※ごめんなさい、ブラウザによってはうまく表示されないかもしれません(chromeは大丈夫です)。
予防線
大仰なタイトルにしてしまいましたが、ド素人が足掻いて作ったペンギンさんを褒めて!!!っていう記事です。変なところはご愛嬌としつつも忌憚なきコメントを頂けるなら無上の喜びです。よろしくお願いいたします。
ペンギンさん
各パーツのほとんどは対称性が高いため、css職人さん達の記事を参考にすれば簡単に作れます(でも苦労した)。
See the Pen
penguin-animation by YoshikiOKAJIMA (@yoshikiokajima)
on CodePen.
作り方
ペンギンさん(直立不動)、ペンギンさん(ジャンプ)、ペンギンさん(こっち見るな)の順にざっくりご説明いたします。
ペンギンさん(直立不動)
divでパーツを作るわけですが、cssお絵描きの界隈では::before, ::after疑似要素やboxshadowを使って最小限のHTML要素で構成する美学が浸透しているように感じます。それぞれの用途は以下の通りです。
boxshadow: 何らかの要素を複製・拡大/縮小する。相似な関係の要素を作りたい場合に用いる。
疑似要素: div要素と同様の使い方が可能。単純な嵩増しとして用いる。
疑似要素も含めたパーツの一覧を以下に示します(ｶｯｺ内はクラス名またはその疑似要素)。
- 体(body)、お腹(::before)
- 左白目(left-eye)
- 左瞳(left-pupil)
- 右白目(right-eye)
- 右瞳(right-pupil)
- 下嘴(beak)、上嘴(::before)、上嘴のフチの黒いところ(::after)
- 左翼(wings)、右翼(::before)
- 左足左指(::before)、左足中指(left-foot)、左足右指(::after)
- 右足左指(::before)、右足中指(right-foot)、右足右指(::after)
- 影(shadow)
See the Pen penguin-standing by YoshikiOKAJIMA (@yoshikiokajima) on CodePen.
以下注意点です。
- 定石では目の部分はboxshadowを使うと思いますが、アニメーションをつける関係で細分化しました。
- 右翼(みぎつばさ)は左翼(ひだりつばさ)です。つまり、右左はペンギンさん中心ではなく我々中心です。
- 足や上嘴はborderで作った三角形を利用したためか、boxshadowで複製できませんでした。
- 左右の足で開き具合に差がある気がしますが、ジャンプさせるとよく分からなくなるのでokとします。
- 影は記述したのになぜか見えてませんがジャンプ編ではちゃんと見えているのでokとしました。
ペンギンさん(ジャンプ)
いまのところまったく命の息吹は感じないかと思います。では動かしてみましょう。
ジャンプはcss-animationで実装しました。具体的には、
- ペンギンさん全体を上下にtranslate、自由落下＆弾性率1のバウンドの軌跡を計算して代入する。
- 足をtranslate＆rotateしてジャンプしてる感を出す。
- 影をrotate＆scaleして、それっぽくする。
の三点ですが、ジャンプというよりボールが跳ねているような挙動になったと感じているので着地後にもう少し沈み込ませるなど、微調整があると良くなると思います(じゃあやれよ)。
See the Pen
penguin-jumping-forever by YoshikiOKAJIMA (@yoshikiokajima)
on CodePen.
どうでしょうか。必死にジャンプをし続けるペンギンさんから生命の尊さを感じ得たでしょうか。もし、まだ上下運動しているdiv要素の塊にしか見えないようでしたら、次にお進みください。
ペンギンさん(こっち見るな)
いよいよペンギンさんの瞳が白目の中を縦横無尽に走り回ります。これまではHTML/CSSにこだわってきましたが、流石にここではjsの力を借りることとします。
基本的な記述は以下の通りです。
1. 目とカーソルの座標をそれぞれ取得する。
2. それらの座標の差(目→カーソルのベクトルに等しい)を計算する。
3. ベクトルの方向を維持したまま、大きさを白目の半径と等しくする(規格化)。
4. マウスが動くと、これまでに計算したベクトルだけtranslateする(jQueryからcssを記述する)。
以上を左右の目について別々に記述しました。細かいところを間違えると瞳が吹っ飛んで彷徨いだすので、気を付けてください。
(以下に完成品を載せますが、冒頭で示したものと同じものです。)
See the Pen
penguin-animation by YoshikiOKAJIMA (@yoshikiokajima)
on CodePen.
いかがでしょうか。規則的な上下運動に終始せず、一途にマウスを目で追い続けるペンギンさんに、心を打たれた方も少なくはないのではないでしょうか。もしかしたら、まばたきをしない点を生物らしくないと感じる方もいらっしゃるかもしれません。他にも、命を吹き込むアイデアがあれば、コメントいただけると嬉しいです。よろしくお願い致します。
最後に
初めての投稿で、不慣れなため数多の御眼汚しがあったかと推察しますが、それでもアドバイスができる心の広い方を募集中です！ともあれ、最後までお付き合いいただき、ありがとうございました。