Web's study ! 지선

document.addEventListener("mousemove", function (e) { let body = document.querySelector("#mouseType07"); let circle = document.createElement("span"); let x = e.offsetX; let y = e.offsetY; circle.style.left = x + "px"; circle.style.top = y + "px"; let size = Math.random() * 100; circle.style.width = 20 + size + "px"; circle.style.height = 20 + size + "px"; body.appendChild(circle); setTimeout(fun..

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

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: -positionSlow}); gsap.to(".cursor", {duration: 0.3, left: e.pageX, top: e.pageY}); } document.addEventListener("mousemove", mousemove) https://jiseonpack.githu..

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;//세로 가운데로 //좌표의 최대값 최소값 구하기 //centerPage 좌표 값이 800이상으로 넘어가지 않도록 설정. //max 값에 Math.min을 한번 더 사용해서 cente..

Mouse Effect 중 이미지 효과 입니다. 커서를 따라 이미지가 움직입니다 ㅎㅎ 커서 좌표값을 알아서 /2를 하면 정 가운데로 오네요! 커서는 이미지 안에서만 움직이게 했습니다 const circle = document.querySelector(".cursor").getBoundingClientRect(); //bottom height left right top width x y document.querySelector(".mouse__img").addEventListener("mousemove", (e) => { //커서 gsap.to(".cursor", {duration: .2, left: e.pageX -circle.width/2, top:e.pageY -circle.height/2 }); /..

마우스 효과 3번째 조명 효과입니다! 다른 효과들 보다 뭔가 집중이 잘 되는 효과인거같아요 진짜 조명으로 비추고 있는 느낌이 들죠?? //요소값 알기 // const circle1 = document.querySelector(".cursor").clientWidth; //190 : border 빠진 상태 // const circle2 = document.querySelector(".cursor").offsetWidth; //200 : border 포함 상태 const circle = document.querySelector(".cursor").getBoundingClientRect(); //bottom height left right top width x y function follow(e){ gsap...

안녕하세요 오늘은 마우스 따라가기 효과 2번째를 배웠습니다. 요리조리 잘 따라오는 커서가 너무 귀엽네요 ㅎㅎ 다들 포토플리오 만들때 참고하시면 좋을 것 같습니다. ^-^ const cursor = document.querySelector(".cursor"); const follower = document.querySelector(".cursor-follower"); window.addEventListener("mousemove", e => { //커서 좌표값 할당 // cursor.style.left = e.pageX + "px"; // cursor.style.top = e.pageY + "px"; // follower.style.left = e.pageX -10 + "px"; // follower.st..

const quiz = document.querySelector(".quiz"); const quizType = document.querySelector(".quiz__type"); //문제 유형 const quizNumber = document.querySelector(".quiz__number"); //문제 번호 const quizAsk = document.querySelector(".quiz__ask"); //문제 질문 const quizConfirm = document.querySelector(".quiz__confirm"); //문제 정답 버튼 const quizResult = document.querySelector(".quiz__result"); //문제 정답 const quizView = ..