読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

アニメーション効果

CSSを操作してアニメーションを作る

  • animate( )メソッド
  • 独自のアニメーションを設定できる
  • 任意のCSSプロパティの値を徐々に変化させて独自のアニメーション効果を作成できる命令
  • animate()に設定できるCSSプロパティは、height、top、opacityのように数値であらわせるもに限ります
  • 動きには「linear」「swing」を設定できます
  • linear は、常に一定の速度で、swingは、最初ゆっくり・後半は速い速度で変化をつけながら値を変更します



animate( { 'プロパティ' : '値' }, 'スピード' );

1つのCSSプロパティを指定する
  • プロパティ名は「キャメルケース」で記述する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>animate()メソッド</title>
<style>
.box {width: 300px; height: 300px; background-color: #9BE074;}
</style>
<script src="js/jquery-2.2.3.min.js"></script>
<script>
$(function(){
  //id="move_box"をマージンレフト600pxまで移動
  $("#move_box").animate({
    'marginLeft': '600px'
  });
});
</script>
</head>
<body>
<div id="move_box" class="box"></div>
</body>
</html>
複数CSSプロパティを同時に指定する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>animate()メソッド</title>
<style>
.box {width: 300px; height: 300px; background-color: #9BE074;}
</style>
<script src="js/jquery-2.2.3.min.js"></script>
<script>
$(function(){
  //id="move_box"をマージンレフト600pxまで移動と縦横減少
  $("#move_box").animate({
    "marginLeft" : "600px",
    "width" : "30px",
    "height" : "30px"
  });
});
</script>
</head>
<body>
<div id="move_box" class="box"></div>
</body>
</html>
アニメーションの時間指定
  • アニメーションの秒数指定
  • duration:何秒かけてアニメーションする
  • 1秒が「1000」
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>animate()メソッド</title>
<style>
.box {width: 300px; height: 300px; background-color: #9BE074;}
</style>
<script src="js/jquery-2.2.3.min.js"></script>
<script>
$(function(){
  //id="move_box"をマージンレフト600pxまで移動と縦横減少
  $("#move_box").animate(
    {
    //CSSプロパティ指定
    "marginLeft" : "600px",
    "width" : "30px",
    "height" : "30px"
    },  //「}」のあとに「,」(カンマ)を忘れずに入れる
    {
    //何秒かけてアニメーションさせるかを指定する
    duration: 6000
    }
  );
});
</script>
</head>
<body>
<div id="move_box" class="box"></div>
</body>
</html>
アニメーションのイージング
  • linear(リニア):等速移動
  • swing(スウィング):急加速した後、徐々に減速して停止
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>animate()メソッド</title>
<style>
.box1, .box2 {height: 50px; width: 50px;}
.box1 {background-color: #F90;}
.box2 {background-color: #93CFE7;}
</style>
<script src="js/jquery-2.2.3.min.js"></script>
<script>
$(function(){
$("#move_box_top").animate(
  {
    "marginLeft" : "1000px"
  },
  {
    duration: 1500,  //最後に「,」(カンマ)を忘れずに入れる
    easing: "swing"  //徐々に加速したのち減速して停止
  }
);

$("#move_box_bottom").animate(
  {
    "marginLeft" : "1000px"
  },
  {
    duration: 1500,  //最後に「,」(カンマ)を忘れずに入れる
    easing: "linear"  //通常移動(加減速の変化なし)
  }
);
});
</script>
</head>
<body>
<div id="move_box_top" class="box1"></div>
<div id="move_box_bottom" class="box2"></div>
</body>
</html>