こんにちは、キャスレーコンサルティング CSVクリエーション部:平野です。
またまた一年ぶりにブログを書きます。よろしくお願いします。
今回はcssでエレベーターを作って、動くおじさんを乗せてみたいと思います。
これまでに

というブログも書いています。

今回の内容にもつながる技術もありますので、よろしければ御覧ください。

推奨ブラウザはGoogle Chromeです。
注意:今回のテーマはGoogle Chromeのみを想定し制作しております。
私の書くブログは「業務で使えるかわからない、ただ色々遊びたいだけだっ!」がテーマです。
今回はMacのGoogle Chromeで表示確認をしながら制作しました。

エレベーターとおじさんを作るよ

早速ですが右にエレベーターを設置しました。
おじさんも乗っています。
upとdownで操作ができます。エレベーター設置の都合上、テキストのスペースがだいぶ狭くなってしまいました。
これでもだいぶましになったほうなんです。当初のエレベーター↓
firstスマホを想定して現状のサイズに落ち着きました。スペースの都合上、ソースコードは最後に掲載し、ここでは作業工程やポイントのみ掲載します。

やること・ルール

やること

  • おじさんを作ってアニメーションで動かす
  • エレベーターを作る

ルール

  • jsは使わない
  • 投げ出さない
  • 別におじさんじゃなくても良い

おじさんを描く

Adobe Photoshopでおじさんを描きました。

あなただけのおじさんを描いてください。
draw01

おじさんをパーツ化する

アニメーションで動かしたい箇所をパーツ化

私は顔、体、腕、足を動かしたかった為、4つの画像に分割しました。
のちに命を吹き込むのでここは涙をこらえてください。

分割イメージ(これをトリミングして4つの画像にしました。)
draw02

おじさんを組み立ててアニメーションを設定する

positionとz-indexを使いおじさんを組み立て、transformで各パーツにアニメーションをつけました。

腕の振りの動きはtransform-originで動きの軸を腕の付け根に設定するのがポイントとなります。

animationやtransformはCSSで遊ぼう「CSSで絵を描き、さらに動かしてみよう」-入門編-で紹介しているので参考にしてみてください。

おじさんが呼吸をしているのが伝わるでしょうか。。。
ふぅふぅって聞こえてきますよね。ね?

エレベーターを作る

エレベーターのボタンはラジオボタンを使っています。
form部品の装飾をやった事がある人はもう仕組みに気づいたかもしれませんね!

:checkedでlabelの装飾を変えるやり方の応用です。
チェックが入った時にcssを制御しエレベーターに動きをつけました。

エレベーターの動きはスムーズにするためtransitionにしました。
animationでpositionを制御するとカクつくことがあるからです。

ちなみにこちらのボタンはcssのposition:stickyを使って上部に固定していますが、ブラウザの対応がまちまちなのでブラウザや端末により固定されないこともあるかと思います。

すごく便利なプロパティなので大好きなんです。使いたいんです。

以下2017年8月20日の対応状況です。
sticky

Can I use

エレベーターにおじさんを乗せる

サイズや位置を調整

おじさんとエレベーターのサイズ感が合わない場合は各パーツの画像サイズ、positionの位置調整を駆使し調整しましょう。

エレベーターを動かす

感動の瞬間です。

噛みしめながらボタンを押下してください。
(本当はエレベーター動作中おじさんから「ほぇ~」と声を出したかった。)

updown

今回のソース

html


<div id="ele_box">
    <input type="radio" name="ele_btn" class="ele_btn" id="up" checked><span>up</span>
    <input type="radio" name="ele_btn" class="ele_btn" id="down"><span>down</span>
    <div id="ele">
        <div id="arrow">
            <label for="up" class="ele_label">↑</label>
            <label for="down" class="ele_label">↓</label>
        </div>
        <div id="tikatika">
            <div id="ojisan">
                <div id="kao"></div>
                <div id="karada">
                    <div id="ude"></div>
                </div>
                <div id="asi"></div>
            </div>
        </div>
    </div>
</div>

css

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
#ele_content {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction: row;
}
#text_box {
	padding: 5px;
	width: calc(100% - 100px);
}
#ele_box {
	background: #000;
	border: solid 1px #000;
	box-sizing: border-box;
	color: #fff;
	width: 100px;
	position: relative;
}
.ele_btn,
.ele_label {
	cursor: pointer;
}
.ele_btn,
.ele_btn + span {
	display: inline-block;
	height: 20px;
	line-height: 20px;
	position: -webkit-sticky;
	position: sticky;
}
.ele_btn {
	width: 30px;
}
.ele_btn + span {
	width: calc(100% - 30px);
}
#up,
#up + span {
	top: 0;
}
#down,
#down + span {
	top: 20px;
}
#up:checked ~ #ele {
	top: calc(0% + 60px);
}
#down:checked  ~ #ele {
	top:calc(100% - 150px);
}
#up:checked ~ #ele label[for="up"],
#down:checked ~ #ele label[for="down"] {
	color: red;
	font-weight: bold;
}
#ele {
	background: #fff;
	height: 150px;
	width: 100%;
	position: absolute;
	top: 0;
	right: 0;
	transition-duration: 1s;
	transition: all 5s ease-in-out;
}
#arrow {
	background: #666;
	height: 25px;
}
.ele_label {
	color: #ccc;
	display: inline-block;
	text-align: center;
	width: 50%;
}
#tikatika {
	width: 100%;
	height: 125px;
	position: relative;
	animation: 5s tikatika linear infinite;
}
#ojisan {
	height: 125px;
	width: 50px;
	margin-left: -13px;
	position: absolute;
	left: 50%;
	animation: 10s kurukuru linear infinite;
}
#kao {
	z-index: 40;
	background-image: url(顔の画像);
	background-size: cover;
	height:40px;
	width: 46px;
	position: absolute;
	top: 13px;
	animation: 5s kao linear infinite;
}
#karada {
	z-index: 20;
	background-image: url(体の画像);
	background-size: cover;
	height:47px;
	width: 47px;
	position: absolute;
	top: 40px;
	animation: 5s karada linear infinite;
}
#ude {
	z-index: 30;
	background-image: url(腕の画像);
	background-size: cover;
	height:36px;
	width: 18px;
	position: absolute;
	top: 12px;
	left:28px;
	transform-origin: 8px 0px;
	animation: 3s ude linear infinite;
}
#asi {
	z-index: 10;
	background-image: url(足の画像);
	background-size: cover;
	height:42px;
	width: 30px;
	position: absolute;
	top: 78px;
	left: 10px;
	transform-origin: center bottom;
	animation: 3s asi linear infinite;
}
@keyframes tikatika {
	0% {
		background: #fff;
	}
	10% {
		background: #fff;
	}
	11% {
		background: radial-gradient(farthest-side circle at center top, #ccc 0%, #000 100%);
	}
	12% {
		background: #fff;
	}
	60% {
		background: #fff;
	}
	81% {
		background: radial-gradient(farthest-side circle at center top, #ccc 0%, #000 100%);
	}
	82% {
		background: #fff;
	}
	83% {
		background: radial-gradient(farthest-side circle at center top, #ccc 0%, #000 100%);
	}
	84% {
		background: #fff;
	}
	100% {
		background: #fff;
	}
}
@keyframes kurukuru {
	0% {
		transform: rotateY(0deg);
	}
	80% {
		transform: rotateY(0deg);
	}
	81% {
		transform: rotateY(180deg);
	}
	99% {
		transform: rotateY(180deg);
	}
	100% {
		transform: rotateY(0deg);
	}
}
@keyframes kao {

	0% {
		transform: rotate(0deg);
	}
	25% {
		transform: rotate(3deg);
	}
	50% {
		transform: rotate(0deg);
	}
	75% {
		transform: rotate(-7deg);
	}
	100% {
		transform: rotate(0deg);
	}
}
@keyframes ude {

	0% {
		transform: rotate(0deg);
	}
	25% {
		transform: rotate(3deg);
	}
	50% {
		transform: rotate(0deg);
	}
	75% {
		transform: rotate(-3deg);
	}
	100% {
		transform: rotate(0deg);
	}
}
@keyframes karada {
	0% {
		transform: scale(1,1);
	}
	50% {
		transform: scale(1.1,.9);
	}
	100% {
		transform: scale(1,1);
	}
}
@keyframes asi {
	0% {
		transform: rotate(0deg);
	}
	50% {
		transform: rotate(2deg);
	}
	100% {
		transform: rotate(0deg);
	}
}

むすび

いかがだったでしょうか。エレベーターは上手く動きましたか?おじさんは動きましたか?アレンジし放題なので、非常ボタン作ったり、おじさんから吹き出しを出したり色んなことが出来ると思います。jsが使えれば出来ることの幅が広がりますが、cssだけで作るのって本当に面白いです。おじさんもcssで作ろうか迷ったのですが、流石に大変そうだったのでお絵描きしました。

自分で作った乗り物に自分で作った動くおじさんをセットする。

この感覚すごく面白くないですか?

発明しているみたいですごく楽しいですよね!
冒頭でもお話しましたが、私の書くブログは「業務で使えるかわからない、ただ色々遊びたいだけだっ!」がテーマです。皆さんの何かの参考になれれば幸いです。

お気づきになられたであろうか。
はじめに描いたおじさんと、エレベーターに乗っているおじさんの
腹の大きさが違うということを。