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

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

アニメーション効果

animate()メソッド

  • 独自のアニメーションを設定できる
  • 任意のCSSプロパティの値を徐々に変化させて独自のアニメーション効果を作成できる命令
  • animate()に設定できるCSSプロパティは、height、top、opacityのように数値であらわせるもに限ります
  • 動きには「linear」「swing」を設定できます
  • linear は、常に一定の速度で、swingは、最初ゆっくり・後半は速い速度で変化をつけながら値を変更します
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="http://code.jquery.com/jquery-1.11.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="http://code.jquery.com/jquery-1.11.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="http://code.jquery.com/jquery-1.11.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>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQuery sample</title>
<link rel="stylesheet" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id="box1" class="box">animate</div>
<div id="box2" class="box">animate</div>
<script>
$(function(){
  $('#box1').animate({ top: 200, left: 800 }, 1000, function() {
    alert( 'アニメーション完了' );
  });
  $('#box2').animate({ marginLeft: 800 }, 1000);
});
</script>
</body>
</html>
.box{
  width: 200px;
  height: 200px;
	font-size:2em;
  color: #FFF;
  text-align: center;
  line-height: 200px;
}
#box1{
	background: #4DB7B2;
	position: absolute;
	top: 0;
	left: 0;
}
#box2 {
	background: #E29F1B;
  position: absolute;
	top: 220;
	left: 0;
}
アニメーションのイージング
  • 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="http://code.jquery.com/jquery-1.11.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>