Страница прокрутки конфликта с прокруткой на расширение видео ⇐ Javascript

[Anonymous]

У меня трудно установить увеличение фонового видео на YouTube для движения прокрутки. Я редактирую сайт, сделанный с помощью Scroll Locomotiv, и пытаюсь создать анимацию, к сожалению, создает «помехи» с помощью свитка страницы, создавая перерывы и движения вверх и вниз, когда я добираюсь до двух концов прокрутки (сначала прокручивая вниз, а затем отступает). Я опубликую раздел относительно видео и CSS и JavaScript, который я написал. В основном я хотел бы, чтобы анимация видео на YouTube была открыта по ширине 1280px и при прокрутке до 100% страницы. PrettyPrint-Override ">

Код: Выделить всё

document.addEventListener("DOMContentLoaded", function () {
const scrollContainer = document.querySelector("[data-scroll-container]");
const youtubeVideoContainer = document.querySelector(".youtube-bg");

if (scrollContainer && youtubeVideoContainer) {
// Un'unica istanza di Locomotive Scroll
const scroll = new LocomotiveScroll({
el: scrollContainer,
smooth: true,
getDirection: true,
multiplier: 0.6,
firefoxMultiplier: 50,
resetNativeScroll: true
});

const initialWidth = 1280;
const maxWidth = window.innerWidth;
const sectionUp = document.querySelector("#up"); // Sezione con il video di sfondo

scroll.on("scroll", (obj) => {
const scrollY = obj.scroll.y;
const sectionTop = sectionUp.offsetTop;
const sectionHeight = sectionUp.offsetHeight;

if (scrollY > sectionTop && scrollY < sectionTop + sectionHeight) {
// Calcola la percentuale di progressione dello scroll
let progress = (scrollY - sectionTop) / sectionHeight;
progress = Math.max(0, Math.min(1, progress));

// Calcola la nuova larghezza del video
let newWidth = initialWidth + progress * (maxWidth - initialWidth);
newWidth = Math.min(newWidth, maxWidth); // Assicura che non superi il 100%

// Applica la nuova larghezza
youtubeVideoContainer.style.width = newWidth + "px";
}
});
} else {
console.error("Elemento data-scroll-container o .youtube-bg non trovato");
}
});< /code>
.portfolio-showcase {
position: relative;
z-index: 1;
}

.youtube-bg {
position: absolute;
bottom: 100px;
left: 50%;
transform: translateX(-50%);
width: 1280px; /* larghezza iniziale */
height: auto;
aspect-ratio: 16 / 9;
overflow: hidden;
z-index: -1;
transition: width 0.5s ease-out; /* Transizione più fluida */
}

#youtube-video {
width: 100%;
height: 100%;
}

.youtube-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6); /* Sovrapposizione nera per il video */
pointer-events: none;
}

.page-head-footer-overlay-fix {
height: auto;
max-height: 100vh;
overflow: hidden;
}

iframe {
pointer-events: none;
}< /code>






















Подробнее здесь: [url]https://stackoverflow.com/questions/79547253/enlargement-video-background-scroll-conflict-scroll-page-locomotiv-scroll[/url]