2024-08-06 16:39:50 +07:00
|
|
|
# MightyPoint
|
|
|
|
|
2024-08-07 12:53:37 +07:00
|
|
|
MightyPoint is an animation library that can be use in your web presentation.
|
2024-08-06 16:39:50 +07:00
|
|
|
|
|
|
|
## License
|
|
|
|
|
|
|
|
MightyPoint
|
|
|
|
|
|
|
|
Copyright (C) 2024 Dita Aji Pratama
|
|
|
|
|
|
|
|
This program is free software: you can redistribute it and/or modify
|
|
|
|
it under the terms of the GNU General Public License as published by
|
|
|
|
the Free Software Foundation, either version 3 of the License, or
|
|
|
|
(at your option) any later version.
|
|
|
|
|
|
|
|
This program is distributed in the hope that it will be useful,
|
|
|
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
|
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
|
|
GNU General Public License for more details.
|
|
|
|
|
|
|
|
You should have received a copy of the GNU General Public License
|
|
|
|
along with this program. If not, see https://www.gnu.org/licenses/.
|
2024-08-07 12:53:37 +07:00
|
|
|
|
|
|
|
## Getting Started
|
|
|
|
|
|
|
|
Usage:
|
|
|
|
|
|
|
|
```html
|
|
|
|
<p class="ANIMATION-TRANSITION">Hello world</p>
|
|
|
|
<!-- or -->
|
|
|
|
<p class="ANIMATION-TRANSITION-DIRECTION">Hello world</p>
|
|
|
|
```
|
|
|
|
|
|
|
|
Example:
|
|
|
|
|
|
|
|
```html
|
|
|
|
<p class="zoom-in">Hello world</p>
|
|
|
|
<!-- or -->
|
|
|
|
<p class="fade-in-left">Hello world</p>
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
## Animations
|
|
|
|
|
|
|
|
Here's a breakdown of the animations listed:
|
|
|
|
|
|
|
|
1. `hidden`
|
|
|
|
|
|
|
|
2. Fade In Animations:
|
|
|
|
- `fade-in`
|
|
|
|
- `fade-in-left`
|
|
|
|
- `fade-in-right`
|
|
|
|
- `fade-in-top`
|
|
|
|
- `fade-in-bottom`
|
|
|
|
|
|
|
|
3. Fade Out Animations:
|
|
|
|
- `fade-out`
|
|
|
|
- `fade-out-left`
|
|
|
|
- `fade-out-right`
|
|
|
|
- `fade-out-top`
|
|
|
|
- `fade-out-bottom`
|
|
|
|
|
|
|
|
4. Zoom Animations:
|
|
|
|
- `zoom-in`
|
|
|
|
- `zoom-out`
|
|
|
|
|
|
|
|
5. Fly In Animations:
|
|
|
|
- `fly-in-left`
|
|
|
|
- `fly-in-right`
|
|
|
|
- `fly-in-top`
|
|
|
|
- `fly-in-bottom`
|
|
|
|
|
|
|
|
6. Fly Out Animations:
|
|
|
|
- `fly-out-left`
|
|
|
|
- `fly-out-right`
|
|
|
|
- `fly-out-top`
|
|
|
|
- `fly-out-bottom`
|
|
|
|
|
|
|
|
7. Spin Animations:
|
|
|
|
- `spin-in-clockwise`
|
|
|
|
- `spin-in-counterclockwise`
|
|
|
|
- `spin-out-clockwise`
|
|
|
|
- `spin-out-counterclockwise`
|
|
|
|
|
|
|
|
8. `typing`
|
|
|
|
|
|
|
|
In total, we have 26 animations.
|