Full Code for the video is are as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi-Portal Navigation Effect</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #0e0e0e;
overflow: hidden;
font-family: 'Poppins', sans-serif;
color: #fff;
}
.portal-btn {
padding: 20px 50px;
color: white;
font-size: 24px;
border: none;
border-radius: 50px;
cursor: pointer;
position: absolute;
z-index: 3;
overflow: hidden;
text-transform: uppercase;
letter-spacing: 2px;
transition: transform 0.4s ease, opacity 0.4s ease;
}
/* Button Colors */
#btn1 {
background: linear-gradient(135deg, #6e45e2, #88d3ce);
}
#btn2 {
background: linear-gradient(135deg, #ff8c00, #ffb347);
}
#btn3 {
background: linear-gradient(135deg, #ff00ff, #ff77ff);
}
/* Text Line Animation */
.portal-btn span {
position: relative;
display: inline-block;
}
.portal-btn span::before, .portal-btn span::after {
content: '';
position: absolute;
height: 3px;
width: 0;
background: white;
top: 50%;
transition: width 0.4s ease;
}
.portal-btn span::before {
left: -30px;
}
.portal-btn span::after {
right: -30px;
}
.portal-btn:hover span::before,
.portal-btn:hover span::after {
width: 20px;
}
.portal {
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: radial-gradient(circle, #88d3ce 0%, transparent 70%);
border-radius: 50%;
transform: translate(-50%, -50%);
z-index: 2;
transition: all 1.5s ease;
}
.portal.active {
width: 200vw;
height: 200vh;
}
.portal.behind {
z-index: 1;
}
.new-world {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
color: #fff;
font-size: 50px;
opacity: 0;
transition: all 1s ease 1s;
z-index: 3;
}
.show-world {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
/* Hide Next Button Initially */
.hidden {
opacity: 0;
pointer-events: none;
}
</style>
</head>
<body>
<!-- First Button -->
<button class="portal-btn" id="btn1" onclick="openPortal('portal1', 'btn2', '#6e45e2')">
<span>Step Into the Purple Mystery</span>
</button>
<!-- Second Button -->
<button class="portal-btn hidden" id="btn2" onclick="openPortal('portal2', 'btn3', '#ff8c00')">
<span>Dive Into the Orange Inferno</span>
</button>
<!-- Third Button -->
<button class="portal-btn hidden" id="btn3" onclick="openPortal('portal3', null, '#ff00ff')">
<span>Enter the Magenta Madness</span>
</button>
<!-- Portals -->
<div class="portal" id="portal1"></div>
<div class="portal" id="portal2"></div>
<div class="portal" id="portal3"></div>
<!-- Final Reveal -->
<div class="new-world" id="newWorld">Welcome!!! Follow !!! Like !!! Share</div>
<script>
function openPortal(portalId, nextButtonId, color) {
const portal = document.getElementById(portalId);
portal.style.background = `radial-gradient(circle, ${color} 0%, transparent 70%)`;
portal.classList.add('active');
const currentBtn = event.currentTarget;
currentBtn.style.transform = 'scale(0.8)';
currentBtn.style.opacity = '0';
setTimeout(() => {
currentBtn.style.display = 'none';
portal.classList.add('behind'); // Send portal behind for next interaction
if (nextButtonId) {
const nextBtn = document.getElementById(nextButtonId);
nextBtn.classList.remove('hidden');
nextBtn.style.top = '50%';
nextBtn.style.left = '50%';
nextBtn.style.transform = 'translate(-50%, -50%)';
} else {
// Final Reveal
document.getElementById('newWorld').classList.add('show-world');
}
}, 1500);
}
</script>
</body>
</html>
Top comments (0)