https://github.com/withaarzoo/animated-jumping-totoro

This is a simple HTML and CSS project that creates an animated jumping Totoro character.
https://github.com/withaarzoo/animated-jumping-totoro

css html html-css totoro

Last synced: about 10 hours ago
JSON representation

This is a simple HTML and CSS project that creates an animated jumping Totoro character.

• Host: GitHub
• URL: https://github.com/withaarzoo/animated-jumping-totoro
• Owner: withaarzoo
• Created: 2023-09-04T07:31:17.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-09-04T07:33:28.000Z (about 1 year ago)
• Last Synced: 2023-12-30T18:51:50.618Z (11 months ago)
• Topics: css, html, html-css, totoro
• Language: CSS
• Homepage:
• Size: 3.91 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Animated Jumping Totoro

This is a simple HTML and CSS project that creates an animated jumping Totoro character. Totoro is a popular character from the Studio Ghibli film "My Neighbor Totoro." In this project, Totoro is animated to appear as if it is jumping up and down. The animation is achieved using CSS keyframes and transforms.

## How It Works

The project consists of an HTML file and a CSS file:

- **HTML (index.html)**: The HTML file defines the structure of the Totoro character. It creates a container for Totoro and various elements for Totoro's body parts, including eyes, nose, ears, whiskers, and a shadow.

- **CSS (style.css)**: The CSS file contains styles and animations to create the Totoro character and the jumping animation. The keyframes define the different stages of the jumping animation, which is applied to the Totoro's body to make it appear as if it's squishing and stretching while jumping.

## How to Use

1. Clone this repository to your local machine or download the ZIP file.

2. Open the `index.html` file in your web browser to view the animated jumping Totoro.

## Customize

Feel free to customize the Totoro character's appearance or the animation by modifying the CSS code in the `style.css` file. You can change colors, sizes, or even add more elements to the Totoro character to make it your own.

## Credits

This project was created by [Your Name] and is inspired by Studio Ghibli's "My Neighbor Totoro."

## License

This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.

Enjoy your animated jumping Totoro!

## Preview