스크롤시 글씨 움직이기
본문
안녕하세요
pc에서 스크롤시 해당 영역에 스크롤이 도착하면 글씨를 우측 -> 좌측으로 움직이게 끔 코딩하고싶습니다.
그런데 해당영역에서 움직임이 진행되는것이아니라 처음로딩했을때부터 스크롤이 이동 진행됩니다ㅠㅠ
해당 스크롤 해당 영역에서만 글씨가 움직이게끔 가능할까요??
해당 글씨 움직임이 총2개가 있습니다.. 각각 스크롤시 해당영역에서만 움직이게끔 진행하고싶습니다!
<style>
.section-title{ margin: 0;
font-size: 200px;width: 100%;text-align: center;position: absolute;top: 50%;right: -30%;transform: translateY(-50%);z-index: -1;white-space: nowrap;}
.paralax-title{font-family: var(--font-Poppins); font-size: 20rem; color: #0981fd; opacity: 0.05; font-weight: 600;}
</style>
<div class="section-title">
<h3 class="paralax-title">TEST</h3>
</div>
<script>
let didScroll = false;
let paralaxTitles = document.querySelectorAll('.paralax-title');
const scrollInProgress = () => {
didScroll = true
}
const raf = () => {
if(didScroll) {
paralaxTitles.forEach((element, index) => {
element.style.transform = "translateX("+ window.scrollY / 10 + "%)"
})
didScroll = false;
}
requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
window.addEventListener('scroll', scrollInProgress)
</script>
답변 1
아래의 코드를 한번 참고를 해보시겠어요..
<style>
body {
height: 200vh; /* 스크롤을 위해 충분한 높이 추가 */
}
.scroll-area {
position: relative;
height: 100vh; /* 전체 화면을 차지하는 영역 */
background-color: #f0f0f0; /* 배경색 */
overflow: hidden; /* 내부 내용이 영역을 넘치지 않도록 */
}
.section-title {
margin: 0;
font-size: 200px;
width: 100%;
text-align: center;
position: absolute;
top: 50%;
right: -30%; /* 초기 위치 */
transform: translateY(-50%);
z-index: -1;
white-space: nowrap;
}
.paralax-title {
font-family: var(--font-Poppins);
font-size: 20rem;
color: #0981fd;
opacity: 0.05;
font-weight: 600;
}
</style>
<div class="scroll-area">
<div class="section-title">
<h3 class="paralax-title">TEST</h3>
</div>
</div>
<script>
let didScroll = false;
let paralaxTitles = document.querySelectorAll('.paralax-title');
let scrollArea = document.querySelector('.scroll-area');
let scrollAreaTop = scrollArea.offsetTop;
let scrollAreaHeight = scrollArea.offsetHeight;
const scrollInProgress = () => {
didScroll = true;
}
const raf = () => {
if (didScroll) {
const scrollY = window.scrollY;
// 스크롤이 특정 영역에 있는지 확인
if (scrollY >= scrollAreaTop && scrollY <= (scrollAreaTop + scrollAreaHeight)) {
const moveAmount = (scrollY - scrollAreaTop) / 10; // 이동량 계산
paralaxTitles.forEach((element) => {
element.style.transform = `translateX(${moveAmount}px)`;
});
} else {
// 영역 밖일 때 초기 위치로 되돌리기
paralaxTitles.forEach((element) => {
element.style.transform = `translateX(-30%)`; // 초기 위치 값으로
});
}
didScroll = false;
}
requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
window.addEventListener('scroll', scrollInProgress);
</script>
답변감사합니다!!