HOW TO USE
Step 1: Link required files
<!-- wheelspin.css -->
<link rel="stylesheet" href="wheelspinanimation/css/wheelspin.css">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- jQuery UI -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.jss"></script>
<!-- wheelspin.js -->
<script src="wheelspinanimation/js/wheelspin.js"></script>
Step 2: HTML markup
<div id="wheelSpinHolder" class="wheelSpinHolder fitImg">
<div class="wheelSpinList"></div>
<div class="wheelSpinBorder"></div>
<div class="wheelSpinHighlightBackground"></div>
<div class="wheelSpinHighlight"></div>
<div class="wheelSpinSelect">
<img src="wheelspinanimation/assets/arrow.svg" />
</div>
</div>
Step 3: Call the JS
$(function() {
$('#wheelSpinHolder').wheelSpinAnimation({
width: 500,
height: 250,
prizes: [{
background: 'assets/bg_blue_pattern.svg',
winbackground: 'assets/bg_win_blue.gif',
value: '10,000',
fontSize: 80,
lineHeight: 80
},
{
background: 'assets/bg_orange.svg',
winbackground: 'assets/bg_win_orange.gif',
value: '100',
fontSize: 80,
lineHeight: 80
},
{
background: 'assets/bg_red_pattern.svg',
winbackground: 'assets/bg_win_red.gif',
value: '100,000',
fontSize: 80,
lineHeight: 80
},
{
background: 'assets/bg_blue.svg',
value: 'BETTER LUCK<br/>NEXT TIME',
fontSize: 50,
lineHeight: 50
},
{
background: 'assets/bg_orange_pattern.svg',
winbackground: 'assets/bg_win_orange.gif',
value: '10',
fontSize: 80,
lineHeight: 80
},
{
background: 'assets/bg_orange_pattern.svg',
winbackground: 'assets/bg_win_orange.gif',
value:'<img src="assets/prize_bike.svg" />'
},
{
background: 'assets/bg_blue_pattern.svg',
winbackground: 'assets/bg_win_blue.gif',
value:'<img src="assets/prize_laptop.svg" />'
}
]
});
});
