SBDB_뉴유 SBDB_뉴유

const mouseImg = document.querySelectorAll(".mouse__img") mouseImg.forEach((item) => { const imageWrap = item.querySelector(".img"); const imageWrapBounds = imageWrap.getBoundingClientRect(); let itemBounds = item.getBoundingClientRect(); const onMouseEnter = () => { gsap.set(imageWrap, {xPercent: -50, yPercent: 50, rotation: -15, scale: 0.3, opacity: 0}) gsap.to(imageWrap, {xPercent: -50, yPerc..

function mousemove(e){ let positionSlow = (e.pageX - (window.innerWidth/2)) * 0.1; let positionFast = (e.pageX - (window.innerWidth/2)) * 0.2; gsap.to(".spanSlow", {duration: 0.4, x: positionSlow}) gsap.to(".spanFast", {duration: 0.4, x: -positionFast}) gsap.to(".cursor", {duration: 0.3, left: e.pageX, top: e.pageY}) } document.addEventListener("mousemove", mousemove)

//만약에 reveal 클래스가 있는데 //글씨를 span으로 감싸주고 //글씨를 다 넣어줘요 함 document.querySelectorAll(".content__item__desc").forEach(desc => { let descAf = desc.innerHTML; //console.log(descAf); //console.log(descAf.includes("span")) if(descAf.includes("span")){ desc.innerHTML = descAf } else { let descBe = "" + descAf + ""; desc.innerHTML = descBe; } }) //document.querySelectorAll(".content__item__desc").forEach(d..

//글씨 쪼개기 //let text = document.querySelector("#section1 .content__item__desc"); //let splitText = text.innerText; //let splitWrap = splitText.split('').join(""); // splitWrap = "" + splitWrap + "" // text.innerHTML = splitWrap //alert(splitWrap) // 여러개 글씨 쪼개기 //for(let i=1; i { let splitText = desc.innerText; let splitWrap = splitText.split('').join(""); splitWrap = "" + splitWrap + "" desc.inne..

function scroll(){ let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop; 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 = (scro..

//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(".scrollTop span").innerText = Math.r..

// window.addEventListener("scroll", () => { // let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop; // // 스크롤 값이 0보다 크면 show 클래스를 추가 // // if(scrollTop>0){ // // document.querySelector("#parallax__nav").classList.add("show") // // } else { // // document.querySelector("#parallax__nav").classList.remove("show") // // } // document.querySelector(".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"}); // window.scrollBy(0,1000); // w..

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 scrollTo..

const circle = document.querySelector(".cursor").getBoundingClientRect(); function mouseMove(e){ //마우스 좌표 값 let mousePageX = e.pageX; let mousePageY = e.pageY; //마우스 좌표 기준점을 가운데로 변경 let centerPageX = window.innerWidth/2 - mousePageX; let centerPageY = window.innerHeight/2 - mousePageY; //최소값을 -100 최대값을 100 설정 let maxPageX = Math.max(-100, Math.min(100, centerPageX)); let maxPageY = Math.max(-100..

const circle = document.querySelector(".cursor").getBoundingClientRect(); document.querySelector(".mouse__img").addEventListener("mousemove", e => { document.querySelector(".cursor").style.opacity = "1"; //커서 gsap.to(".cursor", {duration: .2, left: e.pageX - circle.width/2, top: e.pageY - circle.height/2}); //마우스 좌표 값 let mousePageX = e.pageX; let mousePageY = e.pageY; //마우스 좌표 값을 가운데 초기화 //전체 가..

function follow(e){ // const circle = document.querySelector(".cursor").clientWidth; //190: border 값 빠진 상태 // const circle = document.querySelector(".cursor").offsetWidth; //200: border 값 포함 상태 const circle = document.querySelector(".cursor").getBoundingClientRect(); //bottom, height, left, right, top, width, x, y // console.log(circle); // console.log(circle.width); gsap.to(".cursor", {duration..