jqueryとcssのpositionについて

Question

positionで5枚の画像を重ねています。
これを左右中央にしたのですが、下からフェードインするアニメーションを付けたいのですが、jqueryを使うとtransform: 'translate(0, 0)になるので中央にできません。
この場合、jqueryのコードを使うのは無理ってことですか、、？

<div class="top">
	
	<img class="top1" src="img/top1.png">
		<img class="top2 slide-bottom show" src="img/top2.png">
		<img class="top3 slide-bottom show" src="img/top3.png">
	<img class="top4 slide-bottom show" src="img/top4.png">
	<img class="top5 slide-bottom show" src="img/top5.png">
	</div>	

/*下からフェードイン*/
.slide-bottom {
	opacity: 0;
	transform: translate(0, 30px);
	transition: all 1s ease-out;
 }
.top{
	text-align: center;
}
img.top1{
	width: 100%;
	max-width: 700px;
	position:relative; 
}
.top img {
	width: 100%;
	max-width: 700px;
	position: absolute;

}

<script>
	$(function(){
		$(window).on('load scroll', function() {
			$(".show").each(function() {
				var winScroll = $(window).scrollTop();
				var winHeight = $(window).height();
				var scrollPos = winScroll + (winHeight * 0.9);
				if($(this).offset().top < scrollPos) {
					$(this).css({opacity: 1, transform: 'translate(0, 0)'});
				}else{
          $(this).css({opacity: 0, transform: ''});
        }
			});
		});
	});

 </script>

Comments

[Cocode]

これでいけてます？書いてるCSSがおかしかったので修正しました。
https://jsfiddle.net/vhda19k5/1

どう言う動きを想定されているのか分かりませんので、とりあえず5枚重なるようにはしました！

[ayuayuayu]

ありがとうございます。
５枚重なることはできるのですが、真ん中にできないんです、、、
アニメーションやjqueryで動きを付けるとズレてしまいます、、

Answer 1

上のcssだと右に寄ってしまったりと出来なかったのですが
これで思ってた形、動きになりました。
ありがとうございました。

img.top1{
	margin: 0 auto; /* 左右中央配置 */
    position: relative; /* 絶対配置の基準に */
	width: 100%;
	max-width: 700px; /* サイズは親に設定 */  
}
img.top2,img.top3,img.top4,img.top5{
	position:
	absolute;
	left: 0;
  right: 0;
  margin: auto;
	z-index: 10;
}

Answer 2

transform: translate(0, 0)というのは左右中央とは関係ないです。
translateは本来の位置からどれだけずらすかという設定ですので、本来の位置が左右中央になるように設定すればいいだけです。

5枚の画像は position: absolute; で重ねているので、その親要素(.top)を左右中央にして、それを基準にして5枚の画像は重ねて配置するという設定にすればいいでしょう。

ということでCSSを下記に設定すれば左右中央になります。

.slide-bottom {
	opacity: 0;
	transform: translate(0, 30px);
	transition: all 1s ease-out;
 }
.top {
	margin: 0 auto; /* 左右中央配置 */
  position: relative; /* 絶対配置の基準に */
	width: 100%;
	max-width: 700px; /* サイズは親に設定 */  
}
.top img {
  width: 100%; /* 親のサイズに合わせる */  
	position: absolute; /* 絶対配置 */
}

Comments

[ayuayuayu]

すいません。出来たと思ったのですが、画像全体が右に寄ってしまってずれてしまいます、、、