eKeiran / CSS-Inventory

Collection of CSS Animations!

CSS-Inventory

Collection of CSS Animations

This project was created for Hacktoberst at MIT-ADT, but anyone is welcome to participate! It showcases CSS animations inspired by ZTM's Animation Challenge.

RULES:

0. Fork the repository, clone your copy as demonstrated here, and make further changes in your locally cloned copy.
1. Create a folder named after yourself in the Cards directory.
2. Write your my_animation.html and my_animation.css files containing your animation, and link them using <style>. No <script> is allowed, just pure CSS. You can be as imaginative as you want with your animation. If you want to use images, videos, custom fonts etc in your .html and .css, make a folder for them in your directory to link them.
3. After completing the .html and .css files, screen record your animation, export it as a gif, and save it inside your folder as "your_name.gif". I recommend using OBS Studio to record and an online gif converter or Microsoft ClipChamp, which can easily export a screen-recorded video as a gif.
4. Great! You've made it halfway if you've done all this. Now, go to index.js, and in the cards array, add your element separated by a comma:

{
  artName: "name_your_animation",
  pageLink: "./Cards/your_name/my_animation.html",
  imageLink: "./Cards/your_name/your_gif_name.gif",
  author: "your_name",
  githubLink: 'https://github.com/your_username'
}

All done!! Commit and push your changes! Once done, send a pull request for review. If you followed the steps correctly, it'll be merged soon, and your changes should be reflected on the main website! BE CAREFUL WHILE LINKING YOUR CREATION; USE YOUR OWN FOLDER. NOTE: PLEASE REMEMBER YOU NEED TO ADD A GIF OF YOUR ANIMATION TO MAKE IT SHOW UP ON THE MAIN WEBSITE. THANKS!