728x90 300x250 SMALL Front-end392 스크롤 내리면 애니메이션 실행하기 적용 방법 [html + JavaScript] 웹사이트에서 스크롤을 내릴 때 요소가 자연스럽게 등장하는 효과 이 기능은 단순한 css와 javaScript만으로도 쉽게 구현할 수 있습니다. IntersectionObserver API를 활용하여 스크롤 애니메이션 효과를 만들어보겠습니다. 구현 목표스크롤을 아래로 내리면 특정 박스가 페이드 인(Fade In) + 위로 올라오는 애니메이션을 실행애니메이션은 한 번만 실행전체코드 스크롤 다운 ↓ 애니메이션 실행! 코드 설명 css설명.box { opacity: 0; transform: translateY(50px); transition: all 0.6s ease;}.box.active { opacity: 1; transform: translateY(0);}box는 처음에는 opacit.. 2025. 5. 25. 버튼에 다양한 인터랙션 효과 적용하기 앞서 배운 hover, transtion, transform, animation을 조합하여 실전 UI 효과를 구현해 봅시다.예제 목록호버 시 색상과 크기가 동시에 바뀌는 버튼클릭 시 눌리는 느낌의 버튼(:active)포커스 시 강조되고 깜빡이는 애니메이션 추가disabled 상태일 때 스타일 변경 버튼 효과 보기 버튼 효과 보기">버튼 효과 보기 2025. 5. 20. 다양한 의사 클래스(:focus, :active, :checked) css 의사 클래스css 의사 클래스는 사용자의 인터랙션 상태에 따라 스타일을 다르게 지정할 수 있다. 주요 의사 클래스 설명:focus : 키보드 또는 마우스 포커스를 받은 상태(주로 인풋 요소에 적용):active : 사용자가 클릭한 순간(마우스 버튼을 누르고 있는 상태):checked : 체크박스나 라디오 버튼이 선택된 상태 예제1 : 인풋 포커스 시 테두리 강조 "> 예제 2 : 버튼 클릭 시 색상 변화 (:active) 눌러보세요 눌러보세요">눌러보세요 예제3 : 체크박스 선택 시 배경 변화(:checked) 선택해보세요 선택해보세요"> 선택해보세요 2025. 5. 18. animation @keyframes 으로 반복되는 움직임 만들기 animation효과css @keyframes와 animation 속성을 사용하면 반복되거나 시간 기반으로 동작하는 애니메이션을 만들 수 있다.transition은 상태 변화에 반응하지만, animation은 자동 반복도 가능하다.주요 속성@keyframes : 애니메이션의 단계 정의animation-name : 사용할 키프레임 이름animation-duration : 애니메이션 시간animation-iteration-count : 반복 횟수animation-delay : 시작 지연animation-fill-mode : 종료 후 상태 유지 주요 문법@keyframes animationName { 0% { 속성: 값; } 50% { 속성: 값; } 100% { 속성: 값; }}.element {.. 2025. 5. 15. 이전 1 2 3 4 5 ··· 98 다음 728x90 반응형 LIST