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.
https://ox18.github.io/Frogtion/
| N | Section Page |
|---|---|
| 1 | ⚙ Installation |
| 2 | 🤔 How to use it? |
| 3 | 🥳 Some examples |
| 4 | 🖌 How to customize styles? |
| 5 | 🚘 Frogtity |
| 6 | 🐸 Frogtion |
Add script in <head>:
<script type="text/javascript" src="https://cdn.deno.land/frogtion/versions/1.0.3/raw/frogtion.js"></script>or
<script type="text/javascript" src="https://cdn.deno.land/frogtion/versions/1.0.3/raw/frogtion.min.js"></script>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); 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();#button-change-mobile{
background-image: url(https://github.com/Ox18/Frogtion/blob/master/images/ChangeMobile.png);
width: 46px;
height: 42px;
background-position: -0px -0px;
}<div id="button-change-mobile"></div>The image I used for the example, is this one
All frames have the same sizes
You must edit the css class .frogtity-tooltip
🚨 It is important that you add in the value of your properties, at the end, the !import tag
You must edit the css class .frogtity-title
🚨 It is important that you add in the value of your properties, at the end, the !import tag
Frogtity is the class that represents the entity that only hosts properties.
| Property | Description |
|---|---|
| frames | ... |
| rows | ... |
| columns | ... |
| totalCount | ... |
| element | ... |
| widthPerFrame | ... |
| heightPerFrame | ... |
| tooltip | ... |
| title | ... |