애니메이션 설정
Slidde.co는 웹 요소에 표준 CSS 키프레임 애니메이션을 쉽게 적용할 수 있도록 합니다. 시작하는 데 도움이 되는 단계별 가이드를 제공합니다.
사이드바의 애니메이션 옵션
- 요소 선택: 페이지에서 아무 요소나 클릭하세요.
- 애니메이션 모달 열기: 오른쪽 사이드바에서 애니메이션 탭 버튼을 클릭하면 애니메이션 옵션을 찾을 수 있습니다. 클릭하여 모달 창을 엽니다.
- 프리셋으로 시작하기: 프리셋 애니메이션으로 시작하는 것을 권장합니다. 나중에 필요에 맞게 수정할 수 있습니다. 프리셋 버튼을 클릭하여 프리셋으로 교체할 수 있습니다. 버튼의 플러스 아이콘을 클릭하면 프리셋이 현재 애니메이션에 추가됩니다.
애니메이션 커스터마이징
애니메이션 모달은 CSS 키프레임 애니메이션 설정 과정을 저코드 인터페이스로 단순화하여 코딩에 익숙하지 않아도 접근할 수 있도록 합니다.
키프레임 애니메이션은 특정 퍼센트에 대한 CSS 속성을 정의하는 곳입니다. 브라우저가 전환을 처리해 줍니다.
예를 들어, 4초의 지속 시간을 가진 다음과 같은 키프레임이 있다면:
0% translateX(0)
50% translateX(-20px)
100% trasnlateX(0)
객체는 2초 동안 아래로 20px 이동한 후, 다시 원래 위치로 2초 동안 위로 20px 이동합니다.
문제가 발생하거나 키프레임 애니메이션에 대해 더 알고 싶다면:
- 온라인 검색: 특정 질문을 구글링하세요. 많은 예제와 리소스가 있습니다.
- CSS 키프레임 튜토리얼: 공식 MDN의 CSS 키프레임 가이드를 참조하여 포괄적인 정보를 얻으세요.
트리거
이 필드는 애니메이션이 재생되는 시점을 제어합니다.
- 요소 표시됨: 기본 설정입니다. 요소가 화면에 스크롤되거나 포함된 섹션이 표시될 때 애니메이션이 실행됩니다. 해시 섹션
- 요소 표시됨 (매번 재생): 위와 동일하지만, 요소가 표시될 때마다 애니메이션이 재생됩니다.
- 페이지 로드됨: 페이지가 로드될 때 애니메이션이 실행됩니다.
대상
일반적으로 이 설정을 할 필요는 없습니다. 기본값은 &로, 이는 루트 요소를 의미합니다.
그러나 설정이 필요한 경우도 있습니다.
고급 배경 요소를 애니메이션하려면, 대상를 첫 번째 자식 요소로 설정할 수 있습니다. 고급 배경 요소는 항상 루트 요소의 첫 번째 자식이기 때문입니다.
모든 자식 요소에 계단식 지연을 적용하려면 Delay & staggering delay 섹션을 참조하세요.
Delay & staggering delay
지연를 1000ms로 설정하면, 애니메이션은 1000ms 대기 후 재생됩니다.
스태거를 50ms로 설정하고 대상 요소를 모든 직접 자식 요소로 설정하면, 애니메이션은 각 직접 자식 요소에 적용되며 다음과 같이 대기합니다.
- 첫 번째 요소, 1000ms,
- 두 번째 요소, 1050ms,
- 세 번째 요소, 1100ms,
- ...
Text staggering
이는 텍스트 컴포넌트에 적용됩니다.
스태거를 설정하고 대상 요소를 모든 글자로 설정하면, 계단식 효과가 각 글자에 적용됩니다.
css animation 속성 사용
일반 css 애니메이션은 CSS의 모든 요소에 항상 사용할 수 있습니다. 그러나 편집기에서 더 쉽게 편집할 수 있도록 특정 css 규칙에 대해 Disable in canvas를 켜야 할 수도 있습니다.