{"id":23231575,"url":"https://github.com/talhat298/dog-follow-ghost","last_synced_at":"2026-05-05T08:33:15.365Z","repository":{"id":138296361,"uuid":"597834578","full_name":"TalhaT298/dog-follow-ghost","owner":"TalhaT298","description":"Fun related website where dog follow the ghost.This JavaScript code creates an interactive dog animation on a webpage. The animated dog responds to mouse movements and clicks, performing actions like leg movement and smooth turns. The code is organized with clear functions and comments for readability.","archived":false,"fork":false,"pushed_at":"2024-11-29T12:17:53.000Z","size":17,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-11T17:18:00.848Z","etag":null,"topics":["css3","html5","javascript","vercel"],"latest_commit_sha":null,"homepage":"https://dog-follow-ghost.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TalhaT298.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-02-05T19:20:32.000Z","updated_at":"2024-11-29T12:17:56.000Z","dependencies_parsed_at":"2024-01-30T21:45:46.062Z","dependency_job_id":"4608f48e-9f28-416d-93c8-bf0e295440cf","html_url":"https://github.com/TalhaT298/dog-follow-ghost","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TalhaT298%2Fdog-follow-ghost","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TalhaT298%2Fdog-follow-ghost/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TalhaT298%2Fdog-follow-ghost/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TalhaT298%2Fdog-follow-ghost/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TalhaT298","download_url":"https://codeload.github.com/TalhaT298/dog-follow-ghost/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247389472,"owners_count":20931239,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css3","html5","javascript","vercel"],"created_at":"2024-12-19T02:15:20.377Z","updated_at":"2026-05-05T08:33:10.319Z","avatar_url":"https://github.com/TalhaT298.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Dog Animation with Interactive Control\r\n\r\n## 🚀 About the Project\r\nThis project demonstrates an **interactive animated dog** that moves and reacts based on directional input. The animation is crafted using **HTML**, **CSS**, and **JavaScript**, showcasing dynamic movement of the dog’s legs, tail, and overall body. The logic includes:\r\n- Precise positioning of body parts for smooth animations.\r\n- Dynamic direction control for the dog’s movement.\r\n\r\n---\r\n\r\n## 🛠️ Technologies Used\r\n\r\n- **HTML**: For the structure of the animated dog and its parts.\r\n- **CSS**: To style and animate the dog's movements.\r\n- **JavaScript**: Implements the animation logic and interactive controls.\r\n\r\n---\r\n\r\n## 📂 Project Structure\r\n\r\n```plaintext\r\n├── index.html    # Contains the structure of the animated dog\r\n├── style.css     # Handles the styling and animation details\r\n├── script.js     # Contains logic for movement and interactive controls\r\n```\r\n\r\n### **HTML (index.html)**\r\nThe HTML file defines the structure of the dog, including its body, legs, and tail. It also contains marker elements for movement debugging or tracking.\r\n\r\n### **CSS (style.css)**\r\nCSS is responsible for the appearance of the dog and its smooth animation. Key components include:\r\n- `@keyframes` for animation sequences.\r\n- Styling for `.dog`, `.body`, `.tail`, and `.leg` elements.\r\n\r\n### **JavaScript (script.js)**\r\nJavaScript drives the logic for interactive animations. Key features include:\r\n- Dynamic adjustment of the dog's movement based on directional inputs.\r\n- Animation frames for realistic leg and tail motions.\r\n\r\n---\r\n\r\n## 🔑 Features\r\n\r\n1. **Interactive Directional Movement**: The dog adjusts its direction and moves accordingly.\r\n2. **Realistic Animations**: Smooth transitions for the legs and tail mimic natural movement.\r\n3. **Modular Design**: The code is organized to allow easy modifications and extensions.\r\n\r\n---\r\n\r\n## 🧑‍💻 Code Overview\r\n\r\n### Initialization\r\nThe `init` function initializes key elements and sets up the animation logic.\r\n\r\n```javascript\r\nfunction init() {\r\n  const elements = {\r\n    body: document.querySelector('.wrapper'),\r\n    dog: document.querySelector('.dog'),\r\n    marker: document.querySelectorAll('.marker'),\r\n  };\r\n\r\n  const animationFrames = {\r\n    rotate: [[0], [1], [2], [3], [5], [3, 'f'], [2, 'f'], [1, 'f']]\r\n  };\r\n\r\n  const directionConversions = {\r\n    360: 'up', 45: 'upright', 90: 'right', 135: 'downright',\r\n    180: 'down', 225: 'downleft', 270: 'left', 315: 'upleft',\r\n  };\r\n}\r\n```\r\n\r\n### Leg Position Logic\r\nThe `partPositions` array defines frame-by-frame positioning for the dog’s legs, ensuring seamless walking animations.\r\n\r\n```javascript\r\nconst partPositions = [\r\n  { leg1: { x: 26, y: 43 }, leg2: { x: 54, y: 43 }, ... },\r\n  { leg1: { x: 33, y: 56 }, leg2: { x: 55, y: 56 }, ... },\r\n  // Additional frames...\r\n];\r\n```\r\n\r\n### Tail and Direction Control\r\nThe script dynamically rotates and aligns the dog's body based on directional input using predefined animation frames and directional mappings.\r\n\r\n---\r\n\r\n## 🎨 CSS Highlights\r\nThe CSS file defines the animations and styles for a visually appealing and responsive experience. Key sections include:\r\n- **Dog Styling**: `.dog`, `.body`, `.tail`, `.leg`.\r\n- **Animations**: Smooth transitions for walking and tail wagging.\r\n\r\n```css\r\n@keyframes walk {\r\n  0% { transform: rotate(0deg); }\r\n  100% { transform: rotate(45deg); }\r\n}\r\n```\r\n\r\n---\r\n\r\n## 🖥️ How to Run\r\n\r\n1. Clone the repository or download the project files.\r\n2. Open `index.html` in any modern browser.\r\n3. Observe and interact with the animation.\r\n\r\n---\r\n\r\n## 📝 Customization\r\nTo tweak animations or controls:\r\n- Modify `partPositions` in `script.js` for leg positions.\r\n- Adjust `@keyframes` in `style.css` for animation speeds.\r\n- Update HTML structure in `index.html` to add or remove components.\r\n\r\n---\r\n\r\n## 💡 Future Enhancements\r\n\r\n- Add keyboard controls for more interactivity.\r\n- Include sound effects to enhance the user experience.\r\n- Create a mobile-responsive version.\r\n\r\n---\r\n\r\n## Live Link\r\n\u003chttps://dog-follow-ghost.vercel.app/\u003e\r\n![My Image](https://i.ibb.co/kx3ZbSh/Dog-and-5-more-pages-Personal-Microsoft-Edge-2024-01-31-02-16-47.gif)\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftalhat298%2Fdog-follow-ghost","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftalhat298%2Fdog-follow-ghost","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftalhat298%2Fdog-follow-ghost/lists"}