Gentleman'study 젠틀맨

function getTwoDecimal(num) { return parseFloat(num.toFixed(2) + 0.5); } const mouse = { decimal(coord) { return getTwoDecimal(coord / 1000); }, x(e) { return Math.abs(e.clientX - window.innerWidth / 2); }, y(e) { return Math.abs(e.clientY - window.innerHeight / 2); } }; const changeTextAlphaVal = (txt, e) => { const root = document.querySelector(":root"); const cssVar = "--alpha"; const current..

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

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); 이번 효과는 CSS적인 부분에서 처리해야 될 게 많다..

function scroll(){ let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop; const reveal = document.querySelectorAll(".reveal"); reveal.forEach(el => { let revealOffset = el.offsetTop + el.parentElement.offsetTop; let revealDelay = el.dataset.delay; if (scrollTop > revealOffset - window.innerHeight/2){ if(revealDelay == undefined){ el.classList.add("show") } el..

let text = document.querySelectorAll(".content__item__desc"); text.forEach((el,i) => { let splitText = el.innerText;// 글자들을 선택해서 변수로 저장 let splitWrap = splitText.split('').join("span aria-hidden='true'>");// 글자를 하나씩 쪼개고 splitWrap = "" + splitWrap + "";// span으로 묶음 el.innerHTML = splitWrap;// 묶은것을 다시 출력해줌. el.setAttribute("aria-label", splitText) }) function scroll(){ let scrollTop = window.scree..

function scroll(){ let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop; document.querySelector(".scrollTop span").innerText = Math.round(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(".content__i..

function scroll(){ let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop; document.querySelector(".scrollTop span").innerText = Math.round(scrollTop); let content = document.querySelectorAll(".content__item"); content.forEach(el=>{ if(scrollTop > el.offsetTop - window.innerHeight/2){ el.classList.add("show"); } }) requestAnimationFrame(scroll) } scroll(); 스크롤..

let nowScroll = true; let lastScroll = 0; function scrollProgress(){ nowScroll = true; setInterval(()=>{// 스크롤을 내리는지 올리는지 판단하기 위해 setInterval을 사용한다. if(nowScroll){ nowScroll = false; hasScroll(); } }, 1000) } function hasScroll(){ let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop; if (scrollTop > lastScroll){ document.querySelector("#parallax__nav").class..

document.querySelectorAll("#parallax__dot 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 = Mat..

document.querySelectorAll("#parallax__nav li a").forEach(li =>{// 메뉴 탭 li.addEventListener("click", e => { e.preventDefault();// 작동 금지 document.querySelector(li.getAttribute("href")).scrollIntoView({// li의 속성값들을 가져와서 스크롤 됐을때 behavior:"smooth"// 부드럽게 }) }) }) window.addEventListener("scroll", ()=>{// 스크롤 했을 때 let scrollTop = window.pageYOffset || document.documentElement.scrollTop || window.scrol..

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 // 최소값 : -50, 최대값 : 50 으로 설정 let maxPageX = Math.max(-300, Math.min(300, centerPageX)); let maxPageY = Math..

const circle3 = document.querySelector(".cursor").getBoundingClientRect(); document.querySelector(".mouse__img").addEventListener("mousemove", (e) => { gsap.to(".cursor", {duration: 0.2, left: e.pageX - circle3.width/2, top: e.pageY - circle3.height/2}) // 마우스 좌표 값 let mousePageX = e.pageX; let mousePageY = e.pageY; // 마우스 좌표 값 기준점을 가운데로 초기화 // 전체 길이 / 2 - 마우스 X 좌표값 let centerPageX = window.inne..

const circle3 = document.querySelector(".cursor").getBoundingClientRect(); // 모든 위치정보값 function follow(e){ gsap.to(".cursor", {duration: 0.3, left: e.pageX - (circle3.width / 2), top: e.pageY - (circle3.height / 2)}); //출력용 document.querySelector(".pageX").innerText = e.pageX; document.querySelector(".pageY").innerText = e.pageY; } window.addEventListener("mousemove", follow); 전체 사이트 보기 자바스크립트로 ..

const cursor = document.querySelector(".cursor");// 커서 const follower = document.querySelector(".cursor-follower");// 커서를 따라다니는 요소 window.addEventListener("mousemove", e => {// 화면에 마우스 오버했을 때 // cursor.style.left = (e.pageX - 5) + "px"// 커서 중앙에 요소가 오도록 위치값 조정 // cursor.style.top = (e.pageY - 5)+ "px" // follower.style.left = (e.pageX - 15) + "px" // follower.style.top = (e.pageY - 15) + "px" gsa..

window.addEventListener("mousemove", (e)=>{ document.querySelector(".clientX").innerText = e.clientX// 브라우저 기준 좌표값 document.querySelector(".clientY").innerText = e.clientY document.querySelector(".offsetX").innerText = e.offsetX// 요소 기준 좌표값 document.querySelector(".offsetY").innerText = e.offsetY document.querySelector(".pageX").innerText = e.pageX// 페이지 기준 좌표값 document.querySelector(".pageY").i..

hljs.highlightAll();// 코드 나타낼때 쓰는 스크립트 const modal = function(){// modal 창 띄우는 함수 만들기. document.querySelector(".source-btn").addEventListener("click", () => {// 소스보기 버튼을 클릭하면 document.querySelector("#modal").classList.add("show");// 모달창 보여주기 document.querySelector("#modal").classList.remove("hide");// 껏다가 켰을때 한번더 작동하기 위해 hide 클래스 제거 }) document.querySelector(".close").addEventListener("click", (..

hljs.highlightAll();// 코드 나타낼때 쓰는 스크립트 const modal = function(){// modal 창 띄우는 함수 만들기. document.querySelector(".source-btn").addEventListener("click", () => {// 소스보기 버튼을 클릭하면 document.querySelector("#modal").classList.add("show");// 모달창 보여주기 document.querySelector("#modal").classList.remove("hide");// 껏다가 켰을때 한번더 작동하기 위해 hide 클래스 제거 }) document.querySelector(".close").addEventListener("click", (..

hljs.highlightAll();// 코드 나타낼때 쓰는 스크립트 const modal = function(){// modal 창 띄우는 함수 만들기. document.querySelector(".source-btn").addEventListener("click", () => {// 소스보기 버튼을 클릭하면 document.querySelector("#modal").classList.add("show");// 모달창 보여주기 document.querySelector("#modal").classList.remove("hide");// 껏다가 켰을때 한번더 작동하기 위해 hide 클래스 제거 }) document.querySelector(".close").addEventListener("click", (..

hljs.highlightAll();// 코드 나타낼때 쓰는 스크립트 const modal = function(){// modal 창 띄우는 함수 만들기. document.querySelector(".source-btn").addEventListener("click", () => {// 소스보기 버튼을 클릭하면 document.querySelector("#modal").classList.add("show");// 모달창 보여주기 document.querySelector("#modal").classList.remove("hide");// 껏다가 켰을때 한번더 작동하기 위해 hide 클래스 제거 }) document.querySelector(".close").addEventListener("click", (..

hljs.highlightAll();// 코드 나타낼때 쓰는 스크립트 const modal = function(){// modal 창 띄우는 함수 만들기. document.querySelector(".source-btn").addEventListener("click", () => {// 소스보기 버튼을 클릭하면 document.querySelector("#modal").classList.add("show");// 모달창 보여주기 document.querySelector("#modal").classList.remove("hide");// 껏다가 켰을때 한번더 작동하기 위해 hide 클래스 제거 }) document.querySelector(".close").addEventListener("click", (..