Features

• This is a simple extension to allow the users to get a webpage with the particles animation on it. The users can then edit the web page to include the content they require for their own project.

• Implement 12 amazing animations using the input field of your vs-code. You can even play music using one of the animations! Each command would provide you different files that can easily be changed to improve the animations.

• Implement a styling sheet for your project that comes with styling options for almost all the components you would need in your project.

Animation

Make sure you are inside your project folder before running the commands. The following commands would also overwite the files if they have the same name.

• Currently, by installing the extension and then typing "Create TypeParticles" would provide you with 5 different files. This would allow you to start with the particles.js animation and typewriter animation without cloning any repository. The files created are: index.html, particles.js, app.js, style.css and typewrite.js. The animations use particle.js and typewrite.js

• "Create Particles" allows you to implement just the particles.js animation in your project. The files created are: index.html, particles.js, app.js and style.css. The animation uses particles.js

• "Create Type" allows you to implement just the typewriter.js animation in your project. The files created are: index.html, style.css and typewrite.js. The animation uses typewrite.js

• "Create Anime" allows you to implement just the Anime.js animation in your project. The files created are: index.html, style.css and animation.js. The animation uses anime.js

• "Create Global Styling" would allow you to get a new file with the stylesheet and the instructions about loading the file in your project. An input box will pop up and name the file (without ".css") where you want the new css stylesheet to be. A new file is created if the file doesn't exist

• "Create Text Animations" allows the user to get different CSS based animations for the text they give. The files created are: index.html and styles.css. The animations use animate.css

• "Create Ball Animation" provides the user with a moving ball as the background of the webpage. The HTML and CSS code for both of them is provided and the CSS can be edited to change the shape of the moving object. The color and the other properties can be changed as well. An input box comes up in which the user can enter the name of the css file required. Another HTML file is created named index.html. This file would include the code that can be included in your original HTML file to get the animation.

• "Create Cube Animation" provides the user with a 3D Animation of a cube on the webapge. A HTML file is created for this purpose and this can easily be incorporated in one's web pages. The animation used is three.js

• "Create Moving Box" provides the user with a box swinging on the screen. The Animation has been taken from a CodePen example and uses SASS for the animation. It makes 2 files: index.html and index.scss. Both of these files are linked and would overwrite the file with the same name.

• "Create Car Blueprint" provides the user with an implementation of Vivus.js. The example can be used as a background for webpages as it uses a simple implementation of the library to draw the blueprint of car. This example was taken from this article written by Ivaylo Gerchev . The files created are index.html and index.js. The files with the same name would be overwritten.

• "Create Rocket" provides the user with an implementation of Vivus.js. The example can be used as a background for webpages as it uses a simple implementation of the library to draw a rocket. This example was taken from this article written by Ivaylo Gerchev . The files created are rocket.html, rocket.css and rocket.js. The files with the same name would be overwritten.

• "Create Scroll Reveal" provides the user with an implementation of scrollreveal.js. The example can be used to make the navigation bar in web pages. The implementation has been taken from jsbin. The command would creare 2 files- scroll.html and scroll.css. If there are files with the same name, they will be overwritten by running this command.

• "Get Motion Anim" provides the user with an implementation of Mo.js. The example can be changed to make shapes that can be animated on the screen. The implementation has been taken from codepen. The command would creare 3 files- MoBoxes.html, MoBoxes.css and MoBoxes.js. If there are files with the same name, they will be overwritten by running this command.

• "Create Mo Radio" provides the user with an implementation of Mo.js. The example can be changed to make shapes that can be animated on the screen. The implementation has been taken from csstricks. The command would creare 3 files- MoMusic.html, MoMusic.css and MoMusic.js. A radio playing music is made and this music can be muted as well. If there are files with the same name, they will be overwritten by running this command.