Giter Club home page Giter Club logo

css-animation-ride's Introduction

CSS Animation Ride

Hello and welcome to CSS Animation Ride. A place to put your animation and learn how to contribute to an open source project.

Table of Content

Rules

The rules are simple. You have to:

  • Use HTML <divs> and CSS only! No JS, and no SVGs!
  • Have at least one animation in your work
  • That's it!

How to Contribute

If you've never forked a repository or made a pull request before,a cool resource to learn about the fork workflow can be found here - https://www.atlassian.com/git/tutorials/comparing-workflows/forking-workflow

Now, once you've forked this repo and got a local version up on your computer, follow these steps:

  1. In the Animations directory (folder), create a directory named after yourself.
  2. Within this folder you just made, create two files, an HTML file, and a CSS file.
  3. Link your CSS file to your HTML file.
  4. Using only HTML and CSS (no <script> allowed!!). It can be as simple or as complex as you like, as long as it's animated in some way!
  5. Get a screen recording of your finished work, and make a gif! Try to crop it so that it looks good as a smallish (preferably squarish) image. Save this in your directory, together with your HTML and CSS files. Static screenshots are also acceptable.
    If you don't add a gif/screenshot, the website won't show your animation.
  6. Go to the root show.js. You will see an array of objects, each one represents a work of art that someone has created. Copy an example object and paste it at the end, filling it out with your art information and links:
let cards = [
  //  Add your card in this section
  {
    artName: 'Your animation name here',
    pageLink: './Animations/Joy/triangle/triangle.html',
    imageLink: './Animations/Joy/triangle/triangle.gif',
    author: 'Joy',
    githubLink: 'https://github.com/username'
  }
];

css-animation-ride's People

Contributors

surajondev avatar ganesh1729ganesh avatar roakoth avatar rahul-d0gney avatar rohit-kavitake avatar vitoriapena avatar rahul-dogney avatar vanshuhassija avatar shibam-debnath avatar maxharsh avatar alphaaman avatar vishalbinadi avatar mohitsaini2028 avatar harshja1n avatar pavankumarraju13 avatar 25011908vardhan avatar prash240303 avatar iamthehr avatar ashish1659 avatar acrazypotato avatar sparsh1807 avatar sarcasticmani avatar mindninjax avatar ramkrishna07 avatar priyanshi-raj avatar priyadarshinisharma avatar tkacholga avatar nishchay-veer avatar neetika146 avatar jvictorvieira avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.