DEMOS

Fullscreen

---

FEATURES

• Works Great on any Device (Desktop, Tablet, Mobile).
• Ready to use with assets included.
• Easy to replace your own assets.
• Adjustable swim speed and pattern.
• Feed and swim away interaction.
• All options, methods and events are documented.

---

HOW TO USE

Step 1: Link required files

                            
    <!-- koi-animation.css -->
    <link rel="stylesheet" href="css/koi-animation.css">
    
    <!-- koi-sprite-animation.css -->
    <link rel="stylesheet" href="css/fish1-animation.css">
    <link rel="stylesheet" href="css/fish2-animation.css">
    <link rel="stylesheet" href="css/fish3-animation.css">
    <link rel="stylesheet" href="css/fish4-animation.css">
    <link rel="stylesheet" href="css/fish5-animation.css">
    <link rel="stylesheet" href="css/silhouette-animation.css">

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    
    <!-- koi-animation.js -->
    <script src="js/koi-animation.js"></script>
                            
                        

Step 2: HTML markup

                            
    <div id="fishesHolder" class="fishesHolder pondColour1"></div>
                            
                        

Step 3: Call the JS

                            
    $(document).ready(function(){
        $('#fishesHolder').koiAnimation(
            {
                class:[
                        'fish1-fish',
                        'fish2-fish',
                        'fish3-fish',
                        'fish4-fish',
                        'fish5-fish'
                        ]
            }
        );
    });