Website

11 kevekıbhack

Open In Editor Video Publish Your Code

Website

Recommended

28 June 2025

HTML Bike Rental Website Template

13 December 2025

Holographic Portfolio Website HTML Template

26 August 2025

Movie Website HTML Template

HTML

window.addEventListener('mousemove', (e) => {

mouse.x = (e.clientX / window.innerWidth) * 2 - 1;

mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;

});

function updateUI(scrollX) {

const rawIndex = Math.round(scrollX / CONFIG.spacingX);

const safeIndex = ((rawIndex % CONFIG.slideCount) + CONFIG.slideCount) % CONFIG.slideCount;

for(let i=0; i<CONFIG.slideCount; i++) {

const el = document.getElementById(`slide-${i}`);

if(el) {

if(i === safeIndex) el.classList.add('active');

else el.classList.remove('active');

}

}

}

function animate() {

requestAnimationFrame(animate);

currentScroll += (targetScroll - currentScroll) * CONFIG.lerpSpeed;

const xMove = currentScroll * Math.cos(CONFIG.wallAngleY);

const zMove = currentScroll * Math.sin(CONFIG.wallAngleY);

camera.position.x = xMove;

camera.position.z = CONFIG.camZ - zMove;

paintingGroups.forEach((group, i) => {

const originalX = i * CONFIG.spacingX;

const distFromCam = currentScroll - originalX;

const shift = Math.round(distFromCam / totalGalleryWidth) * totalGalleryWidth;

group.position.x = originalX + shift;

});

camera.rotation.x = mouse.y * 0.05;

camera.rotation.y = -mouse.x * 0.05;

updateUI(currentScroll);

renderer.render(scene, camera);

}

window.addEventListener('resize', () => {

camera.aspect = window.innerWidth / window.innerHeight;

camera.updateProjectionMatrix();

renderer.setSize(window.innerWidth, window.innerHeight);

});

animate();

</script>

</body>

</html>

CSS

JS