portfolio5

  const container = document.querySelector('.horizontal-scroll-container'); const scrollContent = document.querySelector('.scroll-content'); const backgroundTexts = document.querySelectorAll('.background-text'); container.addEventListener('wheel', (event) => { event.preventDefault(); const scrollAmount = event.deltaY > 0 ? 100 : -100; container.scrollLeft += scrollAmount; scrollContent.style.transform = `translateX(${-container.scrollLeft}px)`; backgroundTexts.forEach(text => { text.style.transform = `translate(${container.scrollLeft * 0.5}px, -50%)`; }); }); container.addEventListener('mouseenter', () => { scrollContent.style.animationPlayState = 'paused'; backgroundTexts.forEach(text => { text.style.animationPlayState = 'paused'; }); }); container.addEventListener('mouseleave', () => { scrollContent.style.animationPlayState = 'running'; backgroundTexts.forEach(text => { text.style.animationPlayState = 'running'; }); }); .horizontal-scroll-container { width: 100%; overflow: hidden; background-color: black; padding: 20px 0; position: relative; height: 150vh; /* Zvýšení výšky bloku o 50% */ } .scroll-content { display: flex; align-items: center; position: relative; white-space: nowrap; transition: transform 0.1s ease-in-out; } .scroll-item { position: relative; display: inline-block; margin: 0 10px; transition: transform 0.2s; } .scroll-item img { display: block; object-fit: cover; height: auto; max-height: 100%; /* Dynamická výška */ width: auto; } .scroll-item:hover { transform: scale(1.05); } .overlay-text { position: absolute; bottom: 10px; left: 10px; color: white; background-color: rgba(0, 0, 0, 0.5); padding: 5px; border-radius: 5px; } .overlay-text a { color: #ddd; font-size: 12px; text-decoration: none; } .background-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 10vw; font-weight: bold; color: white; opacity: 0.1; white-space: nowrap; transition: transform 0.1s ease-in-out; } .background-text-1 { top: 20%; animation-duration: 25s; } .background-text-2 { top: 40%; animation-duration: 20s; } .background-text-3 { top: 60%; animation-duration: 30s; } .background-text-4 { top: 80%; animation-duration: 22s; } .background-text-5 { top: 100%; animation-duration: 28s; } @keyframes scroll-item { from { transform: translateX(100%); } to { transform: translateX(-100%); } }