mouseEffect5 EFFECT | MOUSE | 텍스트 효과 mouseEffect | 텍스트 효과 오늘의 목표 👉🏻 마우스 커서 움직임에 따라 글자가 접혀서 움직이는 듯한 효과주기 👉🏻 글자에 마우스 커서를 올리면 커서가 확대되면서 글자 반전 효과주기 1. 사이트 구조 살펴보기 HTML 살펴보기 글자를 왼쪽과 오른쪽 부분으로 나눠 구조를 짜주었습니다. Pain Past Pain Past is pleasure is pleasure 지나간 고통은 지나간 고통은 쾌락이다. 쾌락이다. CSS 살펴보기 shew 속성과 overflow 속성을 사용하여 글자가 접혀서 나오는 듯한 효과를 주었습니다. 2. script 살펴보기 📌 글씨의 움직임과 cursor 설정하기 마우스 커서의 pageX, pageY을 구하고 window.innerWidth의 절반 값을 빼서 텍스트가 이미지.. 2022. 9. 30. EFFECT | MOUSE | 이미지 기울기 / 글자 반전 효과 주기 mouseEffect | 기울기 효과 / 글씨 반전 효과 오늘의 목표 👉🏻 마우스 커서 움직임에 따라 이미지가 기울어지는 효과주기 👉🏻 마우스 커서와 글/이미지가 만나는 부분은 반전효과 설정하기 1. 사이트 구조 살펴보기 CSS 살펴보기 요소에 적용할 변화의 종류를 미리 브라우저에게 알려주는 역할을 함으로써, 실제 요소가 변하기 전에 미리 브라우저를 그에 맞게 최적화시키는 속성입니다. 📌 will-change 요소에 적용할 변화의 종류를 미리 브라우저에게 알려주는 역할을 함으로써, 실제 요소가 변하기 전에 미리 브라우저를 그에 맞게 최적화시키는 속성입니다. - will-change 적용시 원래보다 더 오랜 시간 최적화를 유지해야하기 때문에 스크립트를 통해 변화 전후에 활성/비활성을 설정해주는 것이 좋습니.. 2022. 9. 28. EFFECT | MOUSE | 마우스 커서 움직임 반대로 이미지 움직이기 mouseEffect | 이미지 효과 오늘의 목표 👉🏻 마우스 커서 움직임에 따라 배경 이미지가 반대로 움직이는 효과주기 👉🏻 마우스 커서 디자인이 이미지 안에서만 따라다니도록 설정하기 1. 사이트 구조 살펴보기 CSS 살펴보기 + object-fit: cover; background-size: cover;와 같은 역할을 하는 속성으로 배경이 아닌 이미지에 사용할때 쓰이는 속성입니다. HTML 살펴보기 영화 '쥬토피아'에 나오는 명언을 넣어주었습니다. Don't beat yourself up. Don't need to run so fast. Sometimes we coma last but we did our best. 자신을 자책하지마, 너무 서두르지 않아도 돼. 마지막으로 들어왔더라도 최선을 다했으면 .. 2022. 9. 23. EFFECT | MOUSE | 마우스 따라다니기(GSAP) mouseEffect | 마우스 따라다니기(GSAP) 오늘의 목표 👉🏻 GSAP를 활용해 더 부드럽게 마우스 효과 설정하기 1. 사이트 구조 살펴보기 CSS 살펴보기 HTML 살펴보기 Success isn't permanent, and failure isn't fatal. 성공은 영원하지 않고, 실패는 치명적이지 않다. 2. script 살펴보기 원본 소스 보기 실제 사이트 보기 2022. 9. 19. EFFECT | MOUSE | 마우스 따라다니기 mouseEffect | 마우스 따라다니기 오늘의 목표 👉🏻 마우스 커서 대신 css로 디자인한 모양이 마우스를 따라다니도록 설정하기 👉🏻 강조하고 싶은 글자에 커서를 가져갔을 떄 다양한 효과주기 1. 사이트 구조 살펴보기 CSS 살펴보기 HTML 살펴보기 You can't be more than others if you do like others 남과 같이 해서는 남 이상이 될 수 없다. clientX : 0px clientY : 0px offsetX : 0px offsetY : 0px pageX : 0px pageY : 0px screenX : 0px screenY : 0px 2. script 살펴보기 원본 소스 보기 실제 사이트 보기 2022. 9. 19. 이전 1 다음
