아라의 WWW

HTML Javascript Mouse Effect03 마우스를 따라다니는 조명효과입니다. 1 2 3 4 5 6 "The road to success and the road to failure are almost exactly the same." 성공하는 길과 실패하는 길은 거의 같다. 오늘은 마우스을 움직이면 따라다니면서 돋보기처럼 선명하게 보이는 효과를 줍니다. 마우스을 따라다니는 200px의 원을 만들고 커서의 가운데로 오도록 합니다.(background-position: center center;) 속성 속성특징 속성 내용 background-attachment: fixed; 배경 이미지가 화면에서 고정되어 스크롤해도 항상 같은 위치에 남아 있게 됩니다. 배경이미지를 고정하여 커서를 움직여도 배경..

html Javascript Mouse Effect03 GSAP를 이용해서 마우스를 따라다니는 효과입니다. 1 2 3 4 5 6 Success is not final; failure is not fatal: It is the courage to continue that counts. 성공은 종점이 아니며, 실패는 치명적이지 않습니다. 중요한 것은 용기이다. jo0132@naver.com 우선 html에서는 별다른 효과 없이 명원이 나오는 것으로 주었습니다. 저번과 다른 점은 마우스 커스를 대신할 div박스가 두개라는 점입니다 이는 실행할때 나오는데 두 박스는 서로 다르게 움직이게 css를 주었습니다. 그리고 active를 주어 서로 span에 닿을 때 애니메이션 효과가 나도록 transform을 주었습니..

HTML Javascript Mouse Effect01 마우스 이팩트 - 마우스 따라다니기 1 2 3 4 5 6 Change will not come if we wait for some other person or some other time. 변화는 누군가 언젠가 가져다줄 거라 기다리면 절대로 오지 않는다. clientX : 0px clientY : 0px offsetX : 0px offsetY : 0px pageX : 0px pageY : 0px screenX : 0px screenY : 0px jo0132@naver.com 마우스 이펙트는 마우스 커서의 좌표값을 받아 표시하고 커서를 따라다니는 오브젝트를 만들었습니다. 또한 여러가지 효과를 주어 커서가 특정 단어에 올라갈때 커서의 모양이 변하는 애니..