Gwni Lab GwniLab

//설명. 참고사항. document.addEventListener("mousemove", function (e) { let body = document.querySelector("body"); let circle = document.createElement("span"); let x = e.pageX; let y = e.pageY; // circle.style.left = x + "px"; // circle.style.top = y + "px"; //gsap를 이용해서 더 부드러운 애니메이션 효과 주기 gsap.set(circle,{left:x,top:y}); let size = Math.random() * 100; //랜덤한 사이즈를 주어서 방울방울이 크기가 다르도록 효과 circle.style.wi..

//설명. 참고사항. 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,yP..

//설명. 참고사항. highlight(); modal(); tabMenu(); function mousemove(e){ let positionSlow = (e.pageX - (window.innerWidth/2)) * 0.1; let positionsFast = (e.pageX - (window.innerWidth/2)) * 0.3; gsap.to(".spanSlow", {duration: 0.4, x: positionSlow}); gsap.to(".spanFast", {duration: 0.4, x: -positionsFast}); gsap.to(".cursor", {duration:0.3, left: e.pageX, top: e.pageY}); } document.addEventListener("m..

//설명. 참고사항. const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); const sliderInner = document.querySelector(".slider__inner"); const slider = document.querySelectorAll(".slider"); const sliderBtn = document.querySelector(".slider__btn"); const sliderBtnPrev = document.querySelector(".prev"); const sliderBtnNext = document.querySele..

setInterval()을 이용한 이미지 슬라이드 - 닷 버튼 추가 //설명. 참고사항. const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); const sliderInner = document.querySelector(".slider__inner"); const slider = document.querySelectorAll(".slider"); const sliderBtn = document.querySelector(".slider__btn"); const sliderBtnPrev = document.querySelector(".prev"); co..

//만약에 reveal 클래스가 있는데 //글씨를 span으로 감싸주고 //글씨를 다시 넣어주기 const descWrap = document.querySelectorAll(".content__item__desc"); descWrap.forEach(desc=>{ if(desc.classList.contains("reveal")){ //content__item__desc에 reveal 클래스가 포함되어 있으면. let Text = desc.innerText; Text = "" + Text + ""; desc.innerHTML = Text; } }); //requestAnimationFrame()을 이용한 보다 효율적인 코딩. function scroll(){ let scrollTop = window.scr..

//글씨 쪼개기 // let text = document.querySelector("#section01 .content__item__desc"); // let splitText = text.innerText; // let splitWrap = splitText.split('').join(""); // splitWrap = "" + splitWrap + ""; // text.innerHTML = splitWrap; //여러개 글씨 쪼개기 document.querySelectorAll(".content__item__desc").forEach(desc=>{ let splitText = desc.innerText; let splitWrap = splitText.split('').join(""); splitWra..

//requestAnimationFrame()을 이용한 보다 효율적인 코딩. function scroll(){ let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop; document.querySelector(".srcollTop").innerText = Math.round(scrollTop); // const img = document.querySelector("#section01 .content__item__img"); // img.style.transform = "translateY("+scrollTop/10+"px)"; document.querySelectorAll(".content__ite..