애니메이터 검토: 포인트 앤 클릭 WordPress 애니메이션 플러그인(코드 프리)

시선을 사로잡는 스크롤과 시간 기반 애니메이션을 WordPress 사이트에 추가하고 싶습니까?

CSS 전문가라면 이러한 애니메이션을 직접 설정할 수 있습니다. 그러나 나머지 사람들에게 WordPress는 콘텐츠에 애니메이션을 추가하는 쉬운 방법을 제공하지 않습니다.

Animator는 CSS Hero 팀의 새로운 독립 실행형 플러그인으로, 기본 편집기를 사용하든 페이지 빌더 플러그인.

기술 전문가가 아닌 경우에도 사이트에서 애니메이션을 설정할 수 있습니다. 그리고 자신만의 CSS를 작성할 수 있더라도 Animator는 여전히 인터페이스를 통해 워크플로우 속도를 높일 수 있습니다.

실습 Animator 검토에서는 이 플러그인이 제공하는 기능을 자세히 살펴보고 플러그인을 사용하여 WordPress 애니메이션을 설정하는 방법을 보여줍니다.

애니메이터 검토: 플러그인은 무엇을 제공합니까?

Animator의 높은 수준의 이점은 CSS, JS 또는 기타 심층적인 기술 지식 없이도 사이트에 수많은 다양한 애니메이션을 추가할 수 있다는 것입니다.

대신 포인트 앤 클릭 인터페이스에서 모든 작업을 수행할 수 있으며 애니메이션을 제어하는 ​​데 도움이 되는 애니메이션 타임라인을 완성할 수 있습니다.

Animator는 인기 있는 CSS Hero 플러그인과 동일한 팀에서 제공됩니다. 간단히 말해서 Animator는 CSS Hero가 일반적인 CSS 스타일에 대해 애니메이션을 적용하는 것입니다.

가장 큰 기능 중 일부를 좀 더 자세히 살펴보겠습니다.

포인트 앤 클릭 인터페이스

애니메이션 관리를 돕기 위해 Animator는 간단한 포인트 앤 클릭 인터페이스를 제공합니다.

두 가지 주요 부분이 있습니다.

1. 사이트의 전체 너비 시각적 미리보기 – 애니메이션을 추가하면 라이브 미리보기에서 어떻게 보이는지 즉시 확인할 수 있습니다. 이 기능은 별도의 미리보기를 지속적으로 다시 로드할 필요 없이 약간의 조정을 할 수 있어 매우 편리합니다.
2. 애니메이션 타임라인 – 타임라인을 사용하여 사용자의 스크롤 동작 또는 시간에 따라 하나 이상의 애니메이션을 설정할 수 있습니다. 물건을 드래그하고 설정을 조정하여 완벽한 효과를 얻을 수 있습니다.

실습 섹션에서 이 인터페이스에 대해 훨씬 더 자세히 살펴보겠지만 전반적으로 사용하기가 매우 쉽습니다.

수많은 애니메이션 속성이 포함된 3개 이상의 애니메이션 고급 모드

애니메이션 설정을 돕기 위해 Animator는 세 가지 고급 모드를 제공합니다.

• Parallax – 뷰포트에서 요소의 백분율 위치를 기반으로 하는 "트윈" 애니메이션입니다. Tween은 inbetween의 줄임말입니다. 여기서 기본 아이디어는 패럴랙스 스크롤 효과를 만들 수 있다는 것입니다.
• 스크롤 – 사용자가 특정 픽셀 수를 스크롤한 후 특정 CSS 스타일 또는 애니메이션을 트리거합니다. 예를 들어 사용자가 페이지를 아래로 스크롤할 때 헤더에 상태별 스타일을 적용할 수 있습니다.
• Timed – 설정된 일정에 따라 발생하는 시간 기반 애니메이션을 생성합니다. 예를 들어 요소에 부동 애니메이션을 추가하여 팝업되도록 합니다.

다음은 다양한 애니메이션 모드를 보여주는 Animator의 몇 가지 일반적인 예입니다.

높은 수준의 애니메이션 모드 외에도 다음을 포함하여 다양한 CSS 속성에 애니메이션을 적용할 수 있습니다.

• 배경색
• 배경 위치
• 상자 그림자
• 글꼴 크기
• 문자 간격
• 불투명
• 관점
• X, Y 또는 Z 회전
• 규모
• X 또는 Y 기울이기
• 너비
• …아주 더 많이

작업을 단순화하기 위해 Animator에는 다음과 같은 많은 사전 설정이 포함되어 있습니다.

그러나 필요한 경우 사전 설정을 뛰어넘는 고유한 애니메이션을 만들 수 있는 옵션도 있습니다.

기본 편집기, 테마 및 페이지 빌더와 함께 작동

기본 WordPress 편집기와 함께 작업하는 것 외에도 Animator는 타사 테마 및 페이지 빌더 플러그인과도 함께 작동합니다.

여기에는 다음 도구가 포함되지만 이에 국한되지는 않습니다.

• 엘리멘터
• 비버 빌더
• 디비
• WPBakery 페이지 빌더
• 아바다
• 아스트라
• 산소

기본적으로 Animator는 해당 요소의 출처에 관계없이 사이트의 모든 요소에서 작동해야 합니다.

예를 들어 디자인에는 Beaver Builder가 마음에 들지만 Beaver Builder의 애니메이션 옵션이 필요에 비해 너무 제한적이라고 느낄 수 있습니다.

Beaver Builder와 함께 Animator를 설치하면 Beaver Builder 디자인에 고급 애니메이션을 추가할 수 있습니다.

수동으로 애니메이션 편집 또는 내보내기(고급 사용자용)

Animator는 기술적이지 않은 사용자가 포인트 앤 클릭 인터페이스를 사용하여 애니메이션을 만들 수 있도록 제작되었지만 고급 사용자는 직접 편집하려는 경우 Animator가 여전히 기본 코드에 대한 액세스를 제공한다는 점을 높이 평가할 것입니다.

필요한 경우 앱 데이터를 내보낼 수도 있습니다.

완전 독립형 플러그인

Animator는 CSS Hero 팀에서 제공하지만 Animator를 사용하기 위해 CSS Hero를 설치할 필요는 없습니다 .

즉, Animator는 완전히 독립형 플러그인입니다.

즉, Animator는 여전히 CSS Hero와 잘 작동하므로 사이트 스타일을 코드 없이 제어하려는 경우 둘 다 자유롭게 사용할 수 있습니다.

Animator 플러그인을 사용하여 WordPress 애니메이션을 만드는 방법

이제 Animator가 무엇을 제공하는지 이해했으므로 사이트에서 실제로 Animator를 사용하는 것이 어떤 것인지 자세히 살펴보겠습니다.

아래에서는 Astra 테마와 기본 WordPress 편집기로 만든 데모 사이트와 Animator를 사용하여 WordPress 애니메이션을 설정하는 방법을 단계별로 보여 드리겠습니다.

1. 애니메이션을 적용하려는 페이지에서 애니메이터 인터페이스를 엽니다.

시작하려면 애니메이션을 적용하려는 콘텐츠가 포함된 페이지에서 애니메이터 인터페이스를 열어야 합니다.

헤더와 같은 사이트 전체 요소에 애니메이션을 적용하려면 헤더가 포함된 페이지를 열면 됩니다. 설정한 모든 애니메이션은 해당 헤더의 모든 인스턴스에 자동으로 적용됩니다.

Animator 인터페이스를 시작하려면 관련 페이지를 보는 동안 WordPress 도구 모음에서 Hero Animator 옵션을 클릭하기만 하면 됩니다.

2. 애니메이션을 적용할 요소를 선택합니다.

Animator 인터페이스를 열면 하단의 Animator 인터페이스와 함께 페이지의 시각적 미리보기를 볼 수 있습니다.

시작하려면 실시간 미리보기에서 애니메이션을 적용할 요소를 클릭하여 선택해야 합니다.

실시간 미리보기 위로 마우스를 가져가면 Animator는 각 요소에 대한 몇 가지 추가 정보를 표시하여 올바른 요소를 선택하는 데 도움을 줍니다.

예를 들어 테스트 디자인에서 이미지를 애니메이션으로 만들려면 이미지를 선택하기만 하면 됩니다.

일부 배경 이미지에 필요할 수 있는 CSS 클래스 또는 ID를 수동으로 입력할 수도 있습니다.

예를 들어 테스트 사이트에서 영웅 이미지를 선택하기 위해 포인트 앤 클릭 방식을 사용하는 데 어려움을 겪었습니다. 다른 이미지를 선택하기 위해 포인트 앤 클릭을 사용하는 데 문제가 발생하지 않았기 때문에 Astra 데모 사이트가 특수 컨테이너 블록에서 이미지를 컨테이너 배경으로 설정한 방식과 관련이 있는 것 같습니다.

3. 애니메이션 모드 선택

애니메이션을 적용할 요소를 선택한 후 기준 상자를 사용하여 애니메이션 모드를 선택하려고 합니다.

다시 말하지만 세 가지 옵션이 있습니다.

1. 뷰포트 높이(일명 시차)
2. 스크롤된 픽셀
3. 시간

기본적으로 "[이 애니메이션 모드]와 관련하여 [이 요소]를 애니메이션화하고 싶습니다."와 같은 선언적 진술을 하고 있습니다.

이 예에서는 루프 타이머를 기준으로 내 사이트의 이미지에 애니메이션을 적용하도록 설정했습니다.

참고 – 단일 요소에 여러 유형의 애니메이션을 추가할 수 있습니다. 예를 들어 시간 기반 애니메이션과 시차 애니메이션(뷰포트 높이)을 모두 추가할 수 있습니다.

4. 타임라인을 사용하여 애니메이션 설정

이제 애니메이션을 적용할 대상을 선택했으므로 타임라인을 사용하여 실제로 애니메이션을 설정할 준비가 되었습니다.

그렇게 하려면 더하기 아이콘을 클릭하여 애니메이션 추가 :

그러면 해당 애니메이션 모드에서 사용할 수 있는 다양한 유형의 애니메이션이 포함된 팝업이 열립니다.

예를 들어 시간 기반 애니메이션의 경우 일부 사전 설정 옵션에는 다음이 포함됩니다.

• 되튐
• 떨어지는
• 뜨다
• 글자 공간 흐림
• 큰 천막
• 섀도우 펄스
• 수축 점프
• 단순 회전

해당 애니메이션이 어떻게 보이는지 애니메이션 미리 보기를 볼 수 있으며, 이는 올바른 애니메이션을 선택하는 데 정말 유용합니다.

사전 설정 목록에 없는 다른 유형의 애니메이션을 수행하려는 경우 고유한 애니메이션 유형을 만들 수도 있습니다.

애니메이션을 선택하면 타임라인에 나타납니다. 애니메이션은 실시간 미리보기에도 적용되므로 사이트에서 어떻게 보이는지 정확히 확인할 수 있습니다.

시간 기반 애니메이션의 경우 애니메이션이 완료될 때 타임라인 막대를 통해 이동할 때 선이 나타나는 것을 볼 수 있는데 이는 정말 편리합니다.

애니메이션을 더 길게 또는 더 짧게 만들고 싶다면 타임라인에서 막대를 드래그하면 됩니다.

점 3개 아이콘을 클릭하여 애니메이션을 반복할지 여부(그렇다면 얼마나 오래)와 같은 고급 설정에 액세스할 수도 있습니다.

여러 애니메이션을 추가하려는 경우 단계를 반복하여 다른 애니메이션을 추가할 수 있습니다.

그런 다음 해당 애니메이션을 타임라인에 정렬하여 원하는 효과를 얻을 수 있습니다.

여러 시간 기반 애니메이션을 사용하려면 무한 루프를 해제해야 합니다.

동일한 유형의 애니메이션을 만드는 것으로 제한되지 않습니다. 예를 들어 기술적으로 동일한 요소에 시간 및 스크롤 기반 애니메이션을 모두 추가할 수 있습니다.

패럴랙스 스크롤 요소의 경우 Animator에서 LERP(선형 보간)를 제어하여 요소의 스크롤 동작을 부드럽게 할 수도 있습니다.

이를 조정하려면 인터페이스 왼쪽에 있는 Lerp 드롭다운을 사용할 수 있습니다.

5. 애니메이션 게시

애니메이션이 마음에 들면 저장 버튼을 클릭하기만 하면 사이트에 애니메이션이 표시됩니다.

사이트의 모바일 버전에 애니메이션을 게시할지 여부를 선택할 수 있는 편리한 옵션도 있습니다.

다른 애니메이션 모드 살펴보기

다른 애니메이션 모드는 타임라인에서 약간 다른 인터페이스를 갖습니다.

예를 들어 뷰포트 높이 애니메이션을 선택하면 타임라인이 초에서 상대 백분율 뷰포트 높이로 변경됩니다.

예를 들어 150%에서 시작하여 -50%까지 가는 것을 볼 수 있습니다.

배경색과 같은 것을 애니메이션으로 만드는 경우 상대적인 스크롤 깊이에 따라 다른 색상을 선택할 수 있습니다.

Scrolled Pixels 애니메이션의 경우 상대 백분율이 아닌 특정 픽셀 번호가 표시됩니다.

예를 들어 애니메이션 단계를 600픽셀로 설정하면 사용자가 정확히 600픽셀을 스크롤했을 때 애니메이션이 발생합니다.

코드를 직접 편집, 내보내기 또는 조작하는 방법

고급 사용자의 경우 Animator를 사용하여 애니메이션의 원시 JSON 데이터를 볼 수도 있습니다. 이를 사용하여 애니메이션을 다시 편집하거나 텍스트 파일에 복사/붙여넣기하여 현재 애니메이션의 전체 스냅샷을 얻을 수 있습니다.

더 많은 기술 사용자를 대상으로 하는 작업 패널도 있어 자신의 자바스크립트 코드를 추가하는 플러그인의 데이터 JSON 개체를 프로그래밍 방식으로 조작할 수 있습니다. 저는 개발자가 아니기 때문에 이것이 어떤 기회를 추가하는지 완전히 확신하지 못하지만 개발자가 이러한 수준의 제어에 감사할 것이라고 생각합니다.

저장 버튼 옆에 있는 세 개의 점 아이콘을 클릭하고 데이터 내보내기를 선택하여 이러한 옵션에 액세스할 수 있습니다.

애니메이터 가격

Animator는 프리미엄 버전으로만 제공되지만 제공되는 제품에 비해 가격이 저렴합니다.

정상적인 가격으로 무제한 사이트 사용과 1년 지원 및 업데이트 비용은 $49입니다.

그러나 출시를 축하하기 위해 Animator 플러그인 리뷰를 작성할 당시 플러그인의 가격은 현재 29달러에 불과합니다.

이 $29 가격으로 구매하는 경우 첫 해 이후에도 지원 및 업데이트를 계속 받고 싶다면 갱신을 위해 해당 가격을 고정할 수 있습니다.

구매하기 전에 플러그인을 테스트하려는 경우 Animator를 사용하면 완전히 작동하는 애니메이션 인터페이스의 데모를 시작할 수 있습니다. 이 페이지에서 또는 Animator 홈페이지에서 데모 시도 버튼을 클릭하여 액세스할 수 있습니다.

또한 30일 환불 보장이 있으므로 지갑에 대한 위험 없이 자신의 사이트에서 테스트할 수 있습니다.

애니메이터에 대한 최종 생각

전반적으로 Animator는 손쉬운 포인트 앤 클릭 애니메이션을 제공하겠다는 약속을 이행합니다.

확실히 저는 개발자는 아니지만 매우 빠르게 시작하고 실행할 수 있었습니다.

타임라인 기반 인터페이스를 통해 애니메이션을 쉽게 구성하고 설정을 관리할 수 있습니다. 페이지를 새로 고칠 필요 없이 시각적 미리 보기에서 해당 애니메이션이 어떻게 보이는지 즉시 확인할 수 있는 것도 매우 유용합니다.

Animator는 비기술적인 사용자에게도 충분히 간단하지만 고급 사용자는 속도를 높일 수 있기 때문에 여전히 이점을 누릴 수 있다고 생각합니다. 따라서 자신만의 CSS를 작성할 수 있더라도 여전히 Animator를 사용하여 시간을 절약하는 것이 좋습니다.

Animator를 직접 사용해 보려면 아래 버튼을 사용하여 시작할 수 있습니다.