Table of Contents
Introduction: Bubble Team Section
Elevate your website’s appeal by incorporating a Bubble Team Section in JavaScript. This dynamic feature adds flair to displaying your team, employing smooth animations through matrix transformations. In this tutorial, we’ll walk you through the steps of setting up a captivating Bubble Team Section using the provided source code.
This Bubble Team Section project not only showcases your team members but also enhances user interaction. Through unique positioning and vibrant colors, each team member comes to life, creating an enjoyable and interactive experience for your website visitors. Let’s delve into the simple steps to bring this engaging Bubble Team Section to your site.
Join Our Telegram Channel to Download the Project Source Code: Click Here
Steps to Set Up the Project: Bubble Team Section
Please follow this Step-by-Step Guide to Create and Setup the Bubble Team Section using HTML and CSS —
Start by creating a new folder for your project, Name it as you prefer. Inside it, create three files: index.html, style.css, and script.js. This organized structure sets the foundation for your Bubble Team Section.
Step 1: HTML Setup
Open index.html and add the provided HTML code. This establishes the structure of the Bubble Team Section. The <div> elements with the class team_circle represent team members, and the <div> elements with the class jobPost represent job posts.
<!DOCTYPE html>
<html lang="en">
<!-- Create Bubble Team Section -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bubble Team Section</title>
</head>
<body>
<div class="team_ourTeam">
<div class="team_inOurTeam">
<div class="team_circle aa teamMember des se founder team_lg"
style="background: url('https://borgholm.qodeinteractive.com/wp-content/uploads/2020/07/team-image-2.jpg') center center no-repeat; background-size: contain;">
</div>
<!-- #################### -->
<div class="team_circle jobPost designers" onclick="onclickJobPost(this)">
<span>Communication Designers</span>
</div>
<!-- #################### -->
<div class="team_circle ab teamMember se team_md"
style="background: url('https://borgholm.qodeinteractive.com/wp-content/uploads/2020/07/team-image-1.jpg') center center no-repeat; background-size: contain;">
</div>
<div class="team_circle ac teamMember des ca se founder team_lg"
style="background: url('https://borgholm.qodeinteractive.com/wp-content/uploads/2020/07/team-image-3.jpg') center center no-repeat; background-size: contain;">
</div>
<div class="team_circle ad teamMember dev des team_md"
style="background: url('https://borgholm.qodeinteractive.com/wp-content/uploads/2020/07/team-image-4.jpg') center center no-repeat; background-size: contain;">
</div>
<div class="team_circle ae teamMember animator team_md"
style="background: url('https://borgholm.qodeinteractive.com/wp-content/uploads/2020/07/team-image-5.jpg') center center no-repeat; background-size: contain;">
</div>
<!-- #################### -->
<div class="team_circle jobPost founders" onclick="onclickJobPost(this)">
<span>Founders</span>
</div>
<!-- #################### -->
<!-- #################### -->
<div class="team_circle jobPost developers" onclick="onclickJobPost(this)">
<span>Web Developer</span>
</div>
<!-- #################### -->
<div class="team_circle af teamMember des ca illus team_lg"
style="background: url('https://borgholm.qodeinteractive.com/wp-content/uploads/2020/07/team-image-6.jpg') center center no-repeat; background-size: contain;">
</div>
<!-- #################### -->
<div class="team_circle jobPost illustrators" onclick="onclickJobPost(this)">
<span>Illustrators</span>
</div>
<!-- #################### -->
<div class="team_circle ag teamMember ca illus team_lg"
style="background: url('https://borgholm.qodeinteractive.com/wp-content/uploads/2020/07/team-image-7.jpg') center center no-repeat; background-size: contain;">
</div>
<!-- #################### -->
<div class="team_circle jobPost animators" onclick="onclickJobPost(this)">
<span>Animators</span>
</div>
<!-- #################### -->
<div class="team_circle ah teamMember ca illus animator team_lg"
style="background: url('https://borgholm.qodeinteractive.com/wp-content/uploads/2020/07/team-image-6.jpg') center center no-repeat; background-size: contain;">
</div>
<div class="team_circle ai teamMember des animator team_lg"
style="background: url('https://borgholm.qodeinteractive.com/wp-content/uploads/2020/07/team-image-3.jpg') center center no-repeat; background-size: contain;">
</div>
<!-- #################### -->
<div class="team_circle jobPost conceptArtists" onclick="onclickJobPost(this)">
<span>Concept Artists</span>
</div>
<!-- #################### -->
<div class="team_circle aj teamMember founder illus team_lg"
style="background: url('https://borgholm.qodeinteractive.com/wp-content/uploads/2020/07/team-image-6.jpg') center center no-repeat; background-size: contain;">
</div>
<!-- #################### -->
<div class="team_circle jobPost salesExecutives" onclick="onclickJobPost(this)">
<span>Sales Executives</span>
</div>
<!-- #################### -->
<div class="team_circle ak teamMember animator team_md"
style="background: url('https://borgholm.qodeinteractive.com/wp-content/uploads/2020/07/team-image-7.jpg') center center no-repeat; background-size: contain;">
</div>
</div>
</div>
</body>
</html>Step 2: Style Your Section
Navigate to style.css and add the provided CSS code. This styling ensures a visually appealing layout. Each team member is uniquely positioned using the transform property, and background colors distinguish different roles.
.team_inOurTeam {
max-width: 1170px;
margin: auto;
padding: 100px 20px 0 20px;
height: 100vh;
box-sizing: unset;
font-family: sans-serif;
}
.team_circle {
width: 135px;
height: 135px;
background: pink;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-weight: bold;
cursor: pointer;
transition: .7s;
margin: 6px;
text-align: center;
padding: 30px;
}
.aa {
transform: matrix(1, 0, 0, 1, 210, 0)
}
.designers {
transform: matrix(1, 0, 0, 1, 50, -200)
}
.ae {
transform: matrix(1, 0, 0, 1, 470, -1150)
}
.ac {
transform: matrix(1, 0, 0, 1, 500, -460)
}
.founders {
transform: matrix(1, 0, 0, 1, 700, -1220)
}
.ad {
transform: matrix(1, 0, 0, 1, 770, -520)
}
.aj {
transform: matrix(1, 0, 0, 1, 830, -2950)
}
.ab {
transform: matrix(1, 0, 0, 1, 310, -120)
}
.af {
transform: matrix(1, 0, 0, 1, 0, -1220)
}
.illustrators {
transform: matrix(1, 0, 0, 1, 80, -910)
}
.ag {
transform: matrix(1, 0, 0, 1, 470, -1440)
}
.ah {
transform: matrix(1, 0, 0, 1, 250, -1620)
}
.ak {
transform: matrix(1, 0, 0, 1, 50, -2780)
}
.animators {
transform: matrix(1, 0, 0, 1, 900, -1600)
}
.salesExecutives {
transform: matrix(1, 0, 0, 1, 990, -2880)
}
.ai {
transform: matrix(1, 0, 0, 1, 720, -1880)
}
.conceptArtists {
transform: matrix(1, 0, 0, 1, 550, -2100)
}
.developers {
transform: matrix(1, 0, 0, 1, 260, -840)
}
.developers {
background-color: #333;
}
.designers {
background-color: #1EA2E0;
}
.animators {
background-color: #8165A6;
}
.illustrators {
background-color: #db8433;
}
.founders {
background-color: #22ca24;
}
.conceptArtists {
background-color: #ff60b0;
}
.salesExecutives {
background-color: #55cfff;
}
.jobPost {
width: 80px;
height: 80px;
flex-direction: column;
}
.teamMember {
filter: grayscale(100%)
}
.team_md {
width: 120px;
height: 120px;
}
.team_lg {
width: 200px;
height: 200px;
}
@media (max-width: 1400px) {
.team_inOurTeam {
height: calc(100vh + 250px);
}
}
@media (max-width: 1200px) {
.s-m-waqas {
transform: matrix(1, 0, 0, 1, 210, 0)
}
.designers {
transform: matrix(1, 0, 0, 1, 50, -200)
}
.waqas {
transform: matrix(1, 0, 0, 1, 470, -1150)
}
.salman-ahmed {
transform: matrix(1, 0, 0, 1, 500, -460)
}
.founders {
transform: matrix(1, 0, 0, 1, 700, -1220)
}
.owais-ahmed {
transform: matrix(1, 0, 0, 1, 310, -120)
}
.junaid-afzal {
transform: matrix(1, 0, 0, 1, 0, -1220)
}
.illustrators {
transform: matrix(1, 0, 0, 1, 80, -910)
}
.bilal-ahmed {
transform: matrix(1, 0, 0, 1, 470, -1440)
}
.syed-faizan-raza {
transform: matrix(1, 0, 0, 1, 250, -1620)
}
.haris-khan {
transform: matrix(1, 0, 0, 1, 50, -2780)
}
.conceptArtists {
transform: matrix(1, 0, 0, 1, 550, -2100)
}
.developers {
transform: matrix(1, 0, 0, 1, 260, -840)
}
.noman-ahmed {
transform: matrix(1, 0, 0, 1, 460, -2080)
}
.animators {
transform: matrix(1, 0, 0, 1, 720, -1480)
}
.salesExecutives {
transform: matrix(1, 0, 0, 1, 0, -2250)
}
.usama-baig {
transform: matrix(1, 0, 0, 1, 700, -490)
}
.syed-sohaib {
transform: matrix(1, 0, 0, 1, 180, -1600)
}
.team_inOurTeam {
height: calc(100vh + 500px);
}
}
@media (max-width: 1000px) {
.s-m-waqas {
transform: matrix(1, 0, 0, 1, 110, 0)
}
.designers {
transform: matrix(1, 0, 0, 1, -50, -200)
}
.waqas {
transform: matrix(1, 0, 0, 1, 370, -1150)
}
.salman-ahmed {
transform: matrix(1, 0, 0, 1, 400, -460)
}
.owais-ahmed {
transform: matrix(1, 0, 0, 1, 210, -120)
}
.junaid-afzal {
transform: matrix(1, 0, 0, 1, -100, -1220)
}
.illustrators {
transform: matrix(1, 0, 0, 1, -20, -910)
}
.syed-faizan-raza {
transform: matrix(1, 0, 0, 1, 150, -1620)
}
.haris-khan {
transform: matrix(1, 0, 0, 1, -50, -2780)
}
.conceptArtists {
transform: matrix(1, 0, 0, 1, 450, -2100)
}
.developers {
transform: matrix(1, 0, 0, 1, 160, -840)
}
.noman-ahmed {
transform: matrix(1, 0, 0, 1, 360, -2080)
}
.animators {
transform: matrix(1, 0, 0, 1, 580, -1520)
}
.salesExecutives {
transform: matrix(1, 0, 0, 1, -100, -2250)
}
.usama-baig {
transform: matrix(1, 0, 0, 1, 0, -1000)
}
.syed-sohaib {
transform: matrix(1, 0, 0, 1, 80, -1600)
}
.bilal-ahmed {
transform: matrix(1, 0, 0, 1, 330, -1440)
}
.founders {
transform: matrix(1, 0, 0, 1, 560, -1230)
}
.team_inOurTeam {
padding: 10px;
padding-left: 40px;
}
}
@media (max-width: 800px) {
.team_circle {
float: left;
}
.s-m-waqas {
transform: matrix(1, 0, 0, 1, 0, 0)
}
.designers {
transform: matrix(1, 0, 0, 1, 0, 0)
}
.waqas {
transform: matrix(1, 0, 0, 1, 0, 0)
}
.salman-ahmed {
transform: matrix(1, 0, 0, 1, 0, 0)
}
.owais-ahmed {
transform: matrix(1, 0, 0, 1, 0, 0)
}
.junaid-afzal {
transform: matrix(1, 0, 0, 1, 0, 0)
}
.illustrators {
transform: matrix(1, 0, 0, 1, 0, 0)
}
.syed-faizan-raza {
transform: matrix(1, 0, 0, 1, 0, 0)
}
.haris-khan {
transform: matrix(1, 0, 0, 1, 0, 0)
}
.conceptArtists {
transform: matrix(1, 0, 0, 1, 0, 0)
}
.developers {
transform: matrix(1, 0, 0, 1, 0, 0)
}
.noman-ahmed {
transform: matrix(1, 0, 0, 1, 0, 0)
}
.animators {
transform: matrix(1, 0, 0, 1, 0, 0)
}
.salesExecutives {
transform: matrix(1, 0, 0, 1, 0, 0)
}
.usama-baig {
transform: matrix(1, 0, 0, 1, 0, 0)
}
.syed-sohaib {
transform: matrix(1, 0, 0, 1, 0, 0)
}
.bilal-ahmed {
transform: matrix(1, 0, 0, 1, 0, 0)
}
.founders {
transform: matrix(1, 0, 0, 1, 0, 0)
}
.team_ourTeam {
margin-left: 0;
margin-right: 0;
}
.team_inOurTeam {
padding: 10px;
padding-left: 40px;
height: calc(100vh - 200px);
}
.team_md,
.team_lg,
.jobPost {
width: 40px;
height: 40px;
font-size: small;
}
}
@media (max-width: 400px) {
.team_circle {
float: left;
}
.s-m-waqas {
transform: matrix(1, 0, 0, 1, 0, 0)
}
.designers {
transform: matrix(1, 0, 0, 1, 0, 0)
}
.waqas {
transform: matrix(1, 0, 0, 1, 0, 0)
}
.salman-ahmed {
transform: matrix(1, 0, 0, 1, 0, 0)
}
.owais-ahmed {
transform: matrix(1, 0, 0, 1, 0, 0)
}
.junaid-afzal {
transform: matrix(1, 0, 0, 1, 0, 0)
}
.illustrators {
transform: matrix(1, 0, 0, 1, 0, 0)
}
.syed-faizan-raza {
transform: matrix(1, 0, 0, 1, 0, 0)
}
.haris-khan {
transform: matrix(1, 0, 0, 1, 0, 0)
}
.conceptArtists {
transform: matrix(1, 0, 0, 1, 0, 0)
}
.developers {
transform: matrix(1, 0, 0, 1, 0, 0)
}
.noman-ahmed {
transform: matrix(1, 0, 0, 1, 0, 0)
}
.animators {
transform: matrix(1, 0, 0, 1, 0, 0)
}
.salesExecutives {
transform: matrix(1, 0, 0, 1, 0, 0)
}
.usama-baig {
transform: matrix(1, 0, 0, 1, 0, 0)
}
.syed-sohaib {
transform: matrix(1, 0, 0, 1, 0, 0)
}
.bilal-ahmed {
transform: matrix(1, 0, 0, 1, 0, 0)
}
.founders {
transform: matrix(1, 0, 0, 1, 0, 0)
}
.team_ourTeam {
margin-left: 0;
margin-right: 0;
}
.team_inOurTeam {
padding: 10px;
padding-left: 30px;
}
.sm,
.team_md,
.team_lg,
.jobPost {
width: 30px;
height: 30px;
font-size: x-small;
}
}Step 3: JavaScript Functionality
In script.js, you’ll find a script enhancing user interaction. Clicking on a job post filters and highlights team members associated with that role. This engaging feature is achieved through the onclickJobPost function.
let activeFlag, typeOfCard, allTeamMembers, allJobPosts, transformProperty, theOpacity = "0.1";
let createCategory = (name, params) => {
if (!activeFlag) {
activeFlag = true;
for (let i = 0; i < params.allTeamMembers.length; i++) {
// selected will highlight
for (let i = 0; i < params.allJobPosts.length; i++) {
if (params.allJobPosts[i] != params.that) {
params.allJobPosts[i].style.opacity = theOpacity;
} else {
params.allJobPosts[i].style.opacity = "1";
}
}
// all selected will highlight
if (params.allTeamMembers[i].classList.contains(name)) {
// params.allTeamMembers[i].style.transform = "scale(1.1)";
params.allTeamMembers[i].style.opacity = "1";
} else {
// all non selected will be less visible
if (params.allTeamMembers[i] !== params.that) {
params.allTeamMembers[i].style.opacity = theOpacity;
// if any other bubble is selected, it will be back to it's original size
// params.allTeamMembers[i].style.transform = "scale(1)";
}
}
}
// params.that.style.transform = "scale(1.1)";
} else {
activeFlag = false;
for (let i = 0; i < params.allTeamMembers.length; i++) {
params.allTeamMembers[i].style.opacity = "1";
// params.allTeamMembers[i].style.transform = "scale(1)";
params.allTeamMembers[i].style.backgroundColor = "pink";
}
for (let i = 0; i < params.allJobPosts.length; i++) {
params.allJobPosts[i].style.opacity = "1";
}
// params.that.style.transform = "scale(1)";
}
}
onclickJobPost = (that) => {
typeOfCard = that.childNodes[1].innerHTML;
allTeamMembers = document.querySelectorAll(".teamMember");
allJobPosts = document.querySelectorAll(".jobPost");
let params = { that, allTeamMembers, allJobPosts };
switch (typeOfCard) {
case "Web Developer":
createCategory("dev", params)
break;
case "Communication Designers":
createCategory("des", params);
break;
case "Animators":
createCategory("animator", params);
break;
case "Illustrators":
createCategory("illus", params);
break;
case "Founders":
createCategory("founder", params);
break;
case "Concept Artists":
createCategory("ca", params);
break;
case "Sales Executives":
createCategory("se", params);
break;
}
}Conclusion:
In conclusion, you’ve successfully set up the Bubble Team Section using JavaScript, HTML, and CSS. This project not only offers a visually striking representation of your team but also allows for an interactive and engaging user experience.
As you delve into this project, remember that coding is a journey of exploration and creativity. Experiment with the code, make it your own, and enjoy the process of building something meaningful. Now, your Bubble Team Section is ready to showcase the unique talents within your team effortlessly.
Join Our Telegram Channel to Download the Project Source Code: Click Here
For your convenience, the total source code of this “Bubble Team Section” project instructional practice is accessible for download by clicking the Download Code button.
Note: Keep in mind that the way to dominate coding is practice. To enhance your skills in JavaScript, HTML & CSS, we recommend recreating other useful website elements such as Custom Button, Reviews Card, Contact Page, Navigation, Login Forms, etc.
More Categories:
Blog • Cards • Fun Project • Game • Hamburger Menu • Login / Signup • Navbar • Testimony / Reviews • To-Do List
