This project provides a simple JavaScript code snippet to generate a wind-blown willow tree animation effect. The animation consists of a tree trunk and a leaf that sways gently back and forth.
The animation is achieved by creating a container element to hold the tree components, including the trunk and the leaf. The trunk is represented by a vertical rectangle positioned at the center bottom of the container, while the leaf is a circular element placed slightly above the trunk. The leaf is then animated to simulate the swaying motion of a tree in the wind.
To use this animation effect, simply include the provided JavaScript code (index.js) in your HTML file. The animation will automatically start when the page loads.
You can customize the appearance and behavior of the animation by adjusting the following parameters in the JavaScript code:
frequency: Controls the speed of the swaying motion. amplitude: Determines the maximum displacement of the leaf from its starting position. Colors and dimensions of the trunk and leaf elements can be modified by adjusting their respective CSS properties in the code.
You can see a live demonstration of the wind-blown willow tree animation by opening the HTML file containing the code in a web browser.
This animation effect is created using JavaScript and CSS.