swiper.on('slideChange'), letters

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

 

const swiper = new Swiper('.swiper', {
	mousewheel: true,
	direction: 'vertical',
	speed: 1700,
	parallax: true
});

//글자 한자씩 쪼개기 
document.querySelectorAll('.header-content h1').forEach(e => {
	e.innerHTML = e.textContent.replace(/ (-|#|@){1}/g, s => s[1]+s[0]).replace(/(\S*)/g, m => {
		return m.replace(/\S(-|#|@)?/g, '<span class="letter">$&</span>')
	})
	e.querySelectorAll('.letter').forEach(function(l, i) {
		l.setAttribute('style', `z-index: -${ i }; transition-duration: ${ i/5 + 1 }s`)
	})
});

//스와이퍼 움직일때마다 글자에 css 추가 삭제 
swiper.on('slideChange', function() {
	document.querySelectorAll('.header-content__slide').forEach(function(e, i) {
		return swiper.activeIndex === i ? e.classList.add('active') : e.classList.remove('active')
	})
});

 

<div class="swiper slider">

    <div class="slider-ui">

        <div class="container header-wrapper">
            <div class="top-line">
                <div class="row">
					---생략
                    <div class="col col--center">
                        <button class="submenu anim-menu-btn">
                            <i class="anim-menu-btn__icon anim-menu-btn__icon--close"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div class="header-content">
                <div class="header-content__slide active">
                    <h1 class="letters">Grow</h1>
                </div>
                ---반복
            </div>
        </div>

    </div>

    <div class="swiper-wrapper">
        <div class="swiper-slide slider__item">
            <div class="slider__layer" data-swiper-parallax="35%" style="background-image: url(img/back.jpg);"></div>
            <div class="slider__layer" data-swiper-parallax="25%" style="background-image: url(img/middle.png);"></div>
            <div class="slider__layer" data-swiper-parallax="14%" style="background-image: url(img/front.png);"></div>
        </div>
        ...반복
    </div>

</div>