https://github.com/florinamt/the_secret_garden
Interactive animation on a garden: catch butterflies, water flowers, pick apples from tree
https://github.com/florinamt/the_secret_garden
css html interactive-animation javascript jquery
Last synced: 3 months ago
JSON representation
Interactive animation on a garden: catch butterflies, water flowers, pick apples from tree
- Host: GitHub
- URL: https://github.com/florinamt/the_secret_garden
- Owner: FlorinaMt
- Created: 2024-07-17T05:54:57.000Z (11 months ago)
- Default Branch: master
- Last Pushed: 2024-07-17T06:55:15.000Z (11 months ago)
- Last Synced: 2025-01-12T16:20:55.783Z (5 months ago)
- Topics: css, html, interactive-animation, javascript, jquery
- Language: JavaScript
- Homepage:
- Size: 21 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Project visualization
https://github.com/user-attachments/assets/a6172a19-4819-481c-8045-9ebb02b7f2b8
## Requirements
Object: One net
Behavior: The net should follow the cursor around in the garden at all times.
Object: One blue butterfly
Behavior 1: Whenever you try to move the mouse cursor over the blue butterfly, it will swiftly move to a random location inside the view of the garden, but always staying inside the view of the garden – i.e. not moving outside the browser window .
Behavior 2: When the blue butterfly is not otherwise being interacted with, it will slowly move around in random directions on its own – again, never moving outside the garden.
Object: Three apples
Behavior: Each apple is placed at a random position in the crown of the tree every time the garden loads. When an apple is clicked, it moves in a straight line into the basket. The apples should be placed INSIDE the basket.
Object: One watering can
Behavior: When the watering can is clicked, it should shift to a tilted position, and when it is clicked again it should go back to the initial (normal) position.
Object: Three water drops
Behavior: The water drops should be hidden until the watering can is in a tilted position. When the watering can is in a tilted position, the water drops should appear from the tip of the watering can and move down in a straight line and exit at the bottom of the screen. When a water drop moves out of view in the bottom, it will enter anew by the tip of the watering can and move downward in a straight line. This behavior should continue until the watering can is no longer in a tilted position.
Implement at least one extra feature/functionality to each object.
### Extra functionality:
- *net* turning around depending on cursor's moving direction
- *buttlerfly* moving in the basket when clicked
- *apples* jiggle after click, before moving into the basket
- *water drops* make puddle splash when they reach the visible edge of the window
- *watering can* tilt determines an audio file start playing