An interactive CSS and JavaScript animation of a cartoon sponge character walking across a scenic path with dynamic leg movement, eye tracking, and environmental elements.
![Walking Sponge Demo]:
- 🚶 Smooth walking cycle with realistic leg and arm movement
- 👀 Interactive eyes that follow your mouse cursor
- 🦘 Click the character to make it jump!
- 💃 Body bounce effect synchronized with walking
- 👟 Dynamic foot rotation for natural stepping motion
- ☀️ Animated sun with pulsing glow effect
- ☁️ Floating clouds drifting across the sky
- 🌸 Swaying flowers in the foreground
- 🎨 Gradient backgrounds with depth and lighting
- 🌈 Professional shadows and visual polish
- Pure vanilla JavaScript (no frameworks)
- CSS animations and keyframes
- DOM-based animation using
requestAnimationFrame - Responsive character interactions
- Smooth mathematical animations using sine waves
- A modern web browser (Chrome, Firefox, Safari, Edge)
- No build tools or dependencies required!
- Clone the repository:
git clone https://github.com/yourusername/walking-sponge.git- Navigate to the project directory:
cd walking-sponge- Open
index.htmlin your browser:
# On macOS
open index.html
# On Linux
xdg-open index.html
# On Windows
start index.htmlThat's it! No installation or build process needed.
walking-sponge/
│
├── index.html # Main HTML file with character structure
├── styles.css # All styling and CSS animations
├── script.js # JavaScript animation logic
└── README.md # Project documentation
The character's walking motion is created using sine waves for smooth, natural movement:
// Leg rotation using sine waves
const leftAngle = Math.sin(step) * 35;
const rightAngle = Math.sin(step + Math.PI) * 35;Eyes follow your mouse cursor using trigonometry:
const angle = Math.atan2(mouseY - eyeY, mouseX - eyeX);
const distance = Math.min(3, Math.hypot(mouseX - eyeX, mouseY - eyeY) / 100);Vertical bounce synchronized with steps:
const bounceY = Math.abs(Math.sin(bounce)) * 8;- Mouse Movement: Move your cursor around to make the character's eyes follow you
- Click Character: Click on the walking sponge to make it jump
- Continuous Loop: Character walks across the screen and reappears on the left
In script.js, modify the position increment:
position += 1.5; // Change this value (default: 1.5)In styles.css, modify the gradient values:
background: linear-gradient(135deg, #ffeb3b 0%, #ffd74a 100%);Adjust the step increment in script.js:
step += 0.12; // Change this value (default: 0.12)This project demonstrates:
- DOM Manipulation: Controlling HTML elements with JavaScript
- CSS Animation: Creating smooth visual effects
- Trigonometry: Using
Math.sin(),Math.cos(),Math.atan2()for realistic motion - Animation Timing: Using
requestAnimationFramefor smooth 60fps animation - Event Handling: Mouse tracking and click interactions
- Creative Coding: Combining math and code for visual expression
- Add sound effects for footsteps
- Multiple characters with different personalities
- Day/night cycle with lighting changes
- Mobile touch controls
- Obstacles to jump over
- Background parallax scrolling
- Character customization options
Contributions are welcome! Feel free to:
- Fork the repository
- Create a feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is open source and available under the MIT License.
Your Name
- GitHub: https://github.com/ProximaD
- Inspired by classic 2D character animations
- Mathematical concepts from creative coding tutorials
- Animation techniques from game development resources
If you want to learn more about animation programming:
- The Nature of Code - Physics and math for animation
- Coding Math - Video tutorials on math for programmers
- MDN Animation Guide - Web animation fundamentals
⭐ If you found this project helpful, please give it a star!
Made with ❤️ and lots of ☕