恒例のPureCSSネタ第3弾です。今回は、ファミコン版スーパーマリオブラザーズのマリオを作ってみました。ドット絵って良いよね。
…んで、ただドットを打つだけだと簡単すぎるという事に途中で気付いてしまったので、急遽アニメーションも加えることにしました。マリオがピョンピョンジャンプします。
See the Pen LWZWRW by Kuzlog (@Kuzlog) on CodePen.
制作時間は約2時間。意外と短め？
SCSSの@mixinを使いまくって、かなり効率よく作業を進めることが出来ました。
まずドット絵全体を囲うdiv要素にposition:relativeを指定して、ドット部分は下記の関数を使っています。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$r: #db2900; //赤 $y: #ffa33c; //黄 $g: #8a7301; //緑 $t: transparent; //透明 @mixin p($t,$l,$w,$h,$color:transparent){ top: $t*5px; //Y軸の位置 left: $l*5px; //X軸の位置 width: $w*5px; //横の長さ height: $h*5px; //縦の長さ background: $color; //色 } |
例えばこの関数にp(4,8,1,3,$r);という感じで引数を渡すと…
|
1 2 3 4 5 |
top: 20px; left: 40px; width 5px; height: 15px; background: #db2900; |
…と展開されます。X軸とY軸を直感的に指定出来るので、ミスったときの修正がめっちゃ楽でした。
アニメーションについては、ただtranslateYで位置を動かしているだけです。「立ち」と「ジャンプ」の絵を比べて色が変化している部分は、animationで無理矢理色を変化させています。
