Website Programming: FallingSnow Pure HTML, CSS, and JavaScript in Responsive Way

 

      Bandung, Indonesia, October 16, 2020, 13:38PM - In this lesson, we're going to learn how to make live wallpaper on a website, so what is live wallpaper? Live wallpaper is a background consist of a picture/wallpaper an effect so the wallpaper moves when the device moves(usually a smartphone) or the wallpaper moves on the computer background without the trigger of the user's. In terms to make snow we have to use a complex level of javascript, but to use such a high level of JavaScript we have to make a few thousand rows of codes, so we have to rely on google to search the particle JavaScript. We can search the codes, we have the codes so why bother to type thousand of rows that can take a few hours? 

    As a developer we have to work in a smart way, take advantage of professional. Google provides many articles and codes. Before we start the lesson, I suggest Download JavaScript and Image from my google drive. I've adjusted the JavaScript because it has a few thousand rows I think It would be easier for us to give you the result of the JavaScript rather than write the codes from scratch. If you want to learn much more about JavaScript, you can analyze the codes from the file you've downloaded and made sure to search more at google for the function of each code.

HTML

Head is the place where you put the information on your page also you can put a few codes that contain function like 

<meta charset = "UTF-8"> (is a Unicode-based encoding that can support many languages and can accommodate pages and forms in any mixture of those languages)

<meta name="viewport" (viewport means the user's visible area of a website. The viewport varies with any device with different screen size, and it's common for a website to put viewport for the responsive website) content = "width=device-width, initial-scale=1.0">(for the responsive website)

Also, we can link the HTML with an external link like <link rel = "stylesheet" href = "style.css"> basically, hef is a attribute specifies the URL of the page. we can say that this is a kind of hyperlink that connects one like to the other file.

At first, I said that the head is the place where you put the external link and now I put the external link in the body. Basically, in this lesson, we're going to focus on the content of the website. The body is the place where you put your content like pictures, text, even effect like JavaScript. So I can say that it's legit to put JavaScript inside the body.

CSS ( style.css ) external

Maybe many people would think that the falling snow effect is made by CSS, in this picture you can see that I only use 10 rows of codes in CSS by adjusting the margin, padding, width, height, and background.

JavaScript ( apps.js )

In JavaScript, we can adjust the snow by editing the part I've marked, you can adjust the size so you can see the differences (i suggest change the size's value into 2 for minimum snow)

Basically, these codes are particles codes, it means a particle that has a connection so if you change the enable to true "enable": true, you'll see the millions of snow are linked to each other 

Do you see the row that I've marked? If you want to put a little game by yourself, change the "enable": false, into "enable": true, and you'll see that the snow will avoid your cursor/pointer in a certain size. But if you prefer the effect like I've shown in the first section of this article, then ignore all the suggestions to change.

Okay that's all for this lesson, I thought this one is not the most attractive website, but if you enjoyed the lesson you can change the code, maybe from snow into the rain? It's up to you, make sure to upgrade your skills.

That's all for the lesson
Thank you for reading my blog and see you in the next article