Labels

Website Programming: How to Make Skills Bar Animation with Hover

 




      Bandung, Indonesia, October 12, 2020, 18:21PM - In this lesson, we're going to make a skill bar but in this lesson, we will put a little animation named Hover.  What is hover? Hover may refer to mouseover, hover describes the act of moving a cursor or touching(in smartphone). You'll notice that this action shows an additional effect/display to the object. The gif above is an example of the result. By default, the mouse pointer is over an object, the object will show more effect like the size of text and picture.

The term hovering implies your computer screen is a 3D space. To put it simply, the object can detect your pointer "if the pointer is over the object". If you've read my other article WEBSITE PROGRAMMING: CREATE A SKILL BAR UI DESIGN PURE HTML & CSS IN RESPONSIVE WAY  then I can say that this lesson is the next level. Sadly in this lesson, we're not going to take this responsibility. So, your task is to make it responsive through other articles, search, and learn how to make it responsive.

HTML



The First section of HTML is <head>, the head is the place where you put the information on your website. Also, you can put an external link, like style.css which is connected to a CSS file. Also, you can put the other coding like a responsive coding circle ( I didn't put it), title, <meta charset=" UTF-8"> (UTF-8 is a Unicode-based encoding that can support many languages and can accommodate pages and forms in any mixture of those languages), and many other functions.

  

The second section is the body, the body is a place where you put your content like a story, pictures, videos, animation, etc. In the picture, I put many div as labeling div means division in HTML (if you want to use div id or class, it's up to you because they have the same function it's labeling). In the picture I put 3 skills in total, if you want to put more skills the just add them inside the HTML file with the same labeling(here are the tips, copy-paste the section like div in HTML section and the percentage, then change the text)


This is the last picture of HTML codes, I've explained all the function in HTML and this picture has the same function as the previous picture.

CSS ( style.css )




First of all, we have to adjust the * or universal setting. The * in CSS means all elements, it's a universal selector. So we are setting all elements to have zero margins and zero paddings, thus making them look the same in the browser. I called them universal setting because they cover almost all the settings on the website.



In this picture, we're going to make the details, from row 25 we make the box of the skills by setting the width, background, display, height, border-radius, etc. In row 38 we adjust the function the main function of this lesson, it's hover, so when your cursor is over the object then the object will transform through Y-axis (-10px) and show a box-shadow.  In row 43 we start to adjust the before and after hover, so before the hover active "what is going to happen?" and "what happens if the hover active?"


Here's the advanced from the previous picture. We adjust the style (percent and number) like the size and color, and many other things. 


In this picture we're going to deepen into the hover effect, which is when the hover is active, so we have to adjust the number, percent, and h2 from the HTML. Simple, just size and color, after that we come back to the common adjust.


In this section, we're going to put color to the circle which we've made from HTML and a little calculation, I mean when you put a percentage on your skill but the circle doesn't match the percentage, it would make people think "Then why did you put the circle? They didn't match the percentage). So with a simple calculation, you can match the circle to the percentage. 



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

Labels:

Comments

Post a Comment