40代高卒者が製造業からIT転職する【アニメーション2】

こんにちは、フローです。

今回は、春をイメージして、

桜の花びらが画面の上から降って来るアニメーションを、

jQueryを使用した作り方を書いていきたいと思います。

1 さくらの花びらアニメーション
2 まとめ
- 2.1 関連

さくらの花びらアニメーション

jQueryを使って桜の花びらが画面の上から降ってくるアニメーションを実現することができます。

以下に例を示します。

HTML

<!DOCTYPE html>
<html>
<head>
  <title>花びらのアニメーション</title>
</head>
<body>
  <div id="sakura"></div>
  <h1>ようこそ！</h1>
  <p>花びらのアニメーションを楽しんでください。</p>
</body>
</html>

CSS

#sakura {
  position: fixed;
  top: -50px;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image: url('sakura.png');
  background-repeat: no-repeat;
  z-index: 9999;
}

JavaScript

$(document).ready(function() {
  // 花びらの数
  var numPetals = 30;

  // アニメーション時間（ミリ秒）
  var animationTime = 8000;

  // アニメーション開始
  for (var i = 0; i < numPetals; i++) {
    var delay = Math.random() * animationTime;
    animatePetal(delay);
  }

  // 花びらをアニメーションする関数
  function animatePetal(delay) {
    var startTop = -50;
    var endTop = $(window).height() + 50;
    var startLeft = Math.random() * $(window).width();
    var endLeft = startLeft - 100 + Math.random() * 200;
    var rotation = Math.random() * 360;
    var speed = Math.random() * 4000 + 2000;

    var petal = $("<div>").addClass("petal").appendTo("#sakura");
    petal.css({
      top: startTop,
      left: startLeft,
      transform: "rotate(" + rotation + "deg)"
    });

    petal.delay(delay).animate({
      top: endTop,
      left: endLeft,
      opacity: 0
    }, speed, function() {
      $(this).remove();
    });
  }
});

この例では、

HTMLの div タグに、id=”sakura” を指定しています。

また、CSSでは、

position: fixed を指定して要素を固定し、top: -50px を指定して画面の上部に配置しています。

background-image プロパティには、桜の花びらの画像を指定しています。

JavaScriptでは、花びらの数を表す

numPetals と、アニメーション時間を表す animationTime を指定しています。

animatePetal() 関数を使用して、花びらをアニメーションします。

花びらはランダムな位置からスタートし、

下に落ちるようにアニメーションされます。

アニメーションの速度や回転角度もランダムに設定されます。

このように、jQueryを使用して複雑なアニメーションを実現することができます。