제이쿼리 CSS를 이용해서 Div요소를 상하좌우로 슬라이딩 애니메이션하기

이 글은 아주 오래된 글의 업그레이드 버전입니다. 아래의 글에서 제이쿼리와 CSS를 이용해 버튼을 클릭하면 좌우로 애니메이션 되는 기능을 설명했는데 제이쿼리에 사용된 toggle function이 1.8 버전에서 폐기예정 선언이 있으면서 1.9 버전에서 완전 폐기됐습니다. 따라서 최근 버전의 제이쿼리를 사용하면 작동하지 않습니다.

https://martian36.com/523

CSS가 발전하면서 CSS3의 애니메이션 기능을 이용하면 더욱 다양하고 간단하게 이용할 수 있습니다. 자바스크립트의 사용도를 줄이고 CSS의 사용도를 늘리는 추세이므로 적합하다고 할 수 있습니다.

button-animation.zip

예제는 위 파일에 있습니다. 상하좌우 4면에 버튼이 배치돼있습니다.

기능은 이전 버전과 똑같습니다. 좌측에 있는 버튼을 클릭하면 우측으로 애니메이션 되면서 버튼의 모양이 좌측으로 향하도록 바뀝니다. 설명은 다음과 같습니다.

<link rel="stylesheet" href="style.css">

<!-- <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> -->

<!-- <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>   -->

<script src="https://code.jquery.com/jquery-2.2.4.min.js""></script> 

여러 형태의 스타일시트를 사용하므로 별도의 스타일시트를 만들었습니다.

제이쿼리는 최근 버전으로 다양하게 테스트 했습니다. 하나를 활성화 하면 다른 것들은 비활성화 하세요.

<script type="text/javascript"> 
jQuery(document).ready(function($) {
	$("#button").click(function(){
		$("#effect").toggleClass("right");
	});
	$("#button2").click(function(){
		$("#effect2").toggleClass("down");
	});
	$("#button3").click(function(){
		$("#effect3").toggleClass("left");
	});	
	$("#button4").click(function(){
		$("#effect4").toggleClass("up");
	});
});	
</script> 

사용된 제이쿼리는 간단합니다. 버튼을 클릭했을 때 #effect div에 클래스를 추가해줍니다. 테스트를 위해 4가지 방향에 각각 다른 클래스를 추가했습니다. toggleClass 메소드를 사용하므로 버튼을 다시 클릭하면 추가된 클래스가 제거됩니다. 따라서 클래스의 추가여부에 따라 CSS를 변경해주면 됩니다.

	<div id="effect">
	  <div id="content">이글이 도움이 되셨다면 추천부탁드립니다.↑</div>
		<div id="button"></div>
	</div>
	<div id="effect2">
	  <div id="content2">이글이 도움이 되셨다면 추천부탁드립니다.↑</div>
		<div id="button2"></div>
	</div>
	<div id="effect3">
	  <div id="content3">이글이 도움이 되셨다면 추천부탁드립니다.↑</div>
		<div id="button3"></div>
	</div>	
	<div id="effect4">
	  <div id="content4">이글이 도움이 되셨다면 추천부탁드립니다.↑</div>
		<div id="button4"></div>
	</div>

4방향의 애니메이션을 위해 4개의 effect div이 있습니다.

#effect { 
	width: 500px; 
	height: 135px;  
	position: fixed;  
	left:-200px; 
	top:45%;
		transition:0.5s;
	-webkit-transition:0.5s;
	-moz-transition:0.5s;
}

이것은 좌우로 애니메이션되는 콘테이너입니다. 이 콘테이너 안에 설명 글자 콘테이너인 #content div이 있고 버튼 div이 있습니다. 포지션은 고정(fixed)이므로 스크롤에 따라 이동되지 않습니다. 좌측으로 #content 폭인 -200px만큼 이동해있으므로 보이지 않고 버튼만 보입니다. 애니메이션은 이 div에 right라는 클래스가 추가되면서 left:0;이 되며 부드러운 이동을 위해 0.5초 동안 transition 됩니다.

#effect.right { 
	left:0px; 
	transition:0.5s;
	-webkit-transition:0.5s;
	-moz-transition:0.5s;
}

#effect div에 right 클래스가 추가되면서 left가 0으로 됩니다.

#content { 
	width:200px; 
	float:left; 
	font-size: 28px;
	font-family: "Noto Sans KR";
}

#content div의 설정입니다. float:left가 되있어서 버튼과 좌우로 배치됩니다.

#button { 
	float:left; 
	position:relative; 
	width:40px; 
	height:30px; 
	background:url(button1.gif); 
	text-indent:-9999px; 
	cursor:pointer;
}

버튼도 float:left돼있어서 #content div과 좌우로 배치됩니다. 현재의 이미지는 button1.gif입니다.

.right #button { 
	background:url(button2.gif); 
}

버튼을 클릭하면 #effect div에 .right 클래스가 추가되면서 버튼의 이미지가 button2.gif로 변경됩니다.

다른 방향에 대해서도 스타일시트를 보시면 알 수있습니다. 다만 두 개의 이미지를 여러 곳에 사용하면서 방향이 다른데 이것은 CSS의 transform: rotate; 속성을 사용하면 해결됩니다.

transform: rotate(-90deg);

두 개의 이미지가 같은 모양이므로 button1과 button2의 각도를 바꿔주면 하나의 이미지를 사용할 수 있습니다.

제 블로그 로고 좌측의 햄버거 아이콘을 클릭하면 사이드바가 나오는데 이것도 같은 원리입니다. 다만 left에 -값을 사용하지 않고 transform 속성을 사용했습니다.

#effect { 
	width: 500px; 
	height: 135px;  
	position: fixed;  
	left:0; 
	top:45%;
		transition:0.5s;
	-webkit-transition:0.5s;
	-moz-transition:0.5s;
	transform: translate3d(-200px,0,0);
}
#effect.right { 
	left:0px; 
	transition:0.5s;
	-webkit-transition:0.5s;
	-moz-transition:0.5s;
	transform: translate3d(0px,0,0);
}

위처럼 수정하면 같은 결과를 얻을 수 있습니다.