마우스4 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. CSS | ANIMATION | 마우스를 따라 움직이는 눈 마우스를 따라 움직이는 눈동자 애니메이션👀 마우스와 키보드에 따라 눈동자가 움직이도록 애니메이션을 만들어봅시다 ~! See the Pen Untitled by kkb75281 (@kkb75281) on CodePen. #1. HTML 코드를 확인해보자 요리조리 #2. CSS(SCSS) 코드를 확인해보자 * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; overflow: hidden; } .wrapper { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 369px; height: 547px; transform-sty.. 2022. 9. 26. 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. 이전 1 다음
