728x90
반응형

pointer-events 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 변수지정 회전 속도 줄이기 함수를 추가로 넣어주어도 된다. 윈도우의 넓이값 구하기 윈도우의 넓이값에 ..

비주얼 스튜디오 코드 80_ 마우스 오버 효과_제이쿼리

html mark up reset css 지정 client: 브라우저 기준으로 잡아주는 마우스 offset: 마우스가 특정 구역에 들어가면 마우스 형태가 바뀜 page:전체 페이지 잡아줄 때 사용 screen:모니터가 기준(0,0) .info css edit ● max-width: 70vw 가장 큰 사이즈 화면에서 70vw를 사용하겠다. cursor 만들기 /* 기준점이 따로 없다 */ .cursor{ position: absolute; top: 100px; left: 100px; width: 50px; height: 50px; border: 3px solid #fff; background-color: rgba(255, 255, 255, 0.3); border-radius: 50%; /* 가장 위에 오도..

728x90
반응형