[JavaScript / jQuery] 룰렛 이벤트 구현

미리보기

JavaScript

<script type="text/javascript" src="jquery.easing.js"></script>
	<script type="text/javascript">
	function startRoulet(){
		$(".roulette_pan").stop().animate(
		{ rotate: "2880deg" },
		{
			duration: 2000,
			easing: 'easeOutQuart',
			step: function(now) {
				$(this).css({ transform: 'rotate(' + now + 'deg)' });
			},
			done: function(e){
				console.log(e);
				var and = e.props.rotate
				rouletteFinish(and);
			}
		},
		)
	}
	function rouletteFinish(and){
		alert(and);
	}
	$(".roulette_start").on("click", function(){
		startRoulet();
	})
</script>​

HTML

<div class="roulette_wrap">
	<img src="test.png" alt="룰렛 배경">
	<div class="roulette"> 
	<div class="roulette_pan"></div> 
	<span class="roulette_arrow"></span>
	<button type="button" class="roulette_start">start</button>
	</div>
</div>

 

JavaScript / JQuery 사용하여 룰렛이벤트 구현

 

예전 룰렛이벤트 페이지를 구현할 때

룰렛이 돌아가는 GIF 이미지를 on/off 시켜 구현하곤 했습니다.

작업하기 간단하지만 돌아가는 화면이 어색해 보이는 단점이 있습니다.

그래서 룰렛판을 돌려 위치값이 나오는 룰렛을 구현하였습니다.

 

jquery easing 라이브러리를 사용하였고

rotate 값을 변경하면 결과값이 달라집니다.

그럴싸하죠???

 

 

animate, easing, javascirpt, JQuery, rotate, 룰렛, 룰렛이벤트, 이벤트, gif, roulette, event, 룰렛 페이지