Navbar
스크롤을 내려 화면을 내려 섹션을 넘을 때마다 상단의 navBar도 색이 바뀌며 섹션이 넘어감.navbar는 고정되어 있고 실질적으로 색이변하는 건.Trans 클래스.
css를 보면
.trans {
position: absolute;
z-index: -10;
background-color: coral;
}이 trans 클래스를 이동시켜야 한다.
커스텀 데이터 속성(custom data attributes)이라고 불리우는 "data-" 속성의 역할은,
웹페이지를 작성하는 사람이, HTML에 지정되어 있지 않는
새로운 속성을 만들어서, 태그에 추가할 수 있게 해준다.
데이터 속성.
intersection observer 는 Target Element 가 화면에 노출되었는 지 여부를 간단하게 구독할 수 있는 API 이다.
const options = {threshold: 0.7,};
threshold: 0.7 은 대상 요소가 root 에 지정된 요소 내에서 100% 보여질 때 콜백이 호출될 것을 의미합니다.
즉 70프로 보이면 콜백 함수 실행.
let observer = new IntersectionObserver(callback, options);
즉 페이지가 내려가는 걸 인식해서 상단의 navbar를 바꾸게 해준다.
IntersectionObserver.observe()
const coordinates = activeLink.getBoundingClientRect();Navbar 이동
navbar의 섹션을 누르면 그 위치로 페이지가 부드럽게 스크롤 되어 내려간다.
외부 라이브러리를 cdn으로 받아와서 사용.
navbar 확대.
간단한 애니메이션
navbar에 커서를 갖다대면 확대되면서 배경과 링크색이 바뀐다.
css
/* Dynamic Classes */
.link-grow {
transform: scale(2);
background-color: rgb(50, 209, 248);
}
커서의 크기가 커지게 된다.
.hovered-link {
color: rgb(245, 0, 0);
}
커서가 위치한 링크의 텍스트 색이 바뀜.
.img-focus {
height: 5rem;
width: 5rem;
}위와 같은 클래스를 js로 부여해주면 된다.
navLinks.forEach(function (link) {
link.addEventListener("mouseout", function () {
mouseCursor.classList.remove("link-grow");
link.classList.remove("hovered-link");
});랜덤 색깔
rgb의 빨강 파랑 녹색의 색값을 랜덤하게 각각 얻어 그걸 반환하면 된다.
const colorString = rgb(${color1}, ${color2}, ${color3});에 대해서.
function getRandomNum() { return Math.floor(Math.random() * 256);}으로 랜덤 넘버를 주고. 반환하면 랜덤한 색이 채워지게 된다.
진행도바
settimeout사용. 넓이 만큼을 %로 채움
이미지 캐러셀
추천 슬라이더
애니메이션 활용.
.slide.active {
display: block;
animation: slide 1s linear;
}animation 뒤에 silde라는 이름을 지정하고 그 형식을 정한다.
slide는
@keyframes slide {
0% {
transform: translateX(-2rem);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}텍스트를 옆으로 2rem만큼 옮겨 슬라이드 효과를 주고 투명도 0~1로 전환하는 효과도 준다.
이를 기반으로 슬라이드 제작.
키보드 앱
event.path란 현재의 노드로부터 최상위 노드까지 역순으로 되짚어감.
즉 path[0]는 자기자신, 그뒤로 갈수록 부모 노드로 거슬러감.
