WEBでアニメーションを作るのに今一番いいのは何でしょうか？

WEBサイトのトップページに、ちょっとしたアニメーションをつけて欲しい案件があるのですが、、

WEBアニメーションAPIや、anime.jsや、Adobe animeCCとか、ちょっと複雑そうな感じでgreensock.comとか、、、
他にもいろいろ色々ありすぎて、、どれを選んで習得すればいいのかわかりません！！

出来れば、adobeじゃないほうが毎月課金されないので助かります！！

すみません！肝心な何がやりたいかといいますと、、

背景に山や町や牧場のイラストをところどころに置いて、トラックが走り、牧場で牛を乗せて、走り去ったり、
他のトラックは、反対側から来て肥料や餌の袋を牧場に配達して置いてゆくみたいなのをやりたいのです。

移動は、基本的には横方向だけで構いません。

y軸方向は特に動かさなくてもいいのです。。

荷台が空のトラックが、画面左端から出てきて⇒画面途中の牧場の前で一旦止まり⇒牛を乗せて、牛が乗ったら⇒画面右端から見えなくなるまで走り去る⇒右端から走り去ってから数秒後に、また左端から荷台が空のトラックが出てきて⇒あとは同じことの繰り返しループです。

コードを入れます。おかしなところだらけだと思います。
nimotu（荷物）の部分は牛になります。ただ、まだ、途中で挫折していたので、中途半端です。。

というか、anime.js使う必要もないんですね。。

<html>
<head>
<meta charset="utf-8">
<title>テスト</title>
<script src="js/anime.min.js"></script>
</head>

<body>

<style>
.link{
padding:5px;
text-decoration:none;
}
#animeWAKU{
	position:relative;
}
#target{
  position:absolute;
  width:100px;
  margin:10px 0;
  display: flex;
  z-index:2;
  top:65px;

}
#nimotu{
  position:absolute;
  width:100px;
  margin:10px 0;
  display: flex;
  z-index:1;
  top:65px;

}
.yama01{
	position:absolute;
	left:0;
	z-index:99999;
	height:150px;
}
.yama02{
	position:absolute;
	right:0;
	z-index:99999;
	height:150px;	
}
#main{
	width:1000px;
	margin: 0 auto;
    padding-top: 200px
}
</style>



<div id="animeWAKU">
<img src="img/yama01.png" class="yama01">
<div id="target"><img src="img/track.png"></div>
<div id="nimotu"><img src="img/nimotu.png"></div>
<img src="img/yama02.png" class="yama02">
</div>


<div id="main">
<!-- ここアニメの下のWEBページの内容を入れる  -->
</div>


<script>
anime({
    targets: '#target',
    loop: true,
	
    translateX: [
    { value: 350, duration: 1000, delay: 300, elasticity: 0, duration: 2500, easing: 'easeInOutQuad'},
    { value: 1500, duration: 1000, delay: 800, elasticity: 0, duration: 5500, easing: 'easeInOutQuad' },
    ],
 });
 
anime({	
　　targets: '#nimotu',
    loop: true,
　　width: '100%',
	
    translateX: [
    {  value: 350, duration: 1000, delay: 300, elasticity: 0, duration: 2500, easing: 'easeInOutQuad'},
    { value: 1500, duration: 1000, delay: 800, elasticity: 0, duration: 5500, easing: 'easeInOutQuad' },
    ],	
  });

</script>

</body>
</html>

Res

2019/11/14 13:15

タグにsvgとありますがsvgはどう関係があるのでしょうか。

Res

2019/11/14 13:17

これをsvgで...? サンプルの画像などありますか...？想像しにくいです。

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

関連した質問