JavaScriptを使ったアニメーション方法は色々ありますが。今回アニメーションライブラリTweenMaxを使ってタグ要素を移動するをご紹介します。
Contents
ディスプレイ広告
アニメーション移動するタグ要素のCSS記述
※アニメーション移動するタグ要素#pos、#to、#frm、#frmtoを用意します。必要に応じて変更して下さい。
<style type="text/css"> body{ font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"MS Pゴシック",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>
JavaScriptアニメーションライブラリTweenMaxを使ったデモページ
JavaScriptアニメーションライブラリTweenMaxを使ったデモ
※流用される場合は自己責任でお願いします。
デモページ