 Parallax Effect - 리빌 효과
				
				
					Parallax Effect - 리빌 효과
					document.querySelectorAll(".content__item__desc.reveal").forEach((el,i)=>{ if(!(el.querySelector("span"))){ const text = el.innerText; el.innerHTML = `${text}`; } }); function scroll() { //재귀함수를 이용한 스크롤값 구하기 let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop; const reveal = document.querySelectorAll(".reveal"); reveal.forEach(elem => { let revealOffset = e..
 Parallax Effect - 텍스트 효과
				
				
					Parallax Effect - 텍스트 효과
					let text = document.querySelectorAll(".content__item .content__item__desc"); //속성은 get,set, 글씨는 innerTExt로 다 함 //여러개 글씨 쪼개기 text.forEach(desc => { let splitText = desc.innerText; let splitWrap = splitText.split('').join(""); splitWrap = "" + splitWrap + "" desc.innerHTML = splitWrap; desc.setAttribute("aria-label", splitText); //웹표준/접근성준수 }) function scroll() { //재귀함수를 이용한 스크롤값 구하기 let scrollTop..
 Parallax Effect - 이질감 효과
				
				
					Parallax Effect - 이질감 효과
					function scroll() { //재귀함수를 이용한 스크롤값 구하기 let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop; document.querySelector(".scrollTop span").innerText = scrollTop; document.querySelectorAll(".content__item").forEach(item => { let offset1 = (scrollTop - item.offsetTop) * 0.1; let offset2 = (scrollTop - item.offsetTop) * 0.15; const target1 = item.querySelector("...
 Parallax Effect - 나타나기 효과
				
				
					Parallax Effect - 나타나기 효과
					function scroll(){ //재귀함수를 이용한 스크롤값 구하기 let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop; document.querySelector(".scrollTop span").innerText = scrollTop; document.querySelectorAll(".content__item").forEach(item => { if( scrollTop >= item.offsetTop - (window.innerHeight/2) ){ item.classList.add("show"); } else { item.classList.remove("show"); } }); reque..
 Parallax Effect - 숨김 메뉴
				
				
					Parallax Effect - 숨김 메뉴
					document.querySelectorAll("#parallax__nav li a").forEach(li => { li.addEventListener("click", (e) => { e.preventDefault(); document.querySelector(li.getAttribute("href")).scrollIntoView({ behavior:"smooth" }) document.querySelectorAll("#parallax__nav li a").forEach(li => { li.parentElement.classList.remove("active"); }); li.parentElement.classList.add("active"); }) }) let nowScroll = true; let l..
 Parallax Effect -
				
				
					Parallax Effect -
					document.querySelectorAll("#parallax__dot a").forEach(el => { el.addEventListener("click", e => { e.preventDefault(); // window.scroll(0, 1000); // window.scroll({left:0, top: 1000 }); // window.scroll({left:0, top: 1000, behavior: "smooth" }); // window.scrollTo(0, 1000); // window.scrollTO({left:0, top: 1000 }); // window.scrollTo({left:0, top: 1000, behavior: "smooth" }); // window.scrollBy(0..
 Parallax Effect - 메뉴 이동
				
				
					Parallax Effect - 메뉴 이동
					document.querySelectorAll("#parallax__nav li a").forEach(li => { li.addEventListener("click", (e) => { e.preventDefault(); document.querySelector(li.getAttribute("href")).scrollIntoView({ behavior:"smooth" }) document.querySelectorAll("#parallax__nav li a").forEach(li => { li.parentElement.classList.remove("active"); }); li.parentElement.classList.add("active"); }) }) window.addEventListener("sc..