Team Profile With Animation Effect

Team profile animation effect demo

About That:

In today's digital age, an engaging and visually appealing team profile can make a significant impact on your website or portfolio. By combining the power of HTML, CSS, and JavaScript, you can create an interactive team profile that not only showcases your team members but also adds a touch of elegance through animation effects. In this post, we will guide you through the process of creating a dynamic team profile that will captivate your audience and leave a lasting impression.

HTML: The foundation of our team profile will be built with HTML. We will structure the content, creating a dedicated section for each team member, complete with their bio, image, and contact details. This structure will provide a solid base for the subsequent styling and animation.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"/> <link rel="stylesheet" href="./style.css"> <title>team animated</title> </head> <body> <div class="container"> <div class="icon"> <div class="imgBx active" style="--i:1;" data-id="content1"> <img src="./images/trinetra.jpg" alt=""> </div> <div class="imgBx" style="--i:2;" data-id="content2"> <img src="./images/nancy.jpg" alt=""> </div> <div class="imgBx" style="--i:3;" data-id="content3"> <img src="./images/avinash.jpg" alt=""> </div> <div class="imgBx" style="--i:4;" data-id="content4"> <img src="./images/shalini.jpg" alt=""> </div> <div class="imgBx" style="--i:5;" data-id="content5"> <img src="./images/shubham.JPG" alt=""> </div> <div class="imgBx" style="--i:6;" data-id="content6"> <img src="./images/pankaj.jpg" alt=""> </div> <div class="imgBx" style="--i:7;" data-id="content7"> <img src="./images/shibbu.png" alt=""> </div> <div class="imgBx" style="--i:8;" data-id="content8"> <img src="./images/nira.jpg" alt=""> </div> </div> <div class="content"> <div class="contentBx active" id="content1"> <div class="card"> <div class="imgBx"> <img src="./images/trinetra.jpg" alt=""> </div> <div class="textBx"> <h2>Trinetra Sahu<br><span>Software Developer</span></h2> <ul class="sci"> <li><a href="#"><i class="fa-brands fa-instagram"></i></a></li> <li><a href="#"><i class="fa-brands fa-telegram"></i></a></li> <li><a href="#"><i class="fa-brands fa-github"></i></a></li> <li><a href="#"><i class="fa-brands fa-youtube"></i></a></li> </ul> </div> </div> </div> <div class="contentBx" id="content2"> <div class="card"> <div class="imgBx"> <img src="./images/nancy.jpg" alt=""> </div> <div class="textBx"> <h2>Nancy Agrawal<br><span>CEO C.N.C</span></h2> <ul class="sci"> <li><a href="#"><i class="fa-brands fa-instagram"></i></a></li> <li><a href="#"><i class="fa-brands fa-telegram"></i></a></li> <li><a href="#"><i class="fa-brands fa-github"></i></a></li> <li><a href="#"><i class="fa-brands fa-youtube"></i></a></li> </ul> </div> </div> </div> <div class="contentBx" id="content3"> <div class="card"> <div class="imgBx"> <img src="./images/avinash.jpg" alt=""> </div> <div class="textBx"> <h2>Avinash Ku. Pandey<br><span>Senior Developer</span></h2> <ul class="sci"> <li><a href="#"><i class="fa-brands fa-instagram"></i></a></li> <li><a href="#"><i class="fa-brands fa-telegram"></i></a></li> <li><a href="#"><i class="fa-brands fa-github"></i></a></li> <li><a href="#"><i class="fa-brands fa-youtube"></i></a></li> </ul> </div> </div> </div> <div class="contentBx" id="content4"> <div class="card"> <div class="imgBx"> <img src="./images/shalini.jpg" alt=""> </div> <div class="textBx"> <h2>Shalini Singh<br><span>entrepreneur</span></h2> <ul class="sci"> <li><a href="#"><i class="fa-brands fa-instagram"></i></a></li> <li><a href="#"><i class="fa-brands fa-telegram"></i></a></li> <li><a href="#"><i class="fa-brands fa-github"></i></a></li> <li><a href="#"><i class="fa-brands fa-youtube"></i></a></li> </ul> </div> </div> </div> <div class="contentBx" id="content5"> <div class="card"> <div class="imgBx"> <img src="./images/shubham.JPG" alt=""> </div> <div class="textBx"> <h2>Shubham Sharma<br><span>network ass.</span></h2> <ul class="sci"> <li><a href="#"><i class="fa-brands fa-instagram"></i></a></li> <li><a href="#"><i class="fa-brands fa-telegram"></i></a></li> <li><a href="#"><i class="fa-brands fa-github"></i></a></li> <li><a href="#"><i class="fa-brands fa-youtube"></i></a></li> </ul> </div> </div> </div> <div class="contentBx" id="content6"> <div class="card"> <div class="imgBx"> <img src="./images/pankaj.jpg" alt=""> </div> <div class="textBx"> <h2>pankaj rajput<br><span>security manager</span></h2> <ul class="sci"> <li><a href="#"><i class="fa-brands fa-instagram"></i></a></li> <li><a href="#"><i class="fa-brands fa-telegram"></i></a></li> <li><a href="#"><i class="fa-brands fa-github"></i></a></li> <li><a href="#"><i class="fa-brands fa-youtube"></i></a></li> </ul> </div> </div> </div> <div class="contentBx" id="content7"> <div class="card"> <div class="imgBx"> <img src="./images/shibbu.png" alt=""> </div> <div class="textBx"> <h2>Shivam Rajput<br><span>ass. Manager</span></h2> <ul class="sci"> <li><a href="#"><i class="fa-brands fa-instagram"></i></a></li> <li><a href="#"><i class="fa-brands fa-telegram"></i></a></li> <li><a href="#"><i class="fa-brands fa-github"></i></a></li> <li><a href="#"><i class="fa-brands fa-youtube"></i></a></li> </ul> </div> </div> </div> <div class="contentBx" id="content8"> <div class="card"> <div class="imgBx"> <img src="./images/nira.jpg" alt=""> </div> <div class="textBx"> <h2>Nira Fatima<br><span>graphical Designer</span></h2> <ul class="sci"> <li><a href="#"><i class="fa-brands fa-instagram"></i></a></li> <li><a href="#"><i class="fa-brands fa-telegram"></i></a></li> <li><a href="#"><i class="fa-brands fa-github"></i></a></li> <li><a href="#"><i class="fa-brands fa-youtube"></i></a></li> </ul> </div> </div> </div> </div> </div> <script> //enter file name </script> </body> </html>

CSS: To make our team profile visually appealing, we will leverage CSS for styling. We will customize fonts, colors, borders, and spacing to ensure that each team member's section is well-designed. CSS will help us achieve the desired look and layout, making our team profile visually pleasing.

  
  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&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;
    background: #222;
}
.container{
    position: relative;
    width: 600px;
    height: 600px;
    border: 1px solid #f5f5f5;
    border-radius: 50%;
}
.container .icon{
    position: relative;
    width: 100%;
    height: 100%;
    left: -50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.container .icon .imgBx{
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    transition: 0.5s;
    border: 1px solid #fff;
    box-shadow: 0 0 0 4px #222,
    0 0 0 6px #fff;
    transform: rotate(calc(360deg/8 * var(--i)));
    transform-origin: 340px;
    z-index: 100;
    overflow: hidden;
}
.container .icon .imgBx:hover{
    margin-top: -10px;
}
.container .icon .imgBx.active{
    box-shadow: 0 0 0 4px #222,
    0 0 0 10px #ff1d50;
}
.container .icon .imgBx img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    transform: rotate(calc(-360deg/8 * var(--i)));
    transition: 0.5s;
    filter: grayscale(1);
}
.container .icon .imgBx.active img{
    filter: grayscale(0);
}
.content{
    position: absolute;
    inset: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.content:before{
    content: '';
    position: absolute;
    inset: 70px;
    border: 4px solid transparent;
    border-left: 15px solid #f37673;
    border-right: 15px solid #fff;
    border-radius: 50%;
    animation: anim1 5s linear infinite;
    z-index: 1;
    pointer-events: none;
}
@keyframes anim1{
    0%
    {
        rotate: 0deg;
    }
    100%
    {
        rotate: 360deg;
    }
}
.content:after{
    content: '';
    position: absolute;
    inset: 125px;
    border: 4px solid transparent;
    border-top: 28px solid #457b9d;
    border-bottom: 18px solid #f1faee;
    border-radius: 50%;
    animation: anim2 2.6s linear infinite;
    z-index: 1;
    pointer-events: none;
}
@keyframes anim2{
    0%
    {
        rotate: 360deg;
    }
    100%
    {
        rotate: 0deg;
    }
}
.contentBx{
    position: absolute;
    transform: scale(0);
    transition: 0.5s;
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.contentBx.active{
    transform: scale(1);
    opacity: 1;
    transition-delay: 0.5s;
}
.contentBx .card{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    grid-auto-flow: 15px;
}
.contentBx .card .imgBx{
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 10px;
    overflow: hidden;
}
.contentBx .card .imgBx 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{
    margin-top: 10px;
    position: relative;
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff;
    line-height: 1em;
    text-transform: uppercase;
    text-align: center;
}
.contentBx .card .textBx h2 span{
    font-size: 0.65em;
    color: #fff;
    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: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    background: #444;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: 0.5s;
}
.contentBx .card .textBx .sci li a:hover{
    background: #2196f3;
}

JavaScript: The magic happens with JavaScript. We will incorporate JavaScript to introduce animation effects that bring life to the team profile. These effects may include hover effects, transitions, or even interactive elements. JavaScript will enable us to make our team profile dynamic and engaging.

Key components of our team profile with animation effect:

Team Member Sections: Each team member will have their dedicated section with a photo, bio, and contact information.

Hover Effects: Using JavaScript, we will add hover effects that can change the appearance of a team member's section when a user hovers their mouse over it. This could include enlarging the image, adding a shadow, or displaying additional information.

Transitions: We'll implement smooth transitions to give our team profile a polished look. When a user interacts with the profile, elements will transition seamlessly, creating a more interactive and user-friendly experience.

Interactive Elements: For more advanced profiles, you can include interactive elements such as buttons or links for direct communication with team members or links to their social media profiles.

Responsiveness: We will ensure that our team profile is responsive, adapting to different screen sizes and devices, so your audience can enjoy the same experience regardless of how they access your profile.

By the end of this post, you will have the knowledge and code snippets to create a captivating team profile with animation effects, enhancing your website, portfolio, or any other platform where you wish to introduce your team to the world.

So, let's dive into the exciting world of web development and create a team profile that not only introduces your team but also leaves a memorable impression on your visitors. Stay tuned for the step-by-step guide and coding examples to bring this concept to life.

Click to Download Source Code --> DOWNLOAD

Thank you for using Dev.Trinetra.

Facebook SDK (Plugin)

Team Profile With Animation Effect

About That:

Post a Comment