728x90
반응형

MouseMove 2

비주얼 스튜디오 코드 83_ 이미지가 움직이는 효과

html 마크업 body css edit .move_image css 편집 .move_image 가 움직일 예정이다. ●will-change: 엘리먼트에 대한 변경을 할 것인지를 미리 브라우저에 알려주어 하드에 가부화가 걸리는 것에 대한 도움을 준다. 그림자 만들기 .cursor 편집 커서 만들기 .cursor 이벤트 넣기 jqeury 마우스 이벤트 화살표 커서 지우기 이미지 이동 //이미지이동 $(".move_image").css({"transform":"translate(-50%,-50%) perspective(600px) rotateX("+x+"deg) rotateY("+y+"deg)"}) x, y 변수지정 회전 속도 줄이기 함수를 추가로 넣어주어도 된다. 윈도우의 넓이값 구하기 윈도우의 넓이값에 ..

비주얼 스튜디오 코드 81_마우스오버효과_자바스크립트

html mark up main: 가장중요한 부분을 넣어주는 태그 좌표 만들기 css reset .bottom css edit 배경색: body의 백그라운드 컬러 / 컬러가 지정되어있으면 반드시 넣어야한다. 배경에 사진넣기 .contents css edit .cursor css edit .cursorl.on css edit javascript 마우스 도형 움직이기 윈도우에 있는 마우스를 움직였을 때 이벤트를 발생해라 window.addEventListener("mousemove",e => { }); jqeury : $(). = javascript : document.querySelector() 마우스를 움직였을 때 html의 x값 좌표를 출력해라. 나머지 클래스도 좌표값 넣기 좌표를 마우스도형에 넣어주기..

728x90
반응형