AnimatedOurTeamPage
**Introduction: Building an Animated "Our Team" Page**
Welcome to the dynamic world of web development! In this tutorial, we'll guide you through the process of creating an animated "Our Team" page using HTML, CSS, and JavaScript. Elevate your team presentation with a visually engaging and interactive page that showcases team members in a captivating way.
**Key Features:**
1. **Animated Team Member Cards:**
- Implement animations for team member cards, creating an engaging and dynamic presentation of each team member.
2. **Responsive Design:**
- Ensure the "Our Team" page is responsive, providing an optimal viewing experience across various devices, including desktops, tablets, and smartphones.
3. **Stylish Team Member Details:**
- Design and style individual team member details, including names, roles, and social media links, with a focus on aesthetics and readability.
4. **JavaScript Interaction:**
- Utilize JavaScript to enhance interactivity, such as toggling additional details or dynamically updating content based on user actions.
5. **Source Code Availability:**
- Provide access to the complete source code, allowing you to study, modify, and integrate the animated "Our Team" page into your projects.
**Disclaimer:**
This tutorial serves as an introduction to creating an animated "Our Team" page. Depending on your preferences, you may choose to add more features, customize the design further, or integrate backend functionalities.
Feel free to explore each section of this tutorial, download the provided source code, and adapt it to your unique design preferences. Let's dive into the exciting journey of building an animated "Our Team" page for your website!
ScreenShots
start, add the following HTML codes to your index.html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Our Team Page</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="square">
<span></span>
<span></span>
<span></span>
<div class="content">
<div class="contentBx active" id="content1">
<div class="card">
<div class="imbBx">
<img src="img1.jpg">
</div>
<div class="textBx">
<h2>Someone Famous<br><b>Product Designer</b></h2>
<ul class="sci">
<li><a href="#"><i class="fa-brands fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fa-brands fa-twitter"></i></a></li>
<li><a href="#"><i class="fa-brands fa-linkedin-in"></i></a></li>
<li><a href="#"><i class="fa-brands fa-instagram"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="contentBx" id="content2">
<div class="card">
<div class="imbBx">
<img src="img2.jpg">
</div>
<div class="textBx">
<h2>Someone Famous<br><b>Product Designer</b></h2>
<ul class="sci">
<li><a href="#"><i class="fa-brands fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fa-brands fa-twitter"></i></a></li>
<li><a href="#"><i class="fa-brands fa-linkedin-in"></i></a></li>
<li><a href="#"><i class="fa-brands fa-instagram"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="contentBx" id="content3">
<div class="card">
<div class="imbBx">
<img src="img3.jpg">
</div>
<div class="textBx">
<h2>Someone Famous<br><b>Product Designer</b></h2>
<ul class="sci">
<li><a href="#"><i class="fa-brands fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fa-brands fa-twitter"></i></a></li>
<li><a href="#"><i class="fa-brands fa-linkedin-in"></i></a></li>
<li><a href="#"><i class="fa-brands fa-instagram"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="contentBx" id="content4">
<div class="card">
<div class="imbBx">
<img src="img4.jpg">
</div>
<div class="textBx">
<h2>Someone Famous<br><b>Product Designer</b></h2>
<ul class="sci">
<li><a href="#"><i class="fa-brands fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fa-brands fa-twitter"></i></a></li>
<li><a href="#"><i class="fa-brands fa-linkedin-in"></i></a></li>
<li><a href="#"><i class="fa-brands fa-instagram"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="bottom">
<div class="waves">
<div class="wave" id="wave1"></div>
<div class="wave" id="wave2"></div>
<div class="wave" id="wave3"></div>
<div class="wave" id="wave4"></div>
</div>
<div class="icon">
<div class="imgBx active" style="--i:0;" data-id="content1">
<img src="img1.jpg">
</div>
<div class="imgBx" style="--i:1;" data-id="content2">
<img src="img2.jpg">
</div>
<div class="imgBx" style="--i:2;" data-id="content3">
<img src="img3.jpg">
</div>
<div class="imgBx" style="--i:3;" data-id="content4">
<img src="img4.jpg">
</div>
</div>
</div>
<script type="text/javascript">
var imgBx = document.querySelectorAll('.imgBx');
var contentBx = document.querySelectorAll('.contentBx');
for (var i = 0; i < imgBx.length; i++) {
imgBx[i].addEventListener('mouseover', function() {
for (var i = 0; i < contentBx.length; i++) {
contentBx[i].className = 'contentBx';
}
document.getElementById(this.dataset.id).className = 'contentBx active';
for (var i = 0; i < imgBx.length; i++) {
imgBx[i].className = 'imgBx';
}
this.className = 'imgBx active';
});
}
</script>
</body>
</html>
Next, add the following CSS codes to your style.css
@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.square
{
position: relative;
top: -150px;
width: 400px;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
}
.square span
{
position: absolute;
inset: 0;
border: 2px solid #333;
opacity: 0.5;
}
.square span:nth-child(1)
{
border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
animation: animateSquare 6s linear infinite;
}
.square span:nth-child(2)
{
border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
animation: animateSquare 4s linear infinite;
}
.square span:nth-child(3)
{
border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
animation: animateSquare2 10s linear infinite;
}
@keyframes animateSquare
{
0%
{
transform: rotate(0deg);
}
100%
{
transform: rotate(360deg);
}
}
@keyframes animateSquare2
{
0%
{
transform: rotate(360deg);
}
100%
{
transform: rotate(0deg);
}
}
.bottom
{
position: absolute;
bottom: 0;
width: 100%;
padding: 40px 50px;
background: #66a3ff;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-top: 100px;
}
.wave
{
position: absolute;
top: -100px;
left: 0;
width: 100%;
height: 100px;
background: url(wave.png);
background-size: 1000px 100px;
}
.wave#wave1
{
z-index: 1000;
opacity: 1;
bottom: 0;
animation: animate 4s linear infinite;
}
.wave#wave2
{
z-index: 999;
opacity: 0.5;
bottom: 10px;
animation: animate2 4s linear infinite;
}
.wave#wave3
{
z-index: 998;
opacity: 0.2;
bottom: 15px;
animation: animate 3s linear infinite;
}
.wave#wave4
{
z-index: 999;
opacity: 0.7;
bottom: 20px;
animation: animate2 3s linear infinite;
}
@keyframes animate
{
0%,100%
{
background-position-x: 1000px;
}
100%
{
background-position-x: 0px;
}
}
@keyframes animate2
{
0%,100%
{
background-position-x: 0px;
}
100%
{
background-position-x: 1000px;
}
}
.icon
{
position: relative;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
gap: 40px;
}
.icon .imgBx
{
position: relative;
width: 80px;
height: 80px;
border-radius: 50%;
transition: 0.5s;
box-shadow: 0 0 0 4px #fff;
overflow: hidden;
opacity: 0.5;
}
.icon .imgBx.active
{
box-shadow: 0 0 0 4px #fff,0 0 0 10px #66a3ff,
0 0 0 12px #fff;
opacity: 1;
scale: 1.2;
margin: 0 10px;
}
.icon .imgBx img
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.contentBx
{
position: absolute;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s;
transform: scale(0);
opacity: 0;
}
.contentBx.active
{
transform: scale(1);
opacity: 1;
transition-delay: 0.5s;
}
.contentBx .card
{
position: relative;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
gap: 15px;
}
.contentBx .card .imbBx
{
position: relative;
width: 150px;
height: 150px;
border-radius: 50%;
box-shadow: 0 0 0 5px #fff;
overflow: hidden;
}
.contentBx .card .imbBx img
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.contentBx .card .textBx
{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.contentBx .card .textBx h2
{
position: relative;
font-size: 1.25em;
font-weight: 600;
color: #333;
line-height: 1em;
text-transform: uppercase;
}
.contentBx .card .textBx h2 b
{
font-size: 0.65em;
color: #222;
font-weight: 500;
letter-spacing: 0.1em;
}
.contentBx .card .textBx .sci
{
position: relative;
display: flex;
gap: 7px;
margin-top: 10px;
}
.contentBx .card .textBx .sci li
{
list-style: none;
}
.contentBx .card .textBx .sci li a
{
position: relative;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0,0,0,0.1);
background: #333;
color: #fff;
text-decoration: none;
border-radius: 50%;
transition: 0.5s;
}
.contentBx .card .textBx .sci li a:hover
{
background: #66a3ff;
}