おりゃーうりゃー!CSSだけで忍者に手裏剣を投げさせてみた
ByOn
いやーもうそろそろ夏っすね。女子の浴衣にドキッとくる季節ですね。
彼女居ませんが。
さて、タイトル通りなんですが、CSSだけで忍者くんに手裏剣を投げさせてみました。意外に楽しかったので公開してみたいと思います。
この子に投げさせてみたよ
可愛いでしょ?(自分で言うな)夜な夜なレイヤーを重ね合わせこの子は生まれました。
まぁ、僕なんですが。
この記事を書く為に忍者セットを作成したんですが、意外にも手裏剣を作るのが大変でした。3レイヤーで出来てます。
レスポンシブ化しようとしましたがめんどくさくなって固定にしました。固定良いよ固定。
実装方法
参考にしたサイト
さて、実装方法ですがCSS3のアニメーションを利用して動かしています。
ロジック的には キーフレーム という CSS3アニメーション の機能を使い、左手やら手裏剣やらを個別にアニメーション指定をして手裏剣を投げています。
もっと時間をかければ面白い挙動が出来そうですね。
一応コードも載せときます。
HTML
<div class="ninja_space"> <div class="anime"> <div class="maru"><a href="http://programmerbox.com/">●</a></div> </div> <div class="ninja"></div> <div class="left_hand"></div> <div class="syuriken"></div> </div>
CSS
body {
overflow-x: hidden; /* 横のスクロールバーを隠す */
}
.ninja_space {
position: relative;
}
/* 忍者本体 */
.ninja {
background-image: url("my_ninja_1_left_1.png");
background-repeat: no-repeat;
width: 400px;
height: 400px;
position: relative;
top: 9px; /* 調整用 */
left: 8px; /* 調整用 */
z-index: 3;
}
/* 左手 */
.left_hand {
background-image: url("left_hand_1.png");
background-repeat: no-repeat;
width: 29px;
height: 55px;
position: absolute;
top: 277px;
left: 237px;
z-index: 2;
/* 角度 */
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
/* アニメーションの時間 */
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
-ms-animation-duration: 3s;
-o-animation-duration: 3s;
animation-duration: 3s;
/* キーフレーム指定 */
-webkit-animation-name: left_hand;
-moz-animation-name: left_hand;
-ms-animation-name: left_hand;
-o-animation-name: left_hand;
animation-name: left_hand;
/* アニメーションを繰り返す */
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/* Chrome Safari用 */
@-webkit-keyframes left_hand {
from {
}
10% {
-webkit-transform: rotate(-50deg);
left: 243px;
top: 270px;
}
15% {
-webkit-transform: rotate(-20deg);
left: 240px;
top: 274px;
}
to {
-webkit-transform: rotate(0deg);
left: 237px;
top: 277px;
}
}
/* Firefox用 */
@-moz-keyframes left_hand {
from {
}
10% {
-moz-transform: rotate(-50deg);
left: 243px;
top: 270px;
}
15% {
-moz-transform: rotate(-20deg);
left: 240px;
top: 274px;
}
to {
-moz-transform: rotate(0deg);
left: 237px;
top: 277px;
}
}
/* IE用だけど意味なし 一応記述 */
@-ms-keyframes left_hand {
from {
}
10% {
-ms-transform: rotate(-50deg);
left: 243px;
top: 270px;
}
15% {
-ms-transform: rotate(-20deg);
left: 240px;
top: 274px;
}
to {
-ms-transform: rotate(0deg);
left: 237px;
top: 277px;
}
}
/* Opera用(古いバージョン用に) */
@-o-keyframes left_hand {
from {
}
10% {
-o-transform: rotate(-50deg);
left: 243px;
top: 270px;
}
15% {
-o-transform: rotate(-20deg);
left: 240px;
top: 274px;
}
to {
-o-transform: rotate(0deg);
left: 237px;
top: 277px;
}
}
/* 適応ブラウザ用 */
@keyframes left_hand {
from {
}
10% {
transform: rotate(-50deg);
left: 243px;
top: 270px;
}
15% {
transform: rotate(-20deg);
left: 240px;
top: 274px;
}
to {
transform: rotate(0deg);
left: 237px;
top: 277px;
}
}
/* 手裏剣 */
.syuriken {
background-image: url("syuriken_1.png");
background-repeat: no-repeat;
height: 50px;
left: 231px;
position: absolute;
top: 300px;
width: 50px;
z-index: 3;
/* 角度 */
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
/* アニメーションの時間 */
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
-ms-animation-duration: 3s;
-o-animation-duration: 3s;
animation-duration: 3s;
/* キーフレーム指定 */
-webkit-animation-name: syuriken;
-moz-animation-name: syuriken;
-ms-animation-name: syuriken;
-o-animation-name: syuriken;
animation-name: syuriken;
/* アニメーションを繰り返す */
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/* Chrome Safari用 */
@-webkit-keyframes syuriken {
from {
}
10% {
-webkit-transform: rotate(-50deg);
left: 247px;
top: 283px;
}
to {
-webkit-transform: rotate(1000deg);
left: 1500px;
top: 0px;
}
}
/* Firefox用 */
@-moz-keyframes syuriken {
from {
}
10% {
-moz-transform: rotate(-50deg);
left: 247px;
top: 283px;
}
to {
-moz-transform: rotate(1000deg);
left: 1500px;
top: 0px;
}
}
/* IE用だけど意味なし 一応記述 */
@-ms-keyframes syuriken {
from {
}
10% {
-ms-transform: rotate(-50deg);
left: 247px;
top: 283px;
}
to {
-ms-transform: rotate(1000deg);
left: 1500px;
top: 0px;
}
}
/* Opera用(古いバージョン用に) */
@-o-keyframes syuriken {
from {
}
10% {
-o-transform: rotate(-50deg);
left: 247px;
top: 283px;
}
to {
-o-transform: rotate(1000deg);
left: 1500px;
top: 0px;
}
}
/* 適応ブラウザ用 */
@keyframes syuriken {
from {
}
10% {
transform: rotate(-50deg);
left: 247px;
top: 283px;
}
to {
transform: rotate(1000deg);
left: 1500px;
top: 0px;
}
}
忍者セット無料配布
今回作成した忍者の服(顔なし)と手裏剣を無料配布したいと思います。
画面越しに「いらねー」って声が聞こえてきますが、配布します。えぇ、自己満ですよ自己満。こんなにがんばって作ったのに、この記事で使ってお蔵入りするのは忍びないですからね。(これ言いたかっただけ)
忍者セットの中身
- 忍者の服 (拡張子.idrawとpng)
- 手裏剣 (拡張子.idrawとpng)
- 実際に動いているサンプルページ
これでキミも手裏剣を投げる忍者に♪
まとめ
実はCSSアニメーションを初めて触ったんですが、コレ面白いっすね。JSでアニメーションを作る方がもちろん細かい挙動が出来るんですが、単純なアニメーションならCSSでやってみてもいいと感じました。
まぁ、IEがって話になるんですがね。。
みなさんもCSSのアニメーションで遊んでみては?
可愛らしいアニメーションや簡単なゲームを作って楽しみましょう!
