Stuff you need is a simple HTML page, some CSS for styling and intermediate knowledge of JavaScript. First you will create an index.html page if you doc tab all neccessary elements will get posted automatically and that’s all for HTML part.. i am serious that’s all.
Next is CSS i.e. for styling those strawwwberries you will need to have a class which you can name anything i named it straw and wrote these properties in it.
Now i will not go into much details of all these individual properties but only the little complex ones like Transform: which allows you to rotate, scale, move elements etc. Animation: let’s an element gradually change from one style to another in this case it has given a fall direction with 3s time. But to use any CSS animation we need a KeyFrame like this:
Keyframes hold what styles the element will have at certain times. Vh is a css unit that stands for Viewport Height. This unit is based on the height of the viewport. A value of 1vh is equal to 1% of the viewport’s height.
Done with CSS part now to the intermediate section THE JAVASCRIPT!!! You will have to create a function and in that function you can create a div element yes you heard it right div’s can also be created in JS and assigned to a variable. Like this:
Const is used to declare Straw but it does not define a constant value. It defines a constant reference to a value. The classlist property is useful to add, remove and toggle CSS classes on an element, here we are adding “.Straw”
Okay okay don’t get too worried it is a simple Math function used here in JS to style and fixed a duration to that style. The Math.random() returns a random number between 0 and 1. The AnimationDuration property defines how many seconds or milliseconds an animation takes to complete one cycle.
The setTimeout() method calls a function or evaluates an expression after a specified number of milliseconds like 1000 ms = 1 second. Here after 5 seconds the animation or you can say the strawberries will get removed and in the last section we have given an interval for strawberries to reappear after a certain time so that they do not overlap.
THAT’S IT we have raining strawberries now!
For Strawberry or other things just Google Strawberry emoji then copy paste it into these bad boys “🍓“.
