cssでエレベーターを作って、動くおじさんを乗せてみた。CSVクリエーション部:平野です。一年ぶりにブログを書きます。今回はcssでエレベーターを作って、動くおじさんを乗せてみたいと思います。これまでにCSSで遊ぼう「CSSで絵を描き、さらに動かしてみよう」-入門編-box-shadowを使って目玉を描いてみる。いうブログも書いています。今回の内容にもつながる技術もありますので、よろしければ御覧ください。Chromeのみを想定し制作しております。私の書くブログは「業務で使えるかわからない、ただ色々遊びたいだけだっ!」がテーマです。Chromeで表示確認をしながら制作しました。エレベーターとおじさんを作るよ早速ですが右にエレベーターを設置しました。おじさんも乗っています。upとdownで操作ができます。エレベーター設置の都合上、テキストのスペースがだいぶ狭くなってしまいました。これでもだいぶましになったほうなんです。当初のエレベーター↓スマホを想定して現状のサイズに落ち着きました。スペースの都合上、ソースコードは最後に掲載し、ここでは作業工程やポイントのみ掲載します。Photoshopでおじさんを描きました。あなただけのおじさんを描いてください。私は顔、体、腕、足を動かしたかった為、4つの画像に分割しました。のちに命を吹き込むのでここは涙をこらえてください。分割イメージ(これをトリミングして4つの画像にしました。)おじさんを組み立ててアニメーションを設定するpositionとz-indexを使いおじさんを組み立て、transformで各パーツにアニメーションをつけました。腕の振りの動きはtransform-originで動きの軸を腕の付け根に設定するのがポイントとなります。animationやtransformはCSSで遊ぼう「CSSで絵を描き、さらに動かしてみよう」-入門編-で紹介しているので参考にしてみてください。おじさんが呼吸をしているのが伝わるでしょうか。ふぅふぅって聞こえてきますよね。?エレベーターを作るエレベーターのボタンはラジオボタンを使っています。form部品の装飾をやった事がある人はもう仕組みに気づいたかもしれませんね!:checkedでlabelの装飾を変えるやり方の応用です。チェックが入った時にcssを制御しエレベーターに動きをつけました。エレベーターの動きはスムーズにするためtransitionにしました。animationでpositionを制御するとカクつくことがあるからです。ちなみにこちらのボタンはcssのposition:stickyを使って上部に固定していますが、ブラウザの対応がまちまちなのでブラウザや端末により固定されないこともあるかと思います。すごく便利なプロパティなので大好きなんです。以下2017年8月20日の対応状況です。useエレベーターにおじさんを乗せるサイズや位置を調整おじさんとエレベーターのサイズ感が合わない場合は各パーツの画像サイズ、positionの位置調整を駆使し調整しましょう。エレベーターを動かす感動の瞬間です。噛みしめながらボタンを押下してください。(本当はエレベーター動作中おじさんから「ほぇ~」と声を出したかった。rotate(0deg);}}むすびいかがだったでしょうか。エレベーターは上手く動きましたか?おじさんは動きましたか?アレンジし放題なので、非常ボタン作ったり、おじさんから吹き出しを出したり色んなことが出来ると思います。jsが使えれば出来ることの幅が広がりますが、cssだけで作るのって本当に面白いです。おじさんもcssで作ろうか迷ったのですが、流石に大変そうだったのでお絵描きしました。自分で作った乗り物に自分で作った動くおじさんをセットする。この感覚すごく面白くないですか?発明しているみたいですごく楽しいですよね!冒頭でもお話しましたが、私の書くブログは「業務で使えるかわからない、ただ色々遊びたいだけだっ!」がテーマです。皆さんの何かの参考になれれば幸いです。お気づきになられたであろうか。はじめに描いたおじさんと、エレベーターに乗っているおじさんの腹の大きさが違うということを。MaterialsEN。