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

자바스크립트를 통해 타자게임을 만들어 보았다. .split() 을 통해 각 단어단어를 쪼개고 input박스의 밸류값 또한 split()로 쪼갠 뒤 각각의 자리를 비교하여 correct / incorrect 클래스를 붙여주어 처리하였다. 중간 중간 오류가 많아 여러번 수정하였다. 자세한건 소스를 참고! 전체 사이트 보기

자바스크립트를 통해 뮤직플레이어를 만들었다. 태그를 이용하여 mp3파일을 연동시킬 수 있고 element.play(); element.stop();을 통해 오디오를 재생/정지 시킬 수 있다. 수업 중엔 배우지 않았지만 element.volume = 0~1 을 통해서 해당 오디오에 볼륨을 조절 할 수 있어서 기능을 추가하였다. 자세한건 사이트 참고하도록.. 전체 사이트 보기

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