애니메이션 곡선 미리 보기
곡선을 고르면 물체가 어떻게 가속하고 감속하는지 볼 수 있습니다. 라이브러리 없이 어떤 페이지에서든 바로 쓸 수 있는 애니메이션 코드 한 줄을 복사하세요.
곡선
방향빠르게 시작해 끝에서 감속합니다.
시간의 25%, 50%, 75% 지점에서 물체가 있는 위치
document.querySelector(".caja").animate({ transform: ["none", "translateX(300px)"] }, { duration: 800, easing: "linear(0, 0.143, 0.271, 0.386, 0.488, 0.578, 0.657, 0.725, 0.784, 0.834, 0.875, 0.909, 0.936, 0.957, 0.973, 0.984, 0.992, 0.997, 0.999, 1, 1)", fill: "forwards" })사용 팁
배너 안으로 들어오는 것「감속」을 쓰세요. 빠르게 도착해서 부드럽게 자리 잡습니다.
배너 밖으로 나가는 것「가속」을 쓰세요. 천천히 출발해서 빠르게 빠져나갑니다.
절제해서바운스와 탄성 곡선은 시선을 확 끕니다. 배너마다 요소 하나에만 쓰세요.
도구에 대한 질문
도구는 무료인가요?
네. 비용 없이 원하는 만큼 사용할 수 있습니다.
어떤 파일이 필요한가요?
검토 도구는 HTML5 배너가 든 .zip 파일을 요구합니다. 기본 .html 파일과 그 리소스가 들어 있어야 합니다. 나머지 도구는 파일이 필요 없습니다.
다른 도구로 만든 배너에도 쓸 수 있나요?
네. BannerMotion으로 만든 배너만이 아니라 어떤 HTML5 배너도 검토할 수 있습니다.
제 파일은 어딘가에 저장되나요?
검토는 브라우저에서 이루어집니다. 예외가 하나 있습니다. 배너가 외부 리소스(예: 웹 폰트)를 요청하면, 미리 보기에서 보는 동안 브라우저가 그 사이트에 해당 리소스를 요청합니다.
계정이 필요한가요?
아니요. 어떤 도구도 계정을 요구하지 않습니다. 사이즈 가이드에서 이메일은 선택 사항입니다.