Website Programming: How to Create Earth Animation With a Plane and Zoom Function Pure HTML and CSS in Responsive Way

 

      Bandung, Indonesia, October 20, 2020, 16:12PM Are you huge fans of creative and beautiful animations?. If you're looking to make your website more user-friendly, keep reading this article and try it yourself. A user's first impression is significant and creative fantastic greeting animations can help you engage visitors. Moreover, animations can entertain visitors and make them want to use/play or try to make it.

    These animations are some of the most eye-catching and they may appear on your website homepage. They help visitors to relax and offering a light appearance. The interface of the animation responds to the user's cursor (click the animation). Most users prefer to control animation with hover so visitors can just respond to the animation with the user's cursor movements. Are these 3D animations? Yes, it is, one of the basic 3D animations. 3D animations provide more opportunities to create realistic visuals that attract visitors. Some designers put simply 3D animation to serve as decorative elements of a website. It's common to place them on the main page to welcome visitors.

Before we start the lesson I suggest Download images

HTML

   

In the first section of the HTML is the head, the head is the place where you put your information and function. In the picture I put :

1. <meta charset = "UTF-8"> in purpose to make the website flexible in any programming language. The website support many languages.

2.<meta name ="viewport" content = "width=device-width, initial-scale=1.0"> Viewport is the code that considers the size of the screen, to get the view that we need for a website while witdh=devie-width, initial-scale=1.0 is the one which changes the display to adjust zoom level of the website so the website can be a website which is friendly in any device especially mobile/smartphone.

3.<link rel = "stylesheet" type = "text/CSS" href = "style.css"> this is the code that connects HTML to an external file, like CSS. Many developers are put CSS file as an external link so they can manage the coding well instead of messy coding in a file, I think it's better to use many files.

For the body where we put content inside, we only use labeling on a plane picture. The others like animation, background, effect, etc will be handle by CSS.

CSS ( style.css ) external

First, we have to adjust all the common settings in the universal and local codes(include body and earth)

1. * means universal console, whenever you put codes inside the universal console then all the codes inside will apply to all elements in the website, that's why I only put a few basics codes inside, like margin and padding. For the box-sizing: border-box is a set code that contains a responsive coding circle, so your website can automatically adjust the content with the different screen size (adapt with the screen size is called responsive in website).

2. body, the place you put the content inside but in the HTML we only put labeling(div.class) and a picture and that's why we only used a few common codes.

3. .earth, .earth is labeling from HTML (div.earth) the earth is inside the body so it means the earth is content. In the label, we adjust the background but the background will only in certain size (width: 400px and height: 400px) with animation inside (animation: animate 12s linear infinite)

In this part, we adjust the additional effect, transform, index, and a little transition.

1. .earth:active, means when the animation active then the scale will be 5 times bigger(when you touch the earth(if you're using a smartphone) or you click the earth(if you're using a computer/laptop) then the earth will be 5 times bigger or we called it to zoom.

2. .earth: before, this is the place where we adjust the effect like the cloud and the animation.

3. .earth IMG, means we're going to give settings to both earth and the IMG when the earth active(clicked/touched) we will give a transition of 0.5 seconds to zoom the earth.

This is the last part of the CSS, in this part we adjust the @keyframes of a variable named animate, from 0%(Start the animation) to 100%(Stop the animation). We used background position to rotate the earth and also it depends on your picture's size, but if you download the image from my google drive Download images then you only have to follow the codes in the picture.

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