RAFFLE DRUM ANIMATION

A SIMPLE JQUERY PLUGIN FOR RAFFLE DRUM ANIMATION.

DEMOS



FEATURES

  • Works Great on any Device (Desktop, Tablet, Mobile).
  • Ready to use with assets included.
  • Easy to replace your own assets.
  • Adjustable position, speed, transition for each drum or item.
  • Callback events with status, and easy to show your own result.
  • All options, methods and events are documented.

HOW TO USE

Step 1: Link required files
                            
    <!-- raffle.css -->
    <link rel="stylesheet" href="raffledrumanimation/css/raffle.css">
    
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    
    <!-- raffle.js -->
    <script src="raffledrumanimation/js/raffle.js"></script>
Step 2: HTML markup
                            
   <div id="firstDrumHolder" class="drumHolder fitImg">
        <img src="raffledrumanimation/assets/stand.svg"/>
        
        <!-- RAFFLE HOLDER-->
        <div class="raffleHolder">
            <img src="raffledrumanimation/assets/glass.svg"/>
            
            <!-- TICKET RESULT-->
            <div class="ticketResult"></div>
            
            <div class="drumMask">
            	<!-- DRUM ITEMS-->
                <div class="itemsWrapper"></div>
                
                <!-- DRUM TOP-->
                <div class="drumGlassHolder">
                    <img src="raffledrumanimation/assets/glass.svg"/>
                </div>
                
                <!-- DRUM SIDE-->
                <div class="drumSideHolder">
                    <div class="side"><img src="raffledrumanimation/assets/side.svg"/></div>
                    <div class="side"><img src="raffledrumanimation/assets/side.svg"/></div>
                    <div class="side"><img src="raffledrumanimation/assets/side.svg"/></div>
                    <div class="side"><img src="raffledrumanimation/assets/side.svg"/></div>
                </div>
            </div>
        </div>
    </div>
Step 3: Call the JS
                            
   $(function() {
   		$('#firstDrumHolder').raffleDrumAnimation(
			{
				itemImage:[
                    'raffledrumanimation/assets/ball_b_1.svg',
                    'raffledrumanimation/assets/ball_b_2.svg',
                    'raffledrumanimation/assets/ball_b_3.svg',
                    'raffledrumanimation/assets/ball_b_4.svg',
                    'raffledrumanimation/assets/ball_b_5.svg'
                ],
                itemRow:7,
				itemColumn:5,
			}
		);
   });

RAFFLE DRUM ANIMATION

A SIMPLE JQUERY PLUGIN FOR RAFFLE DRUM ANIMATION.
MAKE BY demonisblack