ウェブサイトのファーストビューにアニメーションを付けたい

現在、私が作成しているウェブページの、ファーストビューに、
こちらの参考サイトのようにアニメーションを付けたいのですが、
JSが苦手ということもあり、どう手をつけていいものか、どういったプラグインを使えばいいのか
頭を悩ませております。

私のイメージとしましては、参考サイトとほぼ同じ動きを望んでいるのですが、

①画面１００％の中央にロゴ画像がふわっと表示される。
（参考サイトのように凝った表示の仕方でなくても構いません）

②画面が５０％、５０％に分かれて、右エリア内中央に要素（タイトル等）がふわっと表示される。

といったことができればと考えております。

どうかお力をお貸し頂けるようよろしくお願いいたします。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
</head>
<style>
	.hero{
		height: 100vh;
		position: relative;
		z-index: 2;
	}
	.left{
		width: 50%;
		height: 100vh;
		float: left;
		position: relative;
		background: pink;
	}
	.left img{
		width: 150px;
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		margin: auto;
	}
	.right{
		width: 50%;
		height: 100vh;
		float: right;
		position: relative;
		background: purple;
	}
	.right h1{
		color: #fff;
		font-size: 30px;
		width: 300px;
		height: 300px;
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		margin: auto;
	}
</style>
<body>
	<section class="hero">
		<div class="left">
			<img src="https://1.bp.blogspot.com/-KVROM-GFkdw/XhwqN4prZDI/AAAAAAABW88/uY8AfN2bOD85STIPfhoWcKMSS1EviWXugCNcBGAsYHQ/s350/darts_arrow3_green.png" width="100%" alt="">
		</div>
		<div class="right">
			<h1><p>タイトルタイトルタイトルタイトルタイトルタイトル</p></h1>
		</div>
	</section>
</body>
</html>

miyabi_pudding

2020/05/25 11:22 編集

今の質問の状態だと、キモとなるアニメーションが丸投げ作業依頼なので、回答得られないと思いますよ・・・。参考サイトは、canvasを使っているようなので、 canvas使わないとなると、余計に色々と技が必要になります。フワッと表示させたいだけなら、まずは、transition やtransform keyAnimationなどで調べてまず自分で作ってみるのに挑戦されるといいかと。（全部CSSです。CSSのアニメーションライブラリというのも、探せばけっこうあります）その上で、細かい部分で、どうしてもわからない、という質問にされた方がいいかと思いますよ。ちなみに、質問の動きの実現なら、おそらく動きまでJSでやる必要はないように思えます。（JSは、アニメーションのスタートとストップのタイミングのみの調整、とか）

yambejp

2020/05/25 11:28

とりあえず手書きで構わないので、動きをイメージできる画像を何枚か絵コンテのように例示してもらったほうがよいかも

WorkUE

2020/05/25 13:40

アドバイス、ありがとうございます。いつは未熟ながら、検索して調べて、なんとかウェブサイトを作っているのですが、今回の件は、制作イメージが全くつかめず、こちらに質問させていただくにも、丸投げになってしまっていることは重々承知していましたが、わらにもすがる思いといいますか汗。 yambejp様の助言通り、絵コンテを作成しました。またアドバイス等いただければ、幸いに思います。

miyabi_pudding

2020/05/26 07:07

CSS transitionや、transform、animationなどでは調べましたか？