What we need for this tutorial:
- HTML and CSS
- JQuery and Bootstrap
- and your choice of editor
I downloaded all the assets and placed them in my assets directory so my directory will look like this:
- animations/assets/css/css-files-here
- animations/assets/js/js-files-here
Then I created index.html file and styles.css in my assets folder and then linked all css in header tag and linked all js files below the body.
So my index.html is looking like this:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Home - Programmer101N</title>
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
</body>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
</html>
Let’s Start Coding, First of all, We need to create a placeholder container with class of container-fluid. This will hold our header divs.
<div class="container-fluid">
</div>
Inside this div, We’re going to create three more divs which will have common class icon and Distinct class food, water and energy respectively.
<div class="container-fluid">
<div class="icon food">
</div>
<div class="icon water">
</div>
<div class="icon energy">
</div>
</div>
Inside each of the div we create, We are gonna create one more div with class circle. Inside this div, Another div with class inner-circle.
<div class="container-fluid">
<div class="icon food">
<div class="circle">
<div class="inner-circle">Food</div>
</div>
</div>
<div class="icon water">
<div class="circle">
<div class="inner-circle">Water</div>
</div>
</div>
<div class="icon energy">
<div class="circle">
<div class="inner-circle">Energy</div>
</div>
</div>
</div>
Now I have created some text in middle for some header title and description But it’s not neccessary. Code is below.
<div class="container-fluid">
<div class="icon food">
<div class="circle">
<div class="inner-circle">Food</div>
</div>
</div>
<div class="icon water">
<div class="circle">
<div class="inner-circle">Water</div>
</div>
</div>
<div class="icon energy">
<div class="circle">
<div class="inner-circle">Energy</div>
</div>
</div>
<div class="d-flex flex-column justify-content-center align-items-center min-vw-100 min-vh-100">
<div class="d-flex flex-column heading">
<span class="start">Your Plan,</span>
<span class="end">Your Planet</span>
</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Asperiores illo, dignissimos beatae eaque reprehenderit
repellendus natus nam, voluptatum adipisci, sed accusamus ab
molestiae laboriosam aliquam deserunt sit officiis dicta
magni.
</p>
</div>
</div>
Now copy this css file I created.
html, body{
padding: 0;
margin: 0;
}
.container-fluid{
height: 100vh;
width: 100vw;
display: block;
position: absolute;
margin: 0;
padding: 0;
overflow: hidden;
}
.icon{
position: absolute;
transform: translate(-50%, -50%);
}
.food{
left: 35%;
top: 15%;
}
.water{
top: 70%;
left: 5%;
}
.energy{
top: 60%;
left: 90%;
}
.circle{
display: flex;
justify-content: center;
align-items: center;
}
.circle{
border-radius: 50%;
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
transition-duration: 0.5s;
font-weight: 900;
z-index: -1;
}
.inner-circle{
border-radius: 50%;
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
transition-duration: 0.2s;
font-weight: 900;
}
.food .circle{
background: rgba(255, 0, 0, 0.4);
}
.water .circle{
background: rgba(0, 174, 255, 0.4);
}
.energy .circle{
background: rgba(251, 255, 0, 0.4);
}
.d-flex p{
width: 50%;
font-size: 20px;
text-align: center;
color: grey;
}
.heading{
width: 25%;
font-size: 72px;
}
.start{
align-self: flex-start;
}
.end{
align-self: flex-end;
}
.big-radius{
height: 75vw;
width: 75vw;
}
Now, Time for some JQuery Action. Start by adding event listener to all inner-circle class.
$('.inner-circle').hover((e) => {
}, (e) => {
});
The First method we passed will run when your mouse enters and second method when your mouse leaves. Now we are gonna add big-radius class to element’s parentElement and Set element background color to white.
$('.inner-circle').hover((e) => {
$(e.target.parentElement).addClass("big-radius");
$(e.target).css('backgroundColor', 'white');
}, (e) => {
});
In second method, We’re gonna remove big-radius class and set color to transparent.
$('.inner-circle').hover((e) => {
$(e.target.parentElement).addClass("big-radius");
$(e.target).css('backgroundColor', 'white');
}, (e) => {
$(e.target.parentElement).removeClass("big-radius");
$(e.target).css('backgroundColor', 'transparent');
});
Now our code is complete.
You can download this source code from my Github.
