Built with the sole purpose of making life easier for beginner web developers.
- Table of Contents
- Technologies Used
- Resources/Links
- Introduction
- Usage Examples
- Interactive Animations
- Development
- Contributing
- Sponsors
- License
- HTML
- CSS
- JavaScript
- Python (Django)
- MySQL
- Animax Web Application
- Figma
- Database Schema
- First Presentation
- Second Presentation
- Meetings' Minutes
- List of Accomplished Tasks
Animax is a simple animation library that allows users to perform basic web animation using little to no code.
Velit sapien, venenatis arcu ut quam. Risus pellentesque mauris, etiam at vitae nibh. Vulputate vulputate consequat venenatis eleifend eu sagittis ut pretium non.
Go through the DOCUMENTATION.md for the full animax library documentation.
-
Normal language: The name of the animations are very close to normal human language, and user do not need to write any code at all.
-
Easy-to-use: Just apply the ID (i.e. the CSS selector) of the animation you want.
-
Light and user-friendly: The library was built using plain CSS, and no use of external libraries.
At this time, the library has the following animations:
- Alternate colors
- Blink
- Bounce
- Fade
- Move
- Pulse
- Rotate
- Stretch
-
Download the library.
-
Extract the zipped file.
-
Import the library into your project using the
linktag.<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="animax.css"> <title>Home</title> </head> <body> ........ <script src="animax.js"></script> </body> </html>
-
Add the animation ID, which is
bounce-1x"in this instance, to the HTML element you would like to animate.<body> ........ <div id="bounce-1x"></div> ........ </body>
-
Voila, the element is automatically animated.
JavaScript Web Animations API is used to create the experience for users to generate their preferred code combinations. This feature is made for users that want more granularity and control over their animations. This solution is implemented with plain JavaScript (no external libraries) so as to provide the best performance and a good starting point for developers to learn about creating interactive animation.
- Minimum Requirement: Understand the basics of JS and programming in general. Knowledge of JS WAAPI is not required.
- Reasons: No need to rely on DOM-heavy manipulation techniques.
See DEVELOP.md for development docs.
| Designers | Developers |
|---|---|
| Tobechukwu Eloke | Charles Precious |
| Tomi Etta | Mustapha Balogun |
| Zainab Bodude | Aroso Emmanuel Adedeji |
| Khadijat Bakare | Oguagu Ekenechukwu Daniel |
| Coker Adebusola | David Alatishe |
| Victor Roosevelt | Oluji Onyekachukwu |
| Fatoye Ruth | |
| Aminu Musa Ambursa | |
| Olamilekan Phillip | |
| Joshua Opeyemi Adebisi | |
| Salau Shukurat |
Animax project would neither have been realized nor be the success that it is today without our sponsors' kind support. These organizations currently support animax:
MIT license ©2022