애니메이터 검토: 한 번의 클릭으로 WordPress 애니메이션 플러그인
게시 됨: 2023-02-27Animator는 맞춤형 WordPress 애니메이션을 만들기 위한 코드 없는 포인트 앤 클릭 인터페이스입니다. CSS Hero와 같은 팀에서 제작했으며 사용이 간편합니다. 포괄적인 Animator 리뷰에서 자세히 알아보세요.
평가
Animator는 기술적이지 않은 사용자에게는 충분하지만, 숙련된 사용자는 프로세스 속도를 높일 수 있기 때문에 이점을 얻을 수 있습니다. 자신만의 CSS를 개발하는 데 능숙하더라도 Animator를 사용하여 시간을 절약할 수 있습니다.
애니메이터 찾기
WordPress 사이트에 매력적인 스크롤 및 시간 기반 애니메이션을 제공하고 싶습니까?
이러한 애니메이션은 CSS에 정통한 경우 직접 만들 수 있습니다. 그러나 나머지 사람들에게는 WordPress의 콘텐츠에 애니메이션을 추가하는 간단한 방법이 없습니다.
CSS Hero 팀의 새로운 독립형 플러그인인 Animator는 기본 편집기 또는 페이지 빌더 플러그인.
이를 통해 기술적으로 정통하지 않더라도 사이트에서 애니메이션을 계속 구축할 수 있습니다. 자체 CSS를 작성할 수 있지만 Animator의 UI를 사용하면 워크플로 속도를 높일 수 있습니다.
애니메이터는 무엇을 제공합니까?
Animator의 가장 큰 장점은 CSS, JS 또는 기타 심도 있는 기술 지식 없이도 사이트에 다양한 애니메이션을 추가할 수 있다는 것입니다.
대신 애니메이션 타임라인이 포함된 포인트 앤 클릭 인터페이스로 애니메이션을 제어할 수 있습니다.
인기 있는 CSS Hero 플러그인에 익숙하다면 Animator를 알아볼 것입니다. 한마디로 Animator는 CSS Hero와 동등한 CSS 스타일입니다.
가장 중요한 몇 가지 측면을 더 깊이 살펴보겠습니다.
포인트 앤 클릭을 사용한 인터페이스
Animator에는 애니메이션을 제어하는 데 도움이 되는 간단한 포인트 앤 클릭 인터페이스가 있습니다.
두 가지 주요 구성 요소가 있습니다.
- 사이트의 전체 너비 시각적 미리보기 – 애니메이션을 추가하면 실시간 미리보기에서 애니메이션이 어떻게 보이는지 바로 확인할 수 있습니다. 이는 계속해서 다른 미리 보기를 다시 로드하지 않고도 약간의 조정을 수행하는 데 매우 유용합니다.
- 애니메이션 타임라인 – 사용자의 스크롤 동작 또는 시간을 기반으로 하나 이상의 애니메이션을 생성할 수 있습니다. 개체를 이동하고 설정을 변경하여 원하는 효과를 얻을 수 있습니다.
실습 부분에서 이 인터페이스에 대해 훨씬 더 광범위하게 살펴볼 수 있습니다…
그러나 사용이 매우 간단합니다.
애니메이션 속성이 많은 3가지 이상의 고급 애니메이션 모드
Animator에는 애니메이션을 설정하는 데 도움이 되는 세 가지 고급 옵션이 있습니다.
- 시차 – 뷰포트에서 요소의 위치 백분율을 기반으로 하는 "트윈" 애니메이션. Tween은 in between의 약자이며 주요 개념은 시차 스크롤 효과를 만들 수 있다는 것입니다.
- 스크롤 – 사용자가 특정 양의 픽셀을 스크롤한 후 관련 CSS 스타일 또는 애니메이션이 트리거됩니다. 예를 들어 방문자가 페이지를 아래로 스크롤하면 헤더에 상태별 스타일을 적용할 수 있습니다.
- Timed – 미리 정해진 시간표에 따라 애니메이션이 생성됩니다. 예를 들어 요소에 부동 동작을 추가하여 눈에 띄게 만듭니다.
다음은 다양한 애니메이션 모드를 보여주는 일반적인 Animator 샘플입니다.
높은 수준의 애니메이션 옵션 외에도 다음을 포함하여 광범위한 CSS 속성을 애니메이션으로 추가할 수 있습니다.
- 배경색
- 배경 위치
- 상자 그림자
- 글꼴 크기
- 문자 간격
- 불투명
- 관점
- X, Y 또는 Z 회전
- 규모
- X 또는 Y 기울이기
- 너비
- …아주 더 많이
작업을 더 쉽게 하기 위해 Animator에는 다음과 같은 많은 사전 설정이 포함되어 있습니다.
그럼에도 불구하고 자신만의 애니메이션을 만들 수도 있으므로 필요한 경우 사전 설정을 뛰어넘을 수도 있습니다.
기본 편집기, 테마 및 페이지 빌더와 호환 가능
Animator는 핵심 WordPress 편집기 외에도 타사 테마 및 페이지 빌더 플러그인과 함께 작동합니다.
여기에는 아래 나열된 도구가 포함되지만 이에 국한되지는 않습니다.
- 엘리멘터
- 비버 빌더
- 디비
- WPBakery 페이지 빌더
- 아바다
- 아스트라
- 산소
애니메이터는 출처와 관계없이 사이트의 모든 요소에서 작업할 수 있어야 합니다.
예를 들어 디자인을 위해 Beaver Builder를 즐기지만 애니메이션 기능이 필요에 비해 너무 제한적이라고 생각할 수 있습니다.
Beaver Builder와 함께 Animator를 설치하여 Beaver Builder 디자인에 더 복잡한 애니메이션을 추가할 수 있습니다.
애니메이션을 수동으로 수정하거나 내보냅니다(고급 사용자용).
Animator는 기술적이지 않은 사용자가 포인트 앤 클릭 인터페이스로 애니메이션을 만들 수 있도록 설계되었지만 전문 사용자는 직접 변경하려는 경우 Animator에서 여전히 기본 코드에 액세스할 수 있다는 점을 높이 평가할 것입니다.
필요한 경우 앱 데이터를 내보낼 수도 있습니다.
독립형 플러그인
Animator는 CSS Hero 팀에서 만들지만 사용하기 위해 CSS Hero를 설치할 필요는 없습니다.
즉, Animator는 독립 실행형 플러그인입니다.
하지만 Animator는 여전히 CSS Hero와 잘 작동하므로 사이트 스타일을 코드 없이 제어하려는 경우 두 가지를 모두 사용할 수 있습니다.
Animator 플러그인을 사용하여 WordPress 애니메이션을 만드는 방법
Animator가 무엇을 제공해야 하는지 알았으니 이제 사이트에서 Animator를 사용하는 것이 어떤지 살펴보겠습니다.
다음으로 Animator를 사용하여 WordPress 애니메이션을 만드는 과정과 Astra 테마 및 기본 WordPress 편집기로 구축된 데모 사이트를 안내합니다.
#1. 애니메이션을 적용하려는 페이지에서 애니메이터 인터페이스를 활성화합니다.
시작하려면 애니메이션을 적용하려는 자료가 포함된 페이지에서 애니메이터 인터페이스를 엽니다.
사이트 전체 요소(예: 머리글)에 애니메이션을 적용하려면 머리글이 포함된 페이지를 열면 됩니다. 생성한 애니메이션은 해당 헤더의 모든 인스턴스에 적용됩니다.
Animator 인터페이스에 액세스하려면 해당 페이지를 보는 동안 WordPress 도구 모음에서 Hero Animator 옵션을 클릭하기만 하면 됩니다.
#2. 애니메이션을 적용할 요소를 선택합니다.
Animator 인터페이스를 실행하면 하단에 페이지의 시각적 미리보기와 Animator 인터페이스가 표시됩니다.
시작하려면 실시간 미리보기에서 애니메이션을 적용할 요소를 클릭하여 선택합니다.
실시간 미리보기 위로 마우스를 가져가면 Animator가 각 부분에 대한 몇 가지 추가 정보를 표시하여 올바른 항목을 선택하는 데 도움을 줍니다.
예를 들어 테스트 디자인에서 이미지를 애니메이션으로 만들려면 다음과 같이 간단히 선택합니다.
일부 배경 사진에 필요할 수 있는 CSS 클래스 또는 ID를 수동으로 입력할 수도 있습니다.
#삼. 애니메이션 모드 선택
애니메이션을 적용할 요소를 선택한 후 상대 대상 상자를 사용하여 애니메이션 모드를 선택합니다.
한 번 더 세 가지 가능성이 있습니다.
- 뷰포트 높이(일명 시차)
- 스크롤된 픽셀
- 시간
기본적으로 "[이 애니메이션 모드]를 기준으로 [이 요소]에 애니메이션을 적용하고 싶습니다."와 같은 선언문을 만드는 것입니다.
팁 – 단일 요소에 다양한 유형의 애니메이션을 적용할 수 있다는 점에 유의해야 합니다. 예를 들어 시간 기반 애니메이션과 시차 애니메이션(뷰포트 높이)을 모두 포함할 수 있습니다.
#4. 타임라인을 사용하여 애니메이션 만들기
무엇을 애니메이션할지 결정했으므로 이제 타임라인을 사용하여 애니메이션을 만들 수 있습니다.
이렇게 하려면 애니메이션 추가 옆에 있는 더하기 기호를 클릭합니다.
그러면 해당 애니메이션 모드와 함께 사용할 수 있는 다양한 유형의 애니메이션이 포함된 팝업이 열립니다.
예를 들어, 시간 기반 애니메이션에 대한 일부 사전 설정 매개변수에는 다음이 포함됩니다.
- 되튐
- 떨어지는
- 뜨다
- 글자 공간 흐림
- 큰 천막
- 섀도우 펄스
- 수축 점프
- 단순 회전
애니메이션이 어떻게 보이는지 애니메이션 미리보기를 얻을 수 있어 완벽한 애니메이션을 선택하는 데 정말 유용합니다.
미리 정의된 목록에 없는 작업을 수행하려는 경우 고유한 애니메이션 유형을 디자인할 수도 있습니다.
애니메이션을 선택하면 타임라인에 나타납니다. 애니메이션은 라이브 미리 보기에도 적용되어 사이트에 어떻게 표시되는지 정확하게 확인할 수 있습니다.
시간 기반 애니메이션을 사용하면 애니메이션이 완료됨에 따라 타임라인 바에 선이 표시되는데 이는 매우 유용합니다.
타임라인에서 막대를 드래그하여 애니메이션 길이를 변경할 수 있습니다.
또한 애니메이션을 반복할지 여부와 같은 세 개의 점 기호를 클릭하여 보다 정교한 설정에 액세스할 수 있습니다(그렇다면 얼마나 오래).
많은 애니메이션을 생성하려면 각 애니메이션에 대해 절차를 반복하면 됩니다.
그런 다음 원하는 효과를 얻기 위해 애니메이션을 타임라인에 정렬할 수 있습니다.
많은 시간 기반 애니메이션을 사용하려면 무한 반복을 비활성화해야 합니다.
또한 동일한 스타일의 애니메이션을 만드는 데 제한을 두지 않습니다. 기술적으로 동일한 요소에 시간 및 스크롤 기반 애니메이션을 모두 적용할 수 있습니다.
Animator를 사용하면 시차 스크롤 항목의 스크롤 동작을 부드럽게 하기 위해 LERP(선형 보간)를 제어할 수 있습니다.
이를 변경하려면 화면 왼쪽에 있는 Lerp 드롭다운 메뉴를 사용하십시오.
#5. 애니메이션 업로드
애니메이션이 만족스러우면 저장 버튼을 클릭하기만 하면 사이트에 애니메이션이 적용됩니다.
애니메이션을 사이트의 모바일 버전에 게시할지 여부를 선택할 수 있는 유용한 기능도 있습니다.
코드를 직접 편집, 내보내기 또는 조작하는 방법
Animator를 사용하면 고급 사용자가 애니메이션의 원시 JSON 데이터에 액세스할 수도 있습니다. 이를 사용하여 애니메이션을 다시 편집하거나 텍스트 파일에 복사/붙여넣기하여 현재 애니메이션의 전체 스냅샷을 얻을 수 있습니다.
더 많은 기술 사용자를 위한 작업 패널도 있어 자신의 자바스크립트 코드를 추가하여 플러그인의 데이터 JSON 개체를 동적으로 변경할 수 있습니다. 나는 개발자가 아니기 때문에 이것이 어떤 잠재력을 가져올지 확신할 수 없지만 개발자들이 향상된 제어를 환영할 것이라고 확신합니다.
이러한 옵션은 저장 버튼 옆에 있는 세 개의 점 아이콘을 클릭하고 데이터 내보내기를 선택하여 사용할 수 있습니다.
가격
Animator에는 프리미엄 에디션만 있지만 제공하는 제품에 비해 합리적인 가격입니다.
무제한 사이트의 경우 $49이며 정상 가격으로 1년 유지 관리 및 업데이트가 필요합니다.
마무리
Animator는 사용하기 쉬운 포인트 앤 클릭 애니메이션을 제공하겠다는 약속을 이행합니다. 타임라인 기반 인터페이스를 통해 애니메이션을 쉽게 구성하고 관리할 수 있으며 시각적 미리보기 기능을 통해 웹 사이트를 다시 로드할 필요가 없어 시간이 절약됩니다.
Animator는 비기술적인 개인에게 사용자 친화적이지만 숙련된 사용자도 자신의 CSS를 개발할 수 있는 기술이 있더라도 시간 절약 기능의 이점을 누릴 수 있습니다.
Animator를 사용해 보려면 아래 링크를 클릭하여 시작하십시오.