헤더를 스크롤하면 인디게이터의 너비가 길어지는 효과를 구현하는 방법에 대해 정리하여 작성한 것입니다.
-헤더 스크롤 이벤트: 스크롤 시에 인디게이터 바의 너비를 조정하여 현재 위치를 알려줌.
window.addEventListener("scroll", () => {
const indicatorBar = document.querySelector(".scroll-indicator-bar");
const pageScroll = document.body.scrollTop || document.documentElement.scrollTop;
const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
const scrollValue = (pageScroll / height) * 100;
indicatorBar.style.width = scrollValue + "%";
});
window.addEventListener("scroll", () => {
const indicatorBar = document.querySelector(".scroll-indicator-bar");
const pageScroll = document.body.scrollTop || document.documentElement.scrollTop;
const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
const scrollValue = (pageScroll / height) * 100;
indicatorBar.style.width = scrollValue + "%";
});
-전체적인 코드:
<HTML>
div요소 scroll-indicator-bar를 작성하는 위치: 메뉴를 감싸는 박스 밑에 작성. (하단의 코드를 기준으로 설명.)
: 메뉴를 감싸는 nav 박스 밑에 보여야 시각적으로 보기 편하기 때문이다.
<header id="header">
<nav class="nav-bar">
<a href="index.html" id="logo">Plastic World</a>
<div class="menu-btn"></div>
<div class="navigation">
<div class="nav-items">
<a href="#sec08">Animals suffering</a>
<a href="zero-waste.html">Zero-waste</a>
<a href="market.html">Market</a>
</div>
</div>
</nav>
<div class="scroll-indicator-container">
<div class="scroll-indicator-bar"></div>
</div>
</header>
<CSS>
/*Scroll indicator Bar===========================================*/
.scroll-indicator-container{
width:100%;
height:5px;
}
/*bar*/
.scroll-indicator-bar{
background: #b9b9b9;
width:0%;
height:3px;
box-shadow: 0 3px 52px #7cc8ff, 0 1px 50px #81cbff;
}
<Javascript>
//javascript for the scroll indicator
//scroll 이벤트 리스너를 만듦.
window.addEventListener("scroll", () => {
//html에서 scroll-indicator-bar인 클래스를 찾는다.
const indicatorBar = document.querySelector(".scroll-indicator-bar");
//현재 페이지의 스크롤 위치(수직).
const pageScroll = document.body.scrollTop || document.documentElement.scrollTop;
//문서의 총 높이(전체높이) - 현재 뷰포트의 높이 = 스크롤 가능한 전체 높이를 계산.
const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
//pageScroll을 전체 높이로 나누고, 100을 곱하여 스크롤 위치의 백분율을 계산합니다. 이는 스크롤 인디케이터 바의 너비를 나타냅니다.
const scrollValue = (pageScroll / height) * 100;
//indicatorBar.style.width를 사용하여 스크롤 인디케이터 바의 너비를 조정합니다. scrollValue에 "%"를 추가하여 백분율 값으로 설정합니다.
indicatorBar.style.width = scrollValue + "%";
});
-구동원리 파악.
원리 파악하기 전에 알아둬야 할 식
문서 현재 스크롤 위치 백분율 구하기 : " 현재 페이지의 수직 스크롤 위치 / 문서의 총 높이 *100 "
이 값을 사용하여 클래스의 위드 값을 "동적"으로 변환시키면 된다.
(scroll-indigator-bar클래스 스타일의 위드 값 = 현재 위치 백분율 + "%"로 선언.)
동적으로 변환시키는 데에는 총 4개의 변수를 선언해야 한다!
(이유: 해당 코드를 구현하는데 필요한 부품이 4개 이기 때문...)
1. html에서 해당 요소의 클래스를 찾는 변수 선언. (클래스로 선언했으면-클래스, 아이디로 선언했으면 -아이디 불러오기)
2. 문서의 총 높이(전체 높이)를 알 수 있는 변수 선언.
3. 현재 페이지의 스크롤 위치를 알 수 있는 변수 선언.
4. 현재 위치를 '퍼센테이지'로 만드는 변수 선언. -> 위의 2,3번 변수를 선언한 이유.
5. scroll-indigator-bar 의 스타일의 너비 값(Widht)은 scrollValue(4번 변수) + "%" 으로 명령.
-> 스크롤 할 때마다 위드 값이 늘어나도록(+) 만든다.
Q. 왜 변수에 + "%"값을 더해요?
A: JavaScript에서 변수와 문자열을 더하는 경우, 결과는 문자열이 됩니다. JavaScript의 동적 타입 언어 특성으로 인해 발생하는 형 변환이며, "문자열 연결" 또는 "문자열 병합"이라고도 합니다.
동적으로 만들어주기 위해 값을 문자열로 병합시킴. 값을 문자열로 통일하게 하여 그 값을 사용한다.
결국 스크롤을 하면 인디게이터 너비가 늘어나서 해당 스크롤의 위치를 파악할 수 있는 헤더를 만들 수 있다.
구현 화면
: 인디게이터가 스크롤 위치에 따라 너비값이 늘어나고 있음.
-가로스크롤 : gsap사용하여 구현하는 방법.
<HTML>
하단에 타입 스크립트 소스를 작성한다.
<Javascript>
//가로 스크롤
var $sections = document.querySelectorAll(".horizon_box");
var tl = gsap.timeline({
scrollTrigger: {
trigger: ".sec4",
pin: true,
//스크롤 했을 때 요소들의 트렌지션 애니메이션 효과 수가 높을 수록 자연스럽게 붙음.
scrub: 0.3,
//start: "top top", //이건 안해줘도 잘 작동이 되네?
//이걸 해줘야 해당 위치에서 작동이 되어짐.
//안해주면 보이는 화면마다 가로스크롤이 보임.
end: "+=300%",
}
});
tl.from($sections, { x: '300%', autoAlpha: 0, duration: 2, ease: "none", stagger: 3 })
.to($sections, { duration: 3 });
gsap.registerPlugin(ScrollTrigger);
-스크롤 시 글자에 밑줄 그어지는 효과 : gsap사용하여 구현하는 방법.
<HTML>
하단에 타입 스크립트 소스를 작성한다.
<Javascript>
gsap.registerPlugin(ScrollTrigger);
//문서 내의 모든 <span> 요소를 배열로 가져오는 역할.
//forEach안의 글자는 아무거나 사용해도 됨.
gsap.utils.toArray('span').forEach((s) => {
// ScrollTrigger.create(): 인스턴스 생성-> 특정 요소의 스크롤 위치에 따라 애니메이션을 트리거 할 수 있다.
ScrollTrigger.create({
trigger: s, //트리거로 사용할 요소를 지정('s').
start: 'top center', //애니메이션이 시작될 스크롤 위치를 정한다.
toggleClass: 'active', // 스크롤 백 할 때 거꾸로 다시 돌아오게 하는 코드.
onEnter: () => s.classList.add('active'), //span 요소에 active를 붙여서 사용.
//markers: true,
})
})
