Gashapon Machine ANIMATION

A SIMPLE JQUERY PLUGIN FOR Gashapon Machine ANIMATION.

DEMOS

*Click the handle button to get free toy.



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 twist animation and prize.
  • 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
                            
    <!-- gashapon.css -->
    <link rel="stylesheet" href="gashaponmachine/css/gashapon.css">
    
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    
    <!-- gashapon.js -->
    <script src="gashaponmachine/js/gashapon.js"></script>
Step 2: HTML markup
                            
    <div id="gashaponMachineHolder" class="gashaponHolder fitImg">
        <!-- MACHINE TOP-->
        <img src="assets/red_machine_top.svg"/>
        
        <!-- GLASS HOLDER-->
        <div class="prizesHolder">
            <img src="assets/red_glass_bg.svg"/>
            
            <div class="glassMask">
                <!-- PRIZE ITEMS-->
                <div class="itemsWrapper"></div>
                
                <!-- GLASS-->
                <div class="glassHolder">
                    <img src="assets/red_glass.svg"/>
                </div>
            </div>
        </div>
        
        <!-- MACHINE BOTTOM-->
        <div class="machineHolder">
            <img src="assets/red_machine_bottom.svg"/>

            <!-- TWIST BUTTON-->
            <div class="machineButton">
                <img src="assets/red_button.svg"/>
            </div>

            <!-- DROP AREA-->
            <div class="machineDrop">
                <img src="assets/drop.svg"/>

                <!-- DROP RESULT-->
                <div class="dropResult"></div>
            </div>

            <div class="finalResult"></div>
        </div>
    </div>
Step 3: Call the JS
                            
    $(function() {
        $('#gashaponMachineHolder').gashaponMachineAnimation({
            coverImage: [{
                    left: "assets/cover_transparent_a.svg",
                    right: "assets/cover_color_a_1.svg"
                },
                {
                    left: "assets/cover_transparent_a.svg",
                    right: "assets/cover_color_a_2.svg"
                },
                {
                    left: "assets/cover_transparent_a.svg",
                    right: "assets/cover_color_a_3.svg"
                },
                {
                    left: "assets/cover_transparent_a.svg",
                    right: "assets/cover_color_a_4.svg"
                },
                {
                    left: "assets/cover_transparent_a.svg",
                    right: "assets/cover_color_a_5.svg"
                },
            ],
            prizeImage: ['assets/fish_1.svg',
                'assets/fish_2.svg',
                'assets/fish_3.svg',
                'assets/fish_4.svg',
                'assets/fish_5.svg'
            ]
        });
    });

Gashapon Machine ANIMATION

A SIMPLE JQUERY PLUGIN FOR Gashapon Machine ANIMATION.
MAKE BY demonisblack