728x90 300x250 SMALL 웹애니메이션6 css 애니메이션 기초 : hover - 버튼, 링크, 카드에 인터랙션 주기 :hover란?:hover는 css 의사 클래스 중 하나이다.의사 클래스는 요소의 특정 상태에 따라 스타일을 적용하는데, :hover는 그 중에서도 마우스가 요소 위에 올라갔을 때 적용된다.이 효과를 활용하면 사용자가 마우스를 올렸을 때 버튼 색이 변하거나, 카드에 그림자가 생기거나, 텍스트가 강조되거나 하는 인터랙션을 줄 수 있다. 기본 문법선택자:hover { /* 마우스가 올라갔을 때의 스타일 */} 예시a:hover { color: red; text-decoration: underline;} 주의할 점:hover는 마우스가 있는 환경(pc)에서만 작동한다.스마트폰에서는 hover가 작동하지 않거나, 터치했을 때만 반응한다.항상 기본 스타일과 hover상태를 명확하게 대비되게 설정해야 효과가.. 2025. 5. 11. 웹사이트에 Lottie애니메이션 적용하기 1. CDN으로 라이브러리 추가 2. HTML에 애니메이션 영역 생성 3. JavaScript로 애니메이션 로드lottie.loadAnimation({ container: document.getElementById('lottie-box'), renderer: 'svg', loop: true, autoplay: true, path: 'https://assets1.lottiefiles.com/datafiles/VHvOcuN5uBJMwP1/data.json'}); 2025. 5. 6. Lottie란 무엇인가? 초보자도 이해하는 애니메이션 솔루션 Lottie란?Lottie는 Adobe After Effects에서 제작한 애니메이션을 JSON 파일 형태로 웹이나 앱에서 사용할 수 있게 해주는 오픈소스 라이브러리이다.디자이너가 만든 벡터 기반의 애니메이션을 개발자가 코드 한 줄로 쉽게 사용할 수 있어, 최근에는 웹사이트나 모바일 앱에서 로딩 애니메이션, 버튼 효과 등으로 많이 활용되고 있다. https://lottiefiles.com/kr/ 무료 로티 애니메이션, 모션 그래픽을 위한 모든 플러그인과 도구를 한 곳에 - 로티파일즈/LottieFi로티파일즈/LottieFiles는 오픈소스 애니메이션 포맷 로티를 제공하는 세상에서 가장 큰 무료 플랫폼입니다. 웹, iOS, 안드로이드, 윈도우를 위한 모션 그래픽 작업을 지원하는 플러그인과 툴을 통lotti.. 2025. 5. 4. 웹사이트에 스크롤 애니메이션 추가하는 가장 쉬운 방법 GSAP는 강력한 웹 애니메이션 라이브러리로, ScrollTrigger는 gsap의 플러그인중 하나이다.ScrollTrigger를 사용하면 사용자의 스크롤 위치에 따라 애니메이션을 실행하거나 컨트롤할 수 있다.특히, 웹사이트에서 스크롤을 기반으로 동적인 인터랙션을 만들 때 유용하다. ScrollTrigger의 주요 기능스크롤 위치를 감지하여 애니메이션 실행 : 특정 요소가 화면에 나타날 때 애니메이션을 시작할 수 있다.스크롤 진행률에 따라 애니메이션 속도 조절(scrub 기능) : 사용자의 스크롤 속도에 따라 애니메이션을 부드럽게 조절할 수 있다.요소가 뷰포트에 들어올 때 트리거 : 특정 위치에서 애니메이션을 실행하도록 설정할 수 있다.고정(fixed) 애니메이션 지원(pin 기능) : 특정 요소를 스.. 2025. 3. 25. 이전 1 2 다음 728x90 반응형 LIST