Gwni Lab GwniLab

//만약에 reveal 클래스가 있는데 //글씨를 span으로 감싸주고 //글씨를 다시 넣어주기 const descWrap = document.querySelectorAll(".content__item__desc"); descWrap.forEach(desc=>{ if(desc.classList.contains("reveal")){ //content__item__desc에 reveal 클래스가 포함되어 있으면. let Text = desc.innerText; Text = "" + Text + ""; desc.innerHTML = Text; } }); //requestAnimationFrame()을 이용한 보다 효율적인 코딩. function scroll(){ let scrollTop = window.scr..

//글씨 쪼개기 // let text = document.querySelector("#section01 .content__item__desc"); // let splitText = text.innerText; // let splitWrap = splitText.split('').join(""); // splitWrap = "" + splitWrap + ""; // text.innerHTML = splitWrap; //여러개 글씨 쪼개기 document.querySelectorAll(".content__item__desc").forEach(desc=>{ let splitText = desc.innerText; let splitWrap = splitText.split('').join(""); splitWra..

//requestAnimationFrame()을 이용한 보다 효율적인 코딩. function scroll(){ let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop; document.querySelector(".srcollTop").innerText = Math.round(scrollTop); // const img = document.querySelector("#section01 .content__item__img"); // img.style.transform = "translateY("+scrollTop/10+"px)"; document.querySelectorAll(".content__ite..

//requestAnimationFrame()을 이용한 보다 효율적인 코딩. function scroll(){ let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop; document.querySelector(".srcollTop").innerText = Math.round(scrollTop); //forEach 을 이용한 show 클래스 추가 document.querySelectorAll(".content__item").forEach((el,i)=>{ if(scrollTop > el.offsetTop - window.innerHeight/2){ el.classList.add("show"); } }..

//el의 속성값 (a태그) href - 아이디 섹션값을 지정해서 클릭하면 부드럽게 이동하기 document.querySelectorAll("#parallax__nav li a").forEach(li =>{ li.addEventListener("click", (e)=>{ e.preventDefault(); document.querySelector(li.getAttribute("href")).scrollIntoView({ behavior: "smooth" }) }) }) window.addEventListener("scroll",()=>{ let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop; //..

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"}); //scrollBy는 현재 기준점 을 기..

//el의 속성값 (a태그) href - 아이디 섹션값을 지정해서 클릭하면 부드럽게 이동하기 document.querySelectorAll("#parallax__nav li a").forEach(li =>{ li.addEventListener("click", (e)=>{ e.preventDefault(); document.querySelector(li.getAttribute("href")).scrollIntoView({ behavior: "smooth" }) }) }) //스크롤 값 구하기 window.addEventListener("scroll", ()=>{ //3가지 방법을 쓸 수 있음. // let scrollTop = window.pageYOffset; // let scrollTop = docum..