CSSスクロールで(マリオ風)横スクロール、(マリオカート風)キャラクター操作

CSSだけで(JavaScript無しで)動くページを作る、というお題でこんなものが

"A"キーと"D"キーで車が左右に動いています。

こちらが作者のステファン・クックさん(Stephen Cook)による解説ページで、13行のhtml以外はすべてCSS、画像ファイルも使っていないということです。

CSS内に定義したデータから絵を描くのは、グラデーションとbox-shadow を使っています。1ピクセルごとに色を指定しているんですね。

キー入力の方はというと、こちらのCSSだけで検索エンジンを作るという記事(デモはこちら)にあるように、inputフィールドの value 属性に反応させればと思ったそうですが、ユーザーの入力に応じて value の値がアップデートされるということは無く、こちらの検索デモでは1行のJavaScriptを使っていることがわかりました。

クックさんは数週間前に間違ってブラウザのJavaScriptをオフにしてしまい、未だに戻す方法を見つけられていないということで、JavaScript を使わない方法を探さざるを得なかったよう。たいへんですね。

疑似セレクタ :valid, :invalid で、フォームフィールド内のタイプ内容がaを含むかどうかを場合分けし、さらにフォームフィールドにプレースホルダーを表示してるかどうかの :placeholder-shown と併せて、キー入力に応じて3値を見分けることにしたそうです。

レースゲームとして背景が動くところは、アルシデス・ケイロスさん(Alcides Queiroz)が公開していたマリオ風横スクロールにヒントを得たということです。

See the Pen Mario made only with CSS gradients - no JS, no embedded images/data URIs, no external images and using a micro HTML =) by Alcides Queiroz (@alcidesqueiroz) on CodePen.

こちらの解説では、CSSグラデーションで各ピクセルを時間に応じて変化させるというのを全ピクセルに対して行うことで、CSSだけでの横スクロール表示を実現しているようです。ソースコードを見ると、Stylus で描画するスプライトのデータをひたすら大量のCSSコードに展開しているのがわかります。生成後のCSSを見るとすごいことになってます。

via TheNextWeb