Webleb - Code-Snippets

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>

Webseite

Empfohlen

Beispiel einer Portfolio-Webseite

Beispiel einer Portfolio-Webseite

Webseite

HTML

CSS

JS

Empfohlen

Beispiel einer Portfolio-Webseite

Beispiel einer Portfolio-Webseite

Webseite

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS