근혁 study 공부정리

{ document.querySelectorAll(".content__item__desc").forEach(desc=>{ let descText = desc.innerText; let descWrap = "" + descText + ""; desc.innerHTML = descWrap; if(desc.classList.contains(".reveal")){ desc.innerHTML = descText } else { desc.innerHTML = descWrap; } }) function scroll(){ let scrollTop = window.pageYOffset || document.documentElement.scrollTop || window.scrollY const reveal = docum..

{ //글씨 span태그로 한 글자씩 감싸기 // let text = document.querySelector("#section1 .content__item__desc"); // let splitText = text.innerText; //글씨를 가져옴 // let splitWrap = splitText.split('').join("") //가져온 글씨를 split()로 한 글자씩 쪼개고 // splitWrap = "" + splitWrap + "" //span으로 감쌈 // text.innerHTML = splitWrap; //span으로 감싼 글씨를 innerHTML로 가져옴 //여러개 글씨 쪼개기 (위의 식을 다중(forEach)로 바꿔서 모든 desc가 효과를 받게 바꿈) document.quer..

{ let scrollTop = window.pageYOffset || document.documentElement.scrollTop || window.scrollY document.querySelector(".scrollTop span").innerText = Math.round(scrollTop); // const img = document.querySelector("#section1 .content__item__img") // img.style.transform = "translateY("+scrollTop/10+"px)" document.querySelectorAll(".content__item").forEach(item => { let offset1 = (scrollTop - item.offse..

{ function scroll(){ let scrollTop = window.pageYOffset || document.documentElement.scrollTop || window.scrollY document.querySelector(".scrollTop span").innerText = Math.round(scrollTop) document.querySelectorAll(".content__item").forEach(el =>{ if(scrollTop >= el.offsetTop - window.innerHeight/2){ //offsetTop에 - innerHeight나누기2 어느 모니터에서든 반정도 됬을때 사진이 나타나게 el.classList.add("show") } }) requestAn..

{ let nowScroll = true; let lastScroll = 0; function scrollProgress(){ nowScroll = true; setInterval(()=>{ if(nowScroll){ nowScroll = false; hasScroll() } },300); } function hasScroll(){ let scrollTop = window.pageYOffset || document.documentElement.scrollTop || window.scrollY if(scrollTop < lastScroll){ //lastScroll이 scrollTop보다 클때 show를 추가하고 아니면 show를 삭제 document.querySelector("#parallax__nav"..

{ 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, 1000) // ..

{ 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.pageYOffset || document.documentElement.scrollTop || window.scrollY; // forEach document.querySelectorAll(".content__item..