다방향 이동(번역)
요소들에게 부드럽고 떠다니는 모션감을 선사하세요. 번역 컨트롤을 사용하여 수평 (X 축) 또는 수직 (Y 축) 으로 이동합니다. 시작점과 끝점을 픽셀 단위로 설정하여 앞뒤로 또는 위아래로 표류하는 효과를 만들어냅니다. 주요 기능에 주의를 집중시키거나 디자인에 장난스러운 느낌을 더하는 데 적합합니다.
- 수평 플로트: 느리게 움직이는 구름처럼 요소를 왼쪽에서 오른쪽으로 표류시킵니다(X 번역).
- 수직 바운스: 아이콘이나 배지에 대해 부드러운 위아래 바운스(Y 번역)를 만듭니다.
- 복잡한 경로에 대한 결합: 대각선 또는 원형 부동 경로에 대해 X와 Y를 모두 함께 사용합니다.
스케일링, 회전 및 타이밍
단순한 상하 모션을 뛰어넘습니다. 요소를 스케일링하여 호흡을 시킵니다. 스케일 X 와 스케일 Y 를 독립적으로 사용하여 요소의 너비와 높이를 따로 늘리거나 스쿼시합니다. 천천히 연속 회전하는 회전을 추가하면 부드럽게 펄스하는 호출-작업 버튼부터 천천히 회전하는 로고까지 모든 것을 만들 수 있습니다.
- 맥동 효과: 스케일 X/Y를 사용하여 요소가 리드미컬하게 성장하고 수축하여 눈을 끌게 합니다.
- 독립 제어: 요소의 너비 (Scale X) 를 늘리면서 고유한 모션을 위해 높이를 동일하게 유지합니다.
- 연속 회전: 로고나 장식 아이콘에 느리고 끝없는 회전을 적용합니다.
부동 효과에 대해 자주 묻는 질문
이것은 복잡해 보입니다. 사용하기 어렵습니까?
전혀! 패널이 강력해서 자세히 보일 수도 있지만,간단하게 시작합니다. 하나의 효과 (Translate Y 와 같은) 를 활성화하고,작은 “To” 값 (20px 와 같은) 을 설정하면,떠다니는 애니메이션이 있습니다. 다른 컨트롤은 여러분이 더 창의적이 되고 싶을 때 배우게 됩니다.
모바일에서 이러한 3D 회전을 사용할 수 있습니까?
시각적 효과는 효과가 있지만 “진정한” 3D 환경은 아닙니다. 모든 최신 모바일 브라우저에서 지원되는 CSS 를 사용하여 3D 회전을 시뮬레이션합니다. 보기에는 훌륭하지만 강렬한 3D 의 경우 다른 도구가 필요합니다. 설계된 틸팅 및 선삭 효과의 경우 완벽합니다.
별도의 Scale X와 Scale Y에 대한 실제 용도는 무엇입니까?
“알려줘” 버튼을 상상해 보세요. 스케일 Y 를 사용하여 빠르게 스쿼시 다운 (촉각 피드백 제공) 시킨 다음 정상으로 돌아갈 수 있습니다. 또는 음악 플레이어의 경우 음파 그래픽이 각 막대에서 독립적으로 스케일 Y 를 사용하여 리듬으로 이동할 수 있습니다.
한 페이지에 이러한 효과 중 많은 부분을 사용하면 성능이 저하됩니까?
배 밖으로 나가면 예 – 무엇이든 좋아. 10-20 개의 다른 복잡한 애니메이션을 12 개의 요소에 적용하면 느린 장치에서 잼이 발생할 수 있습니다. 핵심은 미묘함입니다. 섹션 당 1-2 개의 기본 효과를 사용하십시오. 부드러운 플로트와 약간의 회전은 일반적으로 전문적이고 활기찬 효과에 필요한 전부입니다.
트렌드 엘리먼트 위젯 및 확장
더 짧은 시간에 정교한 웹사이트를 구축하세요.
