JavaScriptアニメーションライブラリTweenMaxを使ってタグ要素を移動する方法｜DAD UNION

JavaScriptを使ったアニメーション方法は色々ありますが。今回アニメーションライブラリTweenMaxを使ってタグ要素を移動するをご紹介します。

Contents

アニメーション移動するタグ要素のCSS記述
ボタンとアニメーションするタグ要素のHTML記述
TweenMaxを使ってアニメーション移動するJavaScript記述
JavaScriptアニメーションライブラリTweenMaxを使ったデモページ

アニメーション移動するタグ要素のCSS記述

※アニメーション移動するタグ要素#pos、#to、#frm、#frmtoを用意します。必要に応じて変更して下さい。

<style type="text/css">
body{
  font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  line-height: 1.8em;
  text-align: center;
}
h1{
  font-size:16px;
  text-align:center;
  font-weight:normal;
  padding:10px 0;
  position: relative;
}
.tmbtn{
    width: 200px;
    height: 80px;
    text-align: center;
    background-color: #333333;
    color:#ffffff;
    line-height: 80px;
    margin: 0 auto;
    cursor: pointer;
    font-weight: bold;
}
.wrap{
    width: 600px;
    margin: 40px auto 0 auto;
}
.box {
  width: 200px;
  height: 80px;
  margin: 20px;
  line-height: 80px;
  position: relative;
}
#pos{
    background: #007FFF;
}
#to{
    background: #7FFF00;
}
#frm{
    background: #FFFF26;
}
#frmto{
    background: #D24DFF;
}
</style>

ボタンとアニメーションするタグ要素のHTML記述

※アニメーション移動するタグid=”pos”、id=”to”、id=”frm”、id=”frmto”を用意します。必要に応じて変更して下さい。

<h1>以下のボタンをクリックするとTweenMaxを使ったJavaScriptアニメーションでタグ要素が移動します</h1>

<div class="tmbtn">クリック</div>

<div class="wrap">
    <div id="pos" class="box">TweenMax.set</div>
    <div id="to" class="box">TweenMax.to</div>
    <div id="frm" class="box">TweenMax.from</div>
    <div id="frmto" class="box">TweenMax.fromTo</div>
</div>

TweenMaxを使ってアニメーション移動するJavaScript記述

※jquery-2.2.0.min.js、TweenMax.min.jsファイルを読み込みます。.tmbtnタグ要素をクリックするとオブジェクト操作TweenMax.set、TweenMax.to、TweenMax.from、TweenMax.fromToの4パターンを使って、#pos、#to、#frm、#frmtoタグ要素をアニメーション移動する記述です。

<script src="./jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script type="text/javascript">
$(".tmbtn").click(function(){
    TweenMax.set('#pos',{left: 200});
    TweenMax.to('#to', 0.5, {left: 200});
    TweenMax.from('#frm', 0.5, {left: 200});
    TweenMax.fromTo('#frmto', 0.5, {left: 400}, {left: 200});
});
</script>