[javascript] slideup 효과로 상단배너 숨기기

[javascript] slideup 효과로 상단배너 숨기기

 홈페이지, 또는 랜딩페이지의 팝업, 배너 외에 맨 위의 상단배너가 눈에 띄일 때가 있습니다. 

클릭하면 배너가 위로 올라가 사라지는 듯한 효과가 구현되는데요, 

(가까운 예로 쿠팡 홈페이지가 있습니다. https://www.coupang.com/)

오늘은 제이쿼리 메소드인 slideup으로 위 상단 배너가 사라지는 효과를 만들어보려 합니다.

 예제가 무척 간단합니다.

 먼저, </head> 안에 제이쿼리 스크립트를 준비해주세요.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

다음은 <style> 안에 아래 코드를 넣어주세요.

  html, body {margin:0px;padding:0px;}
  #bg1 {width:100%; height:85px; background-color:#003e76;}
  #bg2 {width:100%; height:800px; background-color:#3C87CA;}

마지막으로 아래 코드를 넣어주면 완성됩니다.

	<a href="#" onclick="$('#bg1').slideUp(400);">
		<div id="bg1"></div>
	</a>
	<div id="bg2"></div>

 위 예제를 완성하면 상단을 누를때 상단이 사라지는 효과를 볼 수 있습니다.

참고로 slideup안에 들어가는 숫자는 효과가 진행되는 시간을 설정하는 것인데요.

예를 들어 slideUp(400)은 0.4초, slideUp(4000)은 4초동안 효과가 적용되는 거로 생각하시면 되겠습니다.