<div class="main-sect-first-word">Transforming Businesses
</div>
<div class="main-sect-second-word"> Through
<div class="main-switch">
<div class="switch-wrapper">
<div class="one switch">
<div class="one circle"><span></span></div>
<div class="word">Digitally</div>
</div>
</div>
<div class="switch-wrapper">
<div class="two switch">
<div class="two circle"><span></span></div>
<div class="word">Creatively</div>
</div>
</div>
<div class="switch-wrapper">
<div class="three switch">
<div class="three circle"><span></span></div>
<div class="word">Strategically</div>
</div>
</div>
</div>
</div>
.one.switch:before {
animation: bgExpand1 2.5s ease-in-out infinite alternate;
}
.one.circle {
animation: toggleSwitch1 2.5s ease-in-out infinite alternate;
}
.two.circle {
animation: toggleSwitch2 2.5s ease-in-out infinite alternate;
}
.two.switch:before {
animation: bgExpand2 2.5s ease-in-out infinite alternate;
}
.three.circle {
animation: toggleSwitch3 2.5s ease-in-out infinite alternate;
}
.three.switch:before {
animation: bgExpand3 2.5s ease-in-out infinite alternate;
}
.one.switch:before {
animation: bgExpand1 2.5s ease-in-out infinite alternate;
}
.two.switch:before {
animation: bgExpand2 2.5s ease-in-out infinite alternate;
}
.three.switch:before {
animation: bgExpand3 2.5s ease-in-out infinite alternate;
}
@keyframes toggleSwitch3 {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(318px);
}
}
@keyframes bgExpand3 {
0% {
width: 60px;
}
100% {
width: 385px;
}
}
@keyframes toggleSwitch2 {
0% {
transform: translateX(0);
}
100% {
transform: translateX(262px);
}
}
@keyframes bgExpand2 {
0% {
width: 60px;
}
100% {
width: 325px;
}
}
@keyframes toggleSwitch1 {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(206px);
}
}
@keyframes bgExpand1 {
0% {
width: 60px;
}
100% {
width: 270px;
}
}
.one.switch {
width: 270px;
}
.two.switch {
width: 325px;
}
.three.switch {
width: 385px;
}
.switch {
position: relative;
height: 65px;
border-radius: 100px;
overflow: hidden;
background-color: transparent;
margin-bottom: 20px;
margin-top: 5px;
}
.switch::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
border-radius: 100px;
z-index: 0;
background: linear-gradient(90deg, #89d501 0%, #33b1ad 100%);
box-shadow: 1.673px -8.366px 41.829px 0px rgba(0, 0, 0, 0.2) inset;
}
.circle {
width: 58px;
height: 58px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
background: linear-gradient(90deg, #89d501 0%, #33b1ad 100%);
padding: 4px;
box-sizing: border-box;
position: absolute;
top: 3px;
left: 5px;
z-index: 4;
}
.circle span {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
border-radius: 50%;
background: #f2f2f2;
font-size: 18px;
font-weight: bold;
}
.word {
position: absolute;
top: 9%;
left: 20px;
opacity: 0;
transition: opacity 2.2s ease;
z-index: 2;
color: #f3f3f3;
text-align: start;
font-style: normal;
line-height: normal;
font-size: 42px;
display: inline-block;
overflow: hidden;
white-space: nowrap;
width: 0;
animation: expand-collapse 5s ease-in-out infinite;
}
@keyframes expand-collapse {
0% {
width: 0;
opacity: 0;
}
45% {
width: 100%;
opacity: 1;
}
100% {
width: 0;
opacity: 0;
}
}
.main-heading .title {
display: flex;
flex-wrap: wrap;
position: relative;
line-height: 70px;
white-space: nowrap;
}
<script>
const items = document.querySelectorAll('.switch-wrapper');
let currentIndex = 0;
const animationDuration = 5000;
function startCycle() {
items.forEach((item) => {
item.style.display = 'none';
});
function showNextSwitch() {
items[currentIndex].style.display = 'none';
const currentItem = items[currentIndex];
currentItem.querySelectorAll('.circle, .switch:before').forEach((el) => {
el.style.animation = 'none';
el.offsetHeight;
el.style.animation = '';
});
currentIndex = (currentIndex + 1) % items.length;
items[currentIndex].style.display = 'block';
}
items[currentIndex].style.display = 'block';
setInterval(showNextSwitch, animationDuration);
}
startCycle();
</script>
<!-- circle-animtion-end -->
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.main-image-wrapper {
z-index: 0;
}
.mainhomesect .image {
position: absolute;
width: 100%;
max-width: 650px;
object-fit: contain;
transition: transform 8s ease-in-out;
}
img#image1 {
transform: translate(48vw, -30vh);
}
img#image2 {
transform: translate(-1vw, -30vh);
}
img#image3 {
transform: translate(-39vw, 20vh);
}
img#image4 {
transform: translate(-1vw, 72vh);
}
img#image5 {
transform: translate(48vw, 72vh);
}
img#image6 {
transform: translate(56vw, 20vh);
}
</style>
</head>
<body>
<div class="main-image-wrapper">
<img src="https://mmcgbl.com/wp-content/uploads/2025/01/aerial.webp" alt="Image 1" class="image" id="image1">
<img src="https://mmcgbl.com/wp-content/uploads/2025/01/getfit.webp" alt="Image 2" class="image" id="image2">
<img src="https://mmcgbl.com/wp-content/uploads/2025/01/howwe.webp" alt="Image 3" class="image" id="image3">
<img src="https://mmcgbl.com/wp-content/uploads/2025/01/aerial.webp" alt="Image 1" class="image" id="image4">
<img src="https://mmcgbl.com/wp-content/uploads/2025/01/getfit.webp" alt="Image 2" class="image" id="image5">
<img src="https://mmcgbl.com/wp-content/uploads/2025/01/howwe.webp" alt="Image 3" class="image" id="image6">
</div>
<script>
const positions = [
{ x: 48, y: -30 }, //img1
{ x: -1, y: -30 }, //img2
{ x: -39, y: 20 }, //img 3
{ x: -1, y: 72 }, //img 4
{ x: 48, y: 72 }, //img5
{ x: 56, y: 20 } //img 6
];
const images = [
document.getElementById('image1'),
document.getElementById('image2'),
document.getElementById('image3'),
document.getElementById('image4'),
document.getElementById('image5'),
document.getElementById('image6')
];
const animateImages = () => {
const lastPosition = positions.pop();
positions.unshift(lastPosition);
images.forEach((image, index) => {
const pos = positions[index];
image.style.transform = `translate(${pos.x}vw, ${pos.y}vh)`;
});
};
setTimeout(() => {
setInterval(animateImages, 8000);
animateImages();
}, 4000);
</script>
</body>
</html>
