, , 2014年4月4日

今回もCSSで作ったアニメーションを紹介します。今回作成したのは「紙吹雪」です。くす玉を割ると降ってくるアイツです。

javascriptと組み合わせて、常に上から紙吹雪が降るようにしてみました。

紙吹雪

デモンストレーションとソースコードは、以下のサイトからどうぞ。

デモンストレーションとソースコード

表示がおかしい時は、一度再読み込みして下さい。

解説

紙吹雪っぽいゆらゆらとした動きは、以下のアニメーションで表現しています。

@keyframes fall {
  from {
    transform: translateX(0) translateY(0) skew(30deg);
  }
  12.5% {
    transform: translateX(-50px) translateY(75px) skew(0deg);
  }
  37.5% {
    transform: translateX(50px) translateY(225px) skew(-30deg);
  }
  50% {
    transform: translateX(0) translateY(300px) skew(30deg);
  }
  62.5% {
    transform: translateX(-50px) translateY(375px) skew(0deg);
  }
  87.5% {
    transform: translateX(50px) translateY(525px) skew(-30deg);
  }
  to {
    transform: translateX(0) translateY(600px) skew(30deg);
  }
}

translateXで左右に移動させながら、translateYで常に下方向へ落としていき、skewを使って良い感じのタイミングで要素をぐにゃぐにゃ曲げています。

このアニメーションを、kamiというクラスに割り当てます。

html,
body {
  width: 960px;
  height: 500px;
  position: relative;
}
.kami {
  position: absolute;
  top: -50px;
  width: 30px;
  height: 30px;
  opacity: 0.8;
  -webkit-animation: fall 3s linear 0s 1 normal backwards;
  -moz-animation: fall 3s linear 0s 1 normal backwards;
  -ms-animation: fall 3s linear 0s 1 normal backwards;
  -o-animation: fall 3s linear 0s 1 normal backwards;
  animation: fall 3s linear 0s 1 normal backwards;
}

bodyにrelative、.kamiにabsoluteを指定することで、紙吹雪を画面内の好きな位置に生成することができます。あとはjavascriptで要素を生成するだけです。

// 定期的に紙吹雪を降らす
var create = function(){
    var kami = $("<div>")
                .addClass("kami")
                .css("left", rand(width))
                .css("background", color());
    $("body").append(kami);
    // 数秒後にその要素はHTML上から取り除く
    setTimeout(function(){
        kami.remove();
    }, 6000);
    setTimeout(create, 300);
}
setTimeout(create, 300);

jqueryを使ってkamiクラスのdiv要素を追加します。その際、leftにランダムな値を与えることで、画面上部の適当な位置から紙吹雪が出現するようになります。

放っておくとdiv要素が増え続けてしまうので、removeを使って一定時間後に削除するようにしておきます。これで紙吹雪の完成です!

まとめ

サイトのちょっとしたアクセントに使ってみるのも面白いかもですね。

今回のCSSはLESSから生成したので、LESSのコードを眺めたほうが雰囲気が掴みやすいかもしれません。落ちるスピードや紙吹雪の大きさを変えるなどして遊んでみて下さい。

CATEGORIES