I am having difficulty setting a magnification of the background youtube video to the scroll movement. I’m editing a site made with Locomotiv Scroll and trying to create the animation unfortunately creates “interference” with the page scroll by creating breaks and up and down movements when I get to the two ends of the scroll (first scrolling down and then back up). I will post the section regarding the video and the css and javascript I wrote. Basically I would like the animation of the youtube video to open at a width of 1280px and in the scroll go up to 100% of the page.
I thank any help and suggestions
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");
}
});.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;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.min.js"></script>
<section id="up" class="section-bg-dark" data-scroll-section>
<div class="page-head-footer-overlay-fix" data-scroll data-scroll-repeat>
<!-- Portfolio Showcase -->
<div class="fullscreen portfolio-showcase wall">
<div class="youtube-bg">
<iframe
id="youtube-video"
src="https://www.youtube.com/embed/VCaCx0xOZEk?autoplay=1&mute=1&controls=0&loop=1&playlist=VCaCx0xOZEk&modestbranding=1&rel=0&showinfo=0&iv_load_policy=3"
frameborder="0"
allow="autoplay; encrypted-media"
allowfullscreen
></iframe>
<div class="youtube-overlay"></div>
</div>
<!--/ Wall Wrapper -->
<div class="wall-wrapper">
<!-- Project -->
<div class="wall-project">
<!-- Project URL -->
<!-- Project Image -->
<div class="project-image">
<video autoplay="" muted="" loop="" playsinline="">
<source src="
<?php echo get_template_directory_uri(); ?>/images/projects/ezra-brooks/ecommerce.mp4" alt="E-commerce">
</video>
</div>
<!--/ Project Image -->
<!-- Project Title -->
<div class="title">
E-commerce
</div>
<!--/ Project Title -->
</div>
<!--/ Project -->
<!-- Project -->
<div class="wall-project">
<!-- Project URL -->
<!-- Project Title -->
<div class="title">
<span class="text-scan text">Website</span>
</div>
<!--/ Project Title -->
</div>
<!--/ Project -->
<!-- Project -->
<div class="wall-project">
<!-- Project URL -->
<!-- Project Image -->
<div class="project-image">
<video autoplay="" muted="" loop="" playsinline="">
<source src="
<?php echo get_template_directory_uri(); ?>/images/projects/ezra-brooks/still_life_photography.mp4" alt="Still life photography">
</video>
</div>
<!--/ Project Image -->
<!-- Project Title -->
<div class="title">
Still life
</div>
<!--/ Project Title -->
</div>
<!--/ Project -->
<!-- Project -->
<div class="wall-project">
<!-- Project URL -->
<!-- Project Image -->
<div class="project-image">
<video autoplay="" muted="" loop="" playsinline="">
<source src="
<?php echo get_template_directory_uri(); ?>/images/projects/ezra-brooks/videoproduction.mp4">
</video>
</div>
<!--/ Project Image -->
<!-- Project Title -->
<div class="title">
Video production
</div>
<!--/ Project Title -->
</div>
<!--/ Project -->
<!-- Project -->
<div class="wall-project">
<!-- Project URL -->
<!-- Project Image -->
<div class="project-image">
<video autoplay muted loop playsinline>
<source src="
<?php echo get_template_directory_uri(); ?>/images/projects/ezra-brooks/web_developer.mp4">
</video>
</div>
<!--/ Project Image -->
<!-- Project Title -->
<div class="title">
<div class="text-underline-2">
<span class="text">Design</span>
</div>
& strategy
</div>
<!--/ Project Title -->
</div>
<!--/ Project -->
<div class="c-col-12 has-animation fade-in-up text">
<h2><span class="span text span4"><em>Agenzia di comunicazione</em> Padova.</span></h2>
</div>
</div>
<!--/ Portfolio Showcase -->
</div>
<!-- padding-top-bottom-150 end -->
<!-- background start -->
<!-- Column -->
<div class="c-col-12 has-animation fade-in-up">
<!-- Embed Video -->
<!--/ Embed Video -->
</div>
<!--/ Column -->
<!-- background end -->
</div>
</section>