Frogtion

Frogtion is a library for creating animations based on web cursor event handling. It is built with VanillaJS. It can be used in the browser.

🏠 Home Page

https://ox18.github.io/Frogtion/

🔥 Preview

📖 Index

N	Section Page
1	⚙ Installation
2	🤔 How to use it?
3	🥳 Some examples
4	🖌 How to customize styles?
5	🚘 Frogtity
6	🐸 Frogtion

⚙ Installation

Basic

Add script in <head>:

  <script type="text/javascript" src="https://cdn.deno.land/frogtion/versions/1.0.3/raw/frogtion.js"></script>

  <script type="text/javascript" src="https://cdn.deno.land/frogtion/versions/1.0.3/raw/frogtion.min.js"></script>

🤔 How to use it?

1. Initialize Frogtity

const buttonFrogtity = Frogtity
    // Initializes the class
    .init()
    // Set the number of rows the image has
    .setRows(3) 
    // Set the number of columns the image ha
    .setColumns(20) 
    // Set the number of frames it contains
    .setTotalCount(54) 
    // Set the label of the element to be applied
    .addElement('#button-change-mobile') 
    // Set the width of each frame
    .setWidthPerFrame(920 / 20) 
    // Set the height for each frame
    .setHeightPerFrame(126 / 3);

2. Initialize Frogtion

const frogtion = Frogtion
    // Initializes the class
    .init()
    // Set the frogtity we created previously
    .setFrogtity(buttonFrogtity)
    // Set the NORMAL animation (When the cursor does not perform any event, 
    // this animation would be the default).
    .addFrameNormal({ startFrame: 0, endFrame: 0 })
    // Set the animation when hovering over the element
    .addFrameHover({ startFrame: 0, endFrame: 19 })
    // Set the animation when the element is clicked on
    .addFrameClicked({ startFrame: 20, endFrame: 52, loop: false, endLoopChangeTo: CONSTS.STATUS_FRAME.HOVER })
    // Set the animation when the element is deactivated
    .addFrameDisabled({ startFrame: 53, endFrame: 53 })
    // Run the animation
    .run();

3. Set the style and image to be used

#button-change-mobile{
    background-image: url(https://github.com/Ox18/Frogtion/blob/master/images/ChangeMobile.png);
    width: 46px;
    height: 42px;
    background-position: -0px -0px;
}