원하는 위치에서 이미지 나타나게 만들기

원하는 위치에서 이미지를 나타나게 만들기 입니다.

 

$(window).scrollTop()의 높이가 원하는 값이 되면 addClass()을 이용하여 나타나게 한다.

 

$(function(){
	//페이지문서 로드 완료 후 바로 실행; 
	$("#wrap1>.img").addClass("action");

	//scroll할때 scroll함수 실행;
	$(window).on("scroll",scroll);

	function scroll(){
		//스크롤한 높이 값
		scrollTop = $(window).scrollTop();
		console.log(scrollTop);

		//스크롤한 높이 값이 600보다 클때 addClass실행 
		if (scrollTop >= 600){
			$("#wrap2 > .img").addClass("action");
		}	
	}

});

 

<div id="wrap1" class="wrap">
	<div class="img">
		<img src="https://via.placeholder.com/500x500" alt="이미지">
	</div>
</div>
	
<div id="wrap2" class="wrap">
	<div class="img">
		<img src="https://via.placeholder.com/500x500" alt="이미지">
	</div>
</div>

 

* { margin:0; padding:0; }
.wrap { position:relative; width:100%; height:100vh; overflow:hidden; }
#wrap1 { background-color: red; }
#wrap2 { background-color: orange; }

.img { position:absolute; width:500px; height:500px;  transition:1s all;  left:50%; top:50%; }

/*안보이게 숨겨 놓기*/
#wrap1 .img { left:-300%; }
#wrap2 .img { left:300%; }
	
/*addClass 했을 때의 위치 */
#wrap1 >.img.action { left:50%; top:50%; transform:translate(-50%,-50%);}
#wrap2 >.img.action { left:50%; top:50%; transform:translate(-50%,-50%);}

 

$(window).height(); : 현재 페이지 높이 확인

$(window).scrollTop(); : 현재 스크롤 한 높이 값 

addClass() : CSS 추가 

 

 

---

개인 공부용으로 만들었습니다.
다른 분들에게도 도움이 되었으면 좋겠습니다.
틀린 부분이 있으면 댓글을 남겨주시면 수정하겠습니다.