Web制作ネタを中心に、ネット上の様々な情報をゆる~く発信する個人ブログです

KuzLog

2019/11/18 2019/11/19 Web制作, ネタ

【ディスクアップ】CSSだけでシンディちゃんを作って踊らせてみた結果www

ディスクアップ、楽しいですよね。
単純にスペックが甘いというのもありますが、出目と演出の絡みや、BIG中の適度な技術介入、そして秀逸なBGMなど、虜になる要素が満載です。僕は未だにビタ押しをミスりまくりますが、それでも楽しくて持ち玉があったらついつい打っちゃいます。

そしてみんな大好きシンディちゃん。ドット絵のくせになんでこんなに可愛いんでしょうか?60G以上持ってきてくれるし。どこぞのアフロとは大違いです。

んで、ディスクアップを打ちながら僕はふと思いました。

「そうだ、CSSでシンディちゃんを踊らせよう(-17k)」

完成品

See the Pen Pure CSS DISCUP SINDY by Kuzlog (@Kuzlog) on CodePen.28426

Sassをそのまま載せたかったんですが、CodePenの仕様上1MB以上のCSSファイルは扱えないようなので、ローカル環境でSassをCSSに変換し、うちのブログのサーバーにアップして読み込みという方法を取りました。もちろんJavaScriptなどのスクリプトは使っていません。

本当はもっとヌルヌル動かしたかったんですが、拷問レベルの地道な作業に精神をゴリゴリ削り取られたので、これでギブアップです。

ちなみに制作時間は9時間です。休日の夜がブッ潰れました。

仕組みを軽く解説

HTML部分はこれだけです。シンプル!

そしてSassのコード。全部貼ると800行を超えるのでガッツリ省略しています。(省略前のコードは記事最後に)

最初の$dots1: (~~~)を見たらなんとなく分かると思いますが、1つ1つのドットを0or1で全て配列にブチ込みました。
特にツールとか使っていないので、YouTubeの映像を見ながら全て手打ちです。マジで地獄です。

…そして肝になるのはこの部分。

どんな処理をしているか超簡単に言うと…

  • 手打ちしたドットデータ($dots1~$dots9)をdiscup関数に渡す
  • X軸とY軸をforで良い感じに回して、位置の情報と色の情報(0なら#151515、1なら#ff4b18)を$resultに追加していく
  • ドットの位置と色の情報が全て入った$resultをbox-shadowに叩き込む

これで、4160個(横52縦80)のbox-shadowが生まれます。恐ろしい量だ…

んで、animationを使ってbox-shadowを切り替えてシンディちゃんが踊っているように見せています。

結果

CSSだけでもシンディちゃんは踊らせられる!けどバカみたいに時間が掛かる!

正直こんな事に時間掛けるくらいなら設定1のディスクアップ打ってたほうがマシです。

「そんな面倒くさいことしなくてもツール作ればすぐ出来るぞwww」とか思った人には以下の呪いを掛けておきます。

  • 両隣のディスクアップの音量がMAXになる
  • REGはそこそこ引けるけどBIG確率が1/800になる
  • BIG中の予告音がほとんど鳴らなくなる
  • DT突入率が20%になる
  • DTに入ってもアフロレディ20Gしか引けなくなる

それでは皆さん、良いディスクアップライフを。

おまけ:SassとCSSの全文

絶対需要ないと思いますけど、一応貼っておきます。

https://kuzlog.com/upload/discup.scss

https://kuzlog.com/upload/discup.css