백그라운드 영상과 swiper 연계

const video = document.querySelector('.video-background')

const swiperText = new Swiper('.swiper', {
	speed: 1600,
    loop:true,
	mousewheel: {  },
	pagination: {
		el: '.swiper-pagination',
		clickable: true
	},
	navigation: {
		prevEl: '.swiper-button-prev',
		nextEl: '.swiper-button-next'
	}
})
swiperText.on('slideChange', function() {
	gsap.to(video, 1.6, {
		currentTime: (video.duration / (this.slides.length - 1)) * this.realIndex,
		ease: Power2.easeOut
	})
})
swiperText.on('slideChangeTransitionStart', function() {
	video.classList.add('change')
}).on('slideChangeTransitionEnd', function() {
	video.classList.remove('change')
})

:root {
	--index: calc(1vw + 1vh);
	--swiper-theme-color: #4b4d53;
	--swiper-navigation-size: 30px;
	--swiper-navigation-sides-offset: 40px;
	--swiper-pagination-bottom: 20px;
	--swiper-pagination-color: #afb3c0;
	--swiper-pagination-bullet-inactive-color: #36373c;
	--swiper-pagination-bullet-inactive-opacity: 1;
}

<script src="libs/gsap/gsap.min.js" defer></script>
<script src="libs/swiper/swiper-bundle.min.js" defer></script>
<link rel="stylesheet" href="libs/swiper/swiper-bundle.min.css">

<div class="swiper slider">

    <div class="swiper-wrapper">

        <div class="swiper-slide slide">
            <div class="slide__content">
                <h2>Abstract</h2>
                <p>Designing for the future</p>
                <button>Join Us</button>
            </div>
        </div>
        <div class="swiper-slide slide">
            <div class="slide__content">
                <h2>Design</h2>
                <p>Designing for the future</p>
                <button>Join Us</button>
            </div>
        </div>
        <div class="swiper-slide slide">
            <div class="slide__content">
                <h2>Future</h2>
                <p>Designing for the future</p>
                <button>Join Us</button>
            </div>
        </div>
        <div class="swiper-slide slide">
            <div class="slide__content">
                <h2>Forever</h2>
                <p>Designing for the future</p>
                <button>Join Us</button>
            </div>
        </div>

    </div>

    <div class="slider-bottom">
        <div class="slider-pagination">
            <div class="swiper-pagination"></div>
        </div>
        <div class="slider-navigation">
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
    </div>

</div>

<video src="media/background2.mp4" class="video-background" muted></video>

 

프리미어로 영상 프레임 60rate로 조정후 ffmpeg 설치후 아래 텍스트 cmd 창에 복붙해야함 

ffmpeg -i background-60.mp4 -vf scale=1920:-1 -movflags faststart -vcodec libx264 -crf 20 -g 1 -pix_fmt yuv420p background.mp4