마우스효과5 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 살펴보기 + 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 | 배경 조명 효과주기 mouseEffect | 배경 조명 효과 오늘의 목표 👉🏻 마우스 커서 움직임에 따라 배경 사진에 조명을 비추는 느낌으로 효과주기 1. 사이트 구조 살펴보기 CSS 살펴보기 span으로 감싼 글자는 키워드로 색깔을 다르게 주었습니다. cursor 디자인도 따로 조명을 비추는 듯한 느낌으로 디자인 했습니다. HTML 살펴보기 영화 '니모를 찾아서'에 나오는 명언을 넣어주었습니다. The best moment suddenly comes. 최고의 순간은 갑자기 찾아오는 거야. 2. script 살펴보기 📌 cursor에 움직임에 따라 배경이 컬러로 보일 수 있는 이유 cursor 자체에 background-image를 넣고 위치와 크기를 맞춰준 다음 fix시켜 마우스의 움직임에 따라 보일 수 있도록 설정해주었.. 2022. 9. 22. 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 다음
