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 | ... |