Website Programming: HOVER Animation in Responsive Way
Bandung, Indonesia, October 4, 2020, 15:28M - A website is a word that is familiar to people, both parents, and young people. Do you know that the more time flew, the more website builder features are? There're many free templates and freelancers on the internet and that's the reason why many people feel insecure about becoming a Website Developer without trying to be a good Website Developer. There're two types of Website Developer, first, the one who engaged in animation/display which is commonly called the Front-End, and also those engaged in the data field which is often called the Back-End.
On this blog, I will share how to create a website with simple animation that can be completed in 5 minutes. By looking at the result, we can see that CSS can give a big impact on a simple paragraph. When the border is approached, the dark picture becomes clear, accompanied by the appearance of writing.
For the basic of the glowing border, I suggest to learn it from :
HTML
HTML is the basis of a website, if you want to make a website you have to use HTML.
We'll start from <head>, in HTML <head> is the first section in coding that contains information about website page's property, you can put responsive website coding circle in the head, and we can link to an external file, for example, <link rel="stylesheet" href="style.css"> following to the code the head section links to a file named style.css. And <meta name="" content"""><meta charset=""> are responsive website coding circle, so depending on the screen size, the website being able to react quickly to automatically adjust for different screen size.
Here's a little example of a responsive website which we're building right now
You can see that the images automatically adjust for different screen sizes from desktop size to Galaxy S5 size.
In terms of customizing your page content, you need text, pictures, videos, etc. Your big page in the center that contains your unique content of a web page is the body. As you can see that I put many pictures and texts on the body. About div in the coding, div means division, it's usually given a unique id to distinguish from other elements on the same page.
And here's the result, well without style, the website looks boring, from this section CSS will play an important role on the website. When the website has an animation or unique display, it will attract many people
CSS (style.css)
These codes are the next level from before, we started to manage the specific section, as you can see .box and imgBx we got this from "div class" we specific the section of image and box for the animation.
.box means we're making a box with the style like the color, the size, transition, etc.
Then for :hover is one of the CSS functions, through :hover you can trigger animation by touching the box(smartphone, tablet, etc) or point the cursor to the box. .box:hover means if the box pointed or touch0ed then the box height will go to 310px.
How about .box .imgBx . It means we're styling the box and the image box simultaneously
And here's the start of the complex codes. I'll explain the essential codes. They're in the .box: before and after. In this section, we divided the box into before and after to make sure "what is going to be if you point your pointer of touch the box on the screen" and "what is going to be if you don't"
In this part, we're going to execute all the identified codes, like .box:nth-child(2):before and after, we put linear-gradient to the box when the box triggered. And we setting the .content's(the explanation) size, margin(include top, right, button, left), color, transition, etc.
Okay that's all for this lesson, I think the hardest part is in the CSS codes, am I right? With 123 rows we can make an incredible animation, sadly the color not moving, but it's okay we just learned the basic ones. If you want to make a full website, not just 123 rows or 500 rows, a full website contains more than a thousand rows, so enjoy the lesson enjoy the progress. ^^
let me show you once again the result and compare to yours
This website is responsive by the way ^^
Thank you for reading my blog and see you in the next article
Comments
Post a Comment