babydevelopbabydevelop

안녕하세요! Parallax Effect(패럴럭스 이펙트)로 포트폴리오 느낌을 연출해봤습니다. 아직저는 미숙하지만 제걸 보시고 따라시면 여러분은 더 잘하실수 있을거에요!! 각각의 스크롤값에 transform을 줘서 느낌을 연출했습니다~ 안녕하세요! 포트폴리오 사이트입니다. 사이트를 소개해드릴게요! I`ve Been Working In On Sites 사이트 바로가기 사이트 바로가기 사이트 바로가기 사이트 바로가기

//HTML에 클래스 reveal이 있으면 span 태그 넣어주기! document.querySelectorAll("p.reveal").forEach(desc => { let revealtext = desc.innerText; revealtext = "" + revealtext + ""; desc.innerHTML = revealtext; }) function scroll(){ let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop; const reveal = document.querySelectorAll(".reveal"); reveal.forEach(elem => { let revealOffse..

//글씨 쪼개기 document.querySelectorAll(".parallax__cont__desc").forEach(desc => { let splitText = desc.innerText; let splitWrap = splitText.split('').join(""); splitWrap = "" + splitWrap + ""; desc.innerHTML = splitWrap; desc.setAttribute("aria-label", splitText); //setAttribute - 속성을 넣어줌 }) function scroll(){ //재귀함수를 사용하여 무한반복하여 스크롤값 찾는 방법 let scrollTop = window.screenY || window.pageYOffset || doc..

function scroll(){ //재귀함수를 사용하여 무한반복하여 스크롤값 찾는 방법 let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop; document.querySelector(".scrollTop span").innerText = Math.round(scrollTop); // const img = document.querySelector("#section1 .parallax__cont__img") // img.style.transform = "translateY("+scrollTop/10 +"px)" document.querySelectorAll(".content__item").forE..

// window.addEventListener("scroll", () => { // let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop; // document.querySelector(".scrollTop span").innerText = Math.round(scrollTop); // }) function scroll(){ //재귀함수를 사용하여 무한반복하여 스크롤값 찾는 방법 let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop; document.querySelector(".scrol..

document.querySelectorAll("#parallax__nav a").forEach(el => { el.addEventListener("click", e => { e.preventDefault(); document.querySelector(el.getAttribute("href")).scrollIntoView({behavior: "smooth"}); }) }) window.addEventListener("scroll", () => { let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop; document.querySelector(".scrollTop span").innerText = ..

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; // let scrollTop = document.documentElement.scrollTop; // let scrollTop = window.scrollY; let scrollTop..