babydevelopbabydevelop

자바스크립트를 이용하여 텍스트위에 이미지 오버하면 사진이나오고 지나가면 사라지는 효과를 만들어 봤습니다. 아래 텍스트를 각각 설정하여 이미지를 넣어 이미지는 CSS효과로 안보이게 설정한후 스크립트로 각 영역에 마우스를 오버하면 효과가 생기도록 만들었습니다. 효과들은 모두 gsap을 사용했습니다! const mouseImg = document.querySelectorAll(".mouse__img"); mouseImg.forEach((item) => { const imageWrap = item.querySelector(".img"); const imageWrapBounds = imageWrap.getBoundingClientRect(); let itemBounds = item.getBoundingClient..

자바스크립트를 이용하여 마우스가 움직일때마다 텍스트 효과가 생기는 사이트입니다. 화면에서 마우스를 움직이면 텍스트가 움직이는 효과를 만들었습니다. 한 문장당 오렌지색 두개 흰색 두개를 만든후 overflow: hidden 을 사용하여 반을 가린후 마우스가 움직일때마다 보여지도록 만들었습니다. 이 예제는 스크립트보다 CSS요소가 많이 들어가 소스코드를 통째로업로드 시켜드리겠습니다. Believe you can and Believe you can and You`re halfway there. You`re halfway there. 할 수 있다고 믿으면 할 수 있다고 믿으면 반은 온 것이다. 반은 온 것이다. JavaScript Mouse Effect06 마우스 이펙트 - 텍스트 효과 1 2 3 4 5 6 7 8

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; //최소값은 -50 최대값은 50 let maxPageX = Math.max(-800, Math.min(800, centerPageX)); let maxPageY = Math.max(-300, Mat..

const circle = document.querySelector(".cursor").getBoundingClientRect(); document.querySelector(".mouse__img").addEventListener("mousemove", (e) => { //커서 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; //마우스 좌표 값을 가운데 초기화 //전체 가로 //window.innerWidth - 브라우저 크기 //window.outerWidth - ..

const circle = document.querySelector(".cursor").getBoundingClientRect(); //bottom, height, left, right, rop, width, x, y //const circle { // bottom: 0; // height: 200, // left: 0, // width: 200 // } function follow(e) { gsap.to(".cursor", {duration: .3, left:e.pageX - circle.width/2 , top:e.pageY - circle.height/2}) //출력용 document.querySelector(".pageX").innerText = e.pageX; document.querySelec..

const cursor = document.querySelector(".cursor"); const follower = 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.to(cursor, {duration: .3, left: e.pageX -5, top: e.pageY -..

window.addEventListener("mousemove", (event) => { document.querySelector(".clientX").innerText = event.clientX; document.querySelector(".clientY").innerText = event.clientY; document.querySelector(".offsetX").innerText = event.offsetX; document.querySelector(".offsetY").innerText = event.offsetY; document.querySelector(".pageX").innerText = event.pageX; document.querySelector(".pageY").innerText..