https://github.com/withaarzoo/animated-pencil-paper-checkbox

This project consists of HTML, CSS, and JavaScript code to create a unique pencil and paper checkbox effect. The checkbox design mimics the appearance of a checkbox being filled in with a pencil, followed by the appearance of lines drawn on paper.
https://github.com/withaarzoo/animated-pencil-paper-checkbox

codewithaarzoo css cssanimationprojects html

Last synced: about 10 hours ago
JSON representation

This project consists of HTML, CSS, and JavaScript code to create a unique pencil and paper checkbox effect. The checkbox design mimics the appearance of a checkbox being filled in with a pencil, followed by the appearance of lines drawn on paper.

• Host: GitHub
• URL: https://github.com/withaarzoo/animated-pencil-paper-checkbox
• Owner: withaarzoo
• Created: 2024-03-04T09:08:12.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-03-05T05:13:39.000Z (9 months ago)
• Last Synced: 2024-03-05T10:33:32.400Z (9 months ago)
• Topics: codewithaarzoo, css, cssanimationprojects, html
• Language: CSS
• Homepage:
• Size: 7.81 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Pencil and Paper Checkbox

This project consists of HTML, CSS, and JavaScript code to create a unique pencil and paper checkbox effect. The checkbox design mimics the appearance of a checkbox being filled in with a pencil, followed by the appearance of lines drawn on paper .

## Preview

![preview](https://github.com/withaarzoo/Animated-Pencil-Paper-Checkbox/assets/59678435/40ea6f7e-f248-49c2-915b-d2deb549fd61)

## Usage

To use this project, simply include the provided HTML, CSS, and JavaScript files in your project directory and link them appropriately in your HTML file.

```html

    

    

    

    

    

    

    

    

    

    Pencil and Paper Checkbox

    

    


        

        

            

             HTML

             CSS

             JavaScript

        

    


    

    

```

## Features

- Custom checkbox design with pencil and paper animation effects.

- Responsive design suitable for various screen sizes.

- Easy to integrate into existing projects.

- Lightweight and efficient code.

## CSS Styles

The CSS file (`style.css`) contains styles for the checkbox design, including animations for drawing and erasing effects.

## JavaScript Functionality

The JavaScript file (`script.js`) adds functionality to remove the pristine state class from checkboxes when they are clicked. This triggers the animation effect to simulate filling in the checkbox with a pencil.

## Dependencies

This project does not rely on any external libraries or frameworks, making it easy to incorporate into any web project.

## Credits

The design and implementation of this pencil and paper checkbox effect were inspired by various CSS animations and checkbox styling techniques found online. Special thanks to the contributors who shared their knowledge and ideas.

## License

This project is licensed under the [MIT License](LICENSE). Feel free to use, modify, and distribute it as needed.