<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<section class="div-section">
<ul class="circle-container fade-top-bottom" id="circle">
<li class="circle-item">Quick Transfer</li>
<li class="circle-item">SEPA & SWIFT</li>
<li class="circle-item">Send Payments</li>
<li class="circle-item">Currency Exchange</li>
<li class="circle-item">Innovation</li>
<li class="circle-item">Book a Meeting</li>
<li class="circle-item">Quick Transfer</li>
<li class="circle-item">SEPA & SWIFT</li>
<li class="circle-item">Send Payments</li>
<li class="circle-item">Currency Exchange</li>
<li class="circle-item">Innovation</li>
<li class="circle-item">Book a Meeting</li>
<li class="circle-item">Quick Transfer</li>
<li class="circle-item">SEPA & SWIFT</li>
<li class="circle-item">Send Payments</li>
<li class="circle-item">Currency Exchange</li>
<li class="circle-item">Innovation</li>
<li class="circle-item">Book a Meeting</li>
</ul>
</section>
body {
min-height: 100vh;
margin: 0;
background: #7fd8ff;
overflow-x: hidden;
}
.div-section {
width: 100vw;
height: 100vh;
position: relative;
background: #7fd8ff;
}
.circle-container {
height: 100%;
width: 100%;
overflow: hidden;
margin: auto 0px;
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
position: absolute;
top: 50%;
left: 90%;
transform: translate(-50%, -50%);
pointer-events: none;
list-style: none;
}
.circle-item {
position: absolute;
top: 50%;
left: 50%;
transform-origin: center center;
font-size: 3.8rem;
font-weight: bold;
color: #003366;
white-space: nowrap;
}
const items = document.querySelectorAll(".circle-item");
const radius = 400;
const total = items.length;
let rotation = 0;
let scrollDelta = 0;
let autoRotateSpeed = 0.01;
let scrollTimeout;
let scrollDirection = 1; // 1 for clockwise, -1 for anticlockwise
function updatePositions() {
items.forEach((el, i) => {
const angle = rotation + (i / total) * Math.PI * 2;
const x = Math.cos(angle) * radius;
const y = Math.sin(angle) * radius;
el.style.transform = `translate(${x}px, ${y}px)`;
});
}
// Handle scroll input
window.addEventListener("wheel", (e) => {
const delta = e.deltaY * 0.006;
scrollDelta += delta;
// Detect scroll direction
scrollDirection = delta > 0 ? 1 : -1;
// Reset timeout to ensure smooth transition
clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(() => {
// After scroll ends, set autoRotateSpeed in the same direction
autoRotateSpeed = Math.abs(autoRotateSpeed) * scrollDirection;
}, 300); // delay before returning to auto
});
// Animate orbit
gsap.ticker.add(() => {
// Apply both scroll delta and auto-rotation
rotation += autoRotateSpeed + scrollDelta;
scrollDelta *= 0.9; // decay scroll effect
updatePositions();
});
updatePositions(); // first render
