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 circle = document.querySelector(".cursor").getBoundingClientRect(); function mouseMove(e){ //마우스 좌표값 let mousePageX = e.pageX; let mousePageY = e.pageY; //마우스 좌표 기준점을 가운데로 설정 let centerPageX = window.innerWidth/2 - e.pageX; let centerPageY = window.innerHeight/2 - e.pageY; //좌표의 최대값 최소값 구하기 //centerPage 좌표 값이 800이상으로 넘어가지 않도록 설정. //max 값에 Math.min을 한..

//설명. 참고사항. const circle = document.querySelector(".cursor").getBoundingClientRect(); //커서의 길이 속성을 가져온다. //가운데 이미지 내에서 움직이는 함수 설정 document.querySelector(".mouse__img").addEventListener("mousemove",(e)=>{ //커서 움직이는 애니메이션를 gsap로 설정 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; //전체 가..

//설명. 참고사항. 커서 스타일 .cursor { position: absolute; left: 0; top: 0; width: 200px; height: 200px; z-index: -1; border-radius: 50%; background-image: url(img/image22.jpg); background-size: cover; background-position: center center; background-attachment: fixed; //background-attachment 속성을 고정으로 이용해서 배경이미지 뒤에 투명도 없는 선명한 이미지가 있는것 처럼 작업합니다. border: 5px solid #fff; } 스크립트 //background-attachment: fixed; ..

//설명. 참고사항. const cursor = document.querySelector(".cursor"); const follow = document.querySelector(".cursor-follower"); window.addEventListener("mousemove", (e) => { //커서에 좌표 값 할당 // cursor.style.left = e.pageX -5 + "px"; // cursor.style.top = e.pageY -5 + "px"; // follow.style.left = e.pageX -15 + "px"; // follow.style.top = e.pageY -15 + "px"; //gsap 플러그인을 사용해서 좌표값 할당한 애니메이션 적용 gsap.to(cursor..

//설명. 참고사항. //출력용 window.addEventListener("mousemove",(event)=>{ document.querySelector(".clientX").innerText = event.clientX; //브라우저 기준 x좌표 document.querySelector(".clientY").innerText = event.clientY; //브라우저 기준 y좌표 document.querySelector(".offsetX").innerText = event.offsetX; //요소 기준 x 좌표 document.querySelector(".offsetY").innerText = event.offsetY; //요소 기준 y 좌표 document.querySelector(".pageX"..