근혁 study 공부정리

{ const mouseImg = document.querySelectorAll(".mouse__img"); mouseImg.forEach((item) => { //item = mouseimg const imageWrap = item.querySelector(".img") const imageWrapBounds = imageWrap.getBoundingClientRect(); //위치값을 가져옴 let itemBounds = item.getBoundingClientRect(); //item의 위치값 const onMouseEnter = () => { //마우스가 영역에 들어왔을때 gsap.set(imageWrap, {xPercent: -50, yPercent: 50, rotation: -15, scale..

{ 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); }

replace() 자바스크립트에서 특정 문자를 찾아 원하는 문자로 바꿀 수 있는 replace() 메서드가 존재한다. 다음은 replace()의 기본형이다 { const str = "자바스크립트(javascript) 공부" text = str.replace("찾는 문자열","변경할 문자열") } str 에서 찾는 문자열을 입력하고 변경할 문자열을 입력한다. 다음은 replace()의 예제이다 { const str = "자바스크립트(javascript) 공부" text = str.replace('공부', '스터디'); //자바스크립트(javascript) 스터디; }

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