イイダリョウのブログ。イブイブ!さて、CSSドット絵マリオシリーズ、前回のあらすじ。グラフィックソフトを使わずCSSオンリー打つべし打つべし!でドット絵を描いた(書いた?)マリオ。ホバーアクションで立ちポーズとジャンプポーズを切り替えることに成功したとさ。今回はマリオをCSSアニメで滑らかにジャンプさせたい。発火は擬似クラスをいくつか試したがどれも一長一短あり。最終的にはJSの力を借りてやりたい動きを実現できた。クモのようにコツコツとジャンプするための空間を作るまずは前回の状態。CodePen.カーソルホバーでマリオが立ちポーズ、ジャンプポーズに切り替わります。(スマホではもう一回マリオ以外のスペースを叩かないと戻らない)このままジャンプすると頭を強打するため、何は無くとも空間が必要です。s(立ち)のul要素がありました。この2つを.charaのdiv要素で囲います。この.spaceの空間の中でキャラ.charaを地面に配置したい。absolute;にして.spaceとの相対位置を設定.chara:地面(bottom)からの位置0、左leftからの位置25%下記のようになりました。CodePen.空間の中でマリオを地面の少し左側に立っている。ホバーアクションは保持されていますね。(なお、今回は地面はブロックを打つ余力がなくただの茶色ですw)CSSループアニメマリオをアニメーションさせたい。以前にも触れたCSSアニメを使います。transitionとanimationの2つの方法があり、それぞれ下記の記事で解説しています。クモのようにコツコツとシンプルな設定はtransition、複雑な設定はanimationといった使い分けになります。今回はマリオがワンアクションの中でいったん上に行った後に重力の法則に従ってまた地面に着地したい。した設定はanimationを使います。ease-in;}.charaにanimation設定を追記animation-durationはアニメのスピード(いくつか試して0.8秒0.8sにした)animation-nameでキーフレーム設定を読み込み(キーフレーム名はjump)animation-iteration-countは繰り返す回数(infiniteは回数無制限のループアニメ)animation-timing-functionはアニメの加減速(ease-inは入りがゆっくり)キーフレームの値は別途設定します。ここでは名前だけ設定。animation-timing-functionの初期値はlinearで加減速なし。※参考:animation-timing-function-CSS3リファレンス先ほどのキーフレームjumpを設定します。}}@keyframesでキーフレーム設定(キーフレーム名jump)fromは開始時の設定(positionの下bottomから0pxで地面に立つ)45%〜55%の10%間をbottomから150pxに(ジャンプの頂点に静止時間を作る)toは終了時の設定(bottomから0pxで地面に着地する)fromは0%、toは100%でも同義です。調節した結果、ジャンプの頂点で静止時間を作りました。ease-inと合わせるとゆっくりジャンプして、頂点で一瞬止まった後に加速して着地する、というアニメになります。CodePen.うーむ。ジャンプしたのはいいですが、PC、SP(スマホ)ともに下記の課題が残ります。PC、SP:前回設定したホバーとは設定が分離されているため、立ちポーズのままジャンプし続けるPC:ホバーするとジャンプポーズになるが、今後はジャンプポーズのままジャンプし続けるSP:タッチするとジャンプポーズになる。他の場所をタッチすると立ちポーズになる。ジャンプ設定とホバーのポーズ変更が分離されているわけです。擬似クラス:hoverでホバーアクションポーズ変更と同様にジャンプの方もホバーで発火させたい。animationをこのように変えてみた。ease-in;}.charaの擬似クラス.chara:hoverを作る.charaはポジション設定のみに。animation設定は.chara:hoverに(ホバーで発火する)animation-iteration-countは削除(ループ設定なし、1回のみ実行)こうなりました。CodePen.マリオにホバーするとジャンプします!ただし、PC、SP(スマホ)でそれぞれ下記の課題が残りますPC:ジャンプ中にホバーアウトするとパッと地面に戻ってしまう。PC:ホバーしっ放しだと、着地したあともジャンプ姿勢のままSP:タッチするとジャンプしてくれるが、着地後に他の場所をタッチしないと立ちポーズに戻らないうーむ、惜しい。擬似クラス:activeでクリックアクションホバーではなくクリックで発火させたい。CSSの擬似クラスはいくつかありますが、クリックで使えそうなのは:activeです。※参考::active擬似クラス-スタイルシートリファレンスユーザーの操作で要素がアクティブになった際のスタイルを指定します。a:activeでは“クリックされてから離されるまでの状態”です。「クリックされてから離されるまで離されるまで」というのが少し気になるが、とりあえずやってみる。ease-in;}.chara:hoverを.chara:activeに変更ここで動作検証をしたところスマホ(SP)の方に根源的な問題が。IHOLDINGS『ontouchstart属性を使うだけ』!これだけです!さっそく入れてみる。chara要素にontouchstart属性を追加。CodePen.マリオがクリックでジャンプします!が、、ここでもまだちょっと課題が残ります。PC:ホバーしてもポーズが変わるだけ。クリックするとジャンプし始めるがすぐ着地する。PC:マリオを押し続ける間のみジャンプを開始して着地する。ホバーのポーズ変更とは動きが分離している。SP:マリオを押し続ける間のみジャンプを開始して着地する。着地後も他の場所をタッチしないとジャンプポーズのまま。うーむ、やはり「クリックされてから離されるまで」という設定がネックになりました。あとポーズ変更のホバーとクリックのジャンプが分離しているのも違和感。JSのイベントリスナでclass追加、削除ジャンプもポーズ変更も両方クリックで発火させたい。押し続けなくてもいいよう、押すだけで発火させたい。擬似クラスでは結局のところ難しそうだったのでJSで実現しました。イベントリスナで発火させてclass名を追加・削除します。初期設定まず、CSS擬似クラスはやめて.chara_jumpというクラスにします。*/.chara:activeを.chara_jumpに変更(初期のHTMLの要素には存在しないclass名).mario_jと.mario_sに設定していたホバー:hoverの表示設定displayを丸ごと削除ホバーでのポーズ変更設定がなくなるのでマリオの立ちポーズ、ジャンプポーズともに画面に表示されます。ジャンプポーズの非表示はCSSではなくJSで行います。JSの初期設定を行います。document.querySelector(".mario_s");//ページ読み込み時mario_j.style.display="none";DOM要素を変数に代入(charaに.chara、mario_jに.mario_j、mario_sに.mario_s)ジャンプポーズmario_jのCSSを非表示(display="none")に処理の中でDOMを繰り返し指定するので変数に入れます。ページ読み込み時に立ちポーズを非表示にします。クリック時のイベント(マリオをジャンプさせる)次にイベントリスナでクリックイベントを設定します。マリオをジャンプさせます。false);charaをクリックclickした時にイベントが発生(addEventListener)charaに.chara_jumpクラスを追加(classList.add()関数)ジャンプポーズmario_jを表示(display="block")に立ちポーズmario_sを非表示(display="none")にclassList.add()関数でクラスを追加できます。先ほどの.chara_jumpを追加します。CSSアニメ終了後のイベント(マリオ着地後立ちポーズに戻す)次にCSSアニメ終了後のイベント設定します。CSSアニメの終了を完治してイベントを実行します。その3トランジションの際はtransitionend、キーフレームアニメーションの際はanimationendをつかえばOKです。animationなのでanimationendの方ですね。false);charaのCSSアニメ終了時(animationend)にイベントが発生(addEventListener)charaに.chara_jumpクラスを削除(classList.remove()関数)ジャンプポーズmario_jを非表示(display="none")に立ちポーズmario_sを表示(display="block")にclassList.remove()関数でクラスを削除できます。先ほど追加した.chara_jumpを削除します。ジャンプポーズを非表示、立ちポーズを表示にして最初の状態に戻します。CodePen.おお、PCではクリック、スマホ(SP)ではタッチによってマリオがジャンプ!そして着地後、マリオが立ちポーズに戻ります。これでようやくどちらも希望通りの動きが実現できました!!最後に擬似クラスを試してみたもののPC、スマホともに満足できるような動きは作れませんでした。JSのイベントリスナが一番望み通りの設定ができます。animationでOK擬似クラス:hoverはPCではホバー外すまで、スマホでは他の場所をタッチするまでジャンプポーズのまま擬似クラス:activeではPC、スマホともに押し続けている間だけジャンプする(着地後もジャンプポーズのまま)JSのイベントリスナならばPCのクリック、スマホのタッチで発火させることができる動きはCSS、イベントはJS、という使い分けが今のところのベターな方法のようです。(:clickみたいな擬似クラスがあれば解決なんだけどなー...)さて、次はマリオをクリックした時に「トゥ〜ン」という音を追加したい。実現にあたり、音階を滑らかに上げるポルタメント設定の方法を調べる必要があります。10:30Tweet関連記事2019-02-19【行長・行間・ジャンプ率】タイポグラフィ事始め(適度な箱組みとは)タイポの道も一歩から。文字のデザイン「タイポグラフィ」。様...2019-02-11【擬似クラス:target】CSSのみでハンバーガーメニューを作るスマホの小さい画面でメニューをしまっておくのによく使われる...2019-02-03【pointer-events】フォームの送信ボタンに擬似要素を重ねてもイベントを発火させるフォームの送信ボタンのinputタグにアイコン(擬似要素)を加え...2018-10-30【CSSドット絵】マリオ立ちポーズとジャンプポーズの切り替え以前、CSSだけでドット絵がかけるのか、というシリーズをやって...2018-07-05CSS変数でドット絵マリオをルイージにしたった!「CSSドット絵マリオ」の続きです。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。