미분류

Fancy Animations 플러그인 사용법 가이드

1:24 min
0 comments
01 10월 2024
doogak
1913

작동 방식 Fancy Animations는 CSS 애니메이션 프레임워크로, 원하는 요소에 애니메이션 이름이 포함된 CSS 클래스를 추가하기만 하면 쉽게 사용할 수 있습니다. 이 간단한 방식 덕분에 복잡한 코드 없이도 다양한 애니메이션을 구현할…

작동 방식

Fancy Animations는 CSS 애니메이션 프레임워크로, 원하는 요소에 애니메이션 이름이 포함된 CSS 클래스를 추가하기만 하면 쉽게 사용할 수 있습니다. 이 간단한 방식 덕분에 복잡한 코드 없이도 다양한 애니메이션을 구현할 수 있어 웹사이트의 시각적 효과를 크게 향상시킬 수 있습니다.

Fancy Animations에서 제공하는 애니메이션 클래스는 다른 클래스와 구분되기 위해 ‘fb-anim–’으로 시작합니다. 이 규칙을 통해 다양한 애니메이션 효과를 쉽게 식별하고 적용할 수 있어, 유지보수 및 관리도 용이합니다. 애니메이션을 추가하고 싶은 요소에 적절한 클래스 이름을 지정하면, 해당 요소에 생동감 넘치는 애니메이션 효과를 줄 수 있습니다.

애니메이션 적용 대상

Fancy Animations 플러그인은 섹션, 컨테이너, 블록, 텍스트, 이미지, 아이콘 등 거의 모든 요소에 애니메이션을 적용할 수 있습니다.

이미지에 대한 제약 사항

일부 애니메이션은 :before 또는 :after 가상 요소를 사용하므로, 이러한 애니메이션을 이미지에 직접 적용할 수 없습니다. 만약 이러한 애니메이션을 이미지에 적용하고 싶다면, 이미지를 블록이나 div 태그 안에 배치하고 해당 블록이나 div에 애니메이션 클래스를 추가해야 합니다. 이를 통해 이미지에도 간접적으로 애니메이션 효과를 적용할 수 있으며, 디자인 요소 간의 일관성을 유지할 수 있습니다.

애니메이션 조합하기

Fancy Animations에서는 기본 애니메이션과 고급 애니메이션을 조합하여 하나의 요소에 여러 클래스를 추가할 수 있습니다. 이를 통해 단일 요소에 다양한 효과를 결합하여 더 복잡하고 독창적인 애니메이션을 연출할 수 있습니다. 여러 클래스를 조합함으로써 애니메이션 효과를 강화하고, 더욱 다채로운 시각적 경험을 제공할 수 있습니다.

애니메이션 조합 예시

Fancy Animations 플러그인에서는 다양한 애니메이션을 조합하여 독창적인 효과를 만들어낼 수 있습니다. 아래는 조합 가능한 애니메이션의 예시입니다:

Zoom 또는 Slide와 Fade의 조합: 확대되거나 슬라이드되는 효과에 페이드를 추가하여 더 부드러운 전환을 연출합니다.
Sweep, Circle, 또는 Fan과 Slide 및 Fade의 조합: 복잡한 움직임에 슬라이드와 페이드 효과를 더해 생동감 있는 애니메이션을 만듭니다.
Sweep, Circle, 또는 Fan과 Zoom 및 Fade의 조합: 팬, 원형 이동 등의 효과와 함께 확대 및 페이드 효과를 더하여 역동적인 전환을 구현합니다.
Ring과 Sweep, Circle, 또는 Fan, Slide, 그리고 Fade의 조합: 고리 모양의 애니메이션에 여러 다른 이동 효과를 조합하여 복잡하면서도 시선을 끄는 연출을 제공합니다.

이와 같은 조합을 통해 웹사이트의 요소에 맞춤형 애니메이션을 적용하여 사용자의 시선을 끌고 더 몰입도 높은 인터페이스를 구현할 수 있습니다.

애니메이션 적용 제한 사항

Fancy Animations에서 애니메이션을 조합할 때에는 몇 가지 제한 사항이 있습니다:

같은 그룹의 애니메이션은 조합할 수 없습니다. 예를 들어, 유사한 동작을 하는 애니메이션은 함께 사용할 수 없습니다.
Zoom, Slide, Bounce, Rotate 애니메이션은 모두 transform을 사용하므로 이들을 조합할 수 없습니다. 다만, .fb-anim-slide-relative라는 보조 애니메이션 클래스를 사용하면 다른 transform을 사용하는 애니메이션과 슬라이드 애니메이션을 결합할 수 있습니다. 이 클래스는 요소에 position: relative 속성을 추가하므로 이 점을 고려해야 합니다.
Fan, Sweep, Circle 애니메이션은 모두 clip-path를 사용하기 때문에 서로 조합할 수 없습니다.
.fb-anim-border는 다른 애니메이션과 결합할 수 없으며, 오직 네모난 테두리를 가진 요소에서만 작동합니다.

이러한 제한 사항을 염두에 두고 애니메이션을 조합하면, 보다 안정적이고 원하는 효과를 정확히 연출할 수 있습니다. 애니메이션을 계획할 때는 이러한 제약을 고려하여 적절한 효과를 선택하는 것이 중요합니다.

애니메이션 적용 시 디자인 고려 사항

Fancy Animations Framework는 특정 요소에 강력한 애니메이션을 적용하여 상호작용성과 시각적 미감을 높이는 다양한 옵션을 제공합니다. 하지만 일부 애니메이션은 transform, position: relative, box-shadow, ::after와 같은 CSS 속성을 사용하며, 이는 대상 요소의 디자인에 영향을 미칠 수 있습니다. 대부분의 경우 이러한 애니메이션이 원치 않는 효과를 일으키지 않지만, 웹사이트의 전체적인 디자인에 미칠 영향을 신중하게 고려하는 것이 중요합니다.

아래는 Fancy Animations Framework에서 사용할 수 있는 애니메이션과 그에 관련된 CSS 속성입니다. 이를 통해 특정 요소에 적합한지 여부를 평가할 수 있습니다:

`transform`을 사용하는 애니메이션

Zoom: 선택한 요소에 확대 또는 축소 효과를 적용합니다.
Slide: 요소를 특정 방향으로 슬라이드시켜 매력적인 슬라이딩 효과를 추가합니다.
Rotate: 요소를 특정 지점을 중심으로 회전시켜 시각적으로 매력적인 회전 효과를 제공합니다.
Bounce: 요소에 튀는 효과를 더해 애니메이션에 역동성을 부여합니다.

`position: relative`를 사용하는 애니메이션

Slide-Relative: 다른 transform을 사용하는 애니메이션이나 요소와 보완적으로 설계되었습니다. 일반적인 Slide 애니메이션과 달리 Slide-Relative는 화면의 일정 비율을 기준으로 이동하므로 보다 독립적인 동작을 구현할 수 있습니다.

`clip-path`를 사용하는 애니메이션

Circle: 요소 주변에 원형 애니메이션을 제공하여 원형 마스킹 효과를 만듭니다.
Sweep: 요소 주변에 스윕 애니메이션을 생성하여 콘텐츠를 강조하거나 돋보이게 하는 데 유용합니다.
Fan: 요소 주변에 팬 효과를 적용하여 콘텐츠를 점진적으로 매력적으로 노출시키는 데 유용합니다.

`box-shadow`를 사용하는 애니메이션

Ring: 요소 주변에 링 효과를 추가하여 콘텐츠를 시각적으로 강조하거나 초점을 맞추는 데 유용합니다.

`::after`를 사용하는 애니메이션

Border: 요소 주위를 끊임없이 움직이는 선을 생성하여 시각적으로 독특하고 동적인 효과를 제공합니다. 특정 요소를 두드러지게 강조하고자 할 때 사용하는 것이 좋으며, 회전하는 선을 통해 독특한 인상을 줄 수 있습니다.

Fancy Animations Framework의 다양한 애니메이션을 적절히 활용하면 웹사이트의 각 요소에 독창적인 느낌을 부여할 수 있습니다. 하지만 각 애니메이션이 사용되는 방식과 그로 인한 영향을 신중하게 고려하여 잠재적인 디자인 충돌을 피하는 것이 중요합니다.

시간 제어

플러그인 설정에서 기본 애니메이션 타이밍을 정의하지만, 이를 변경하여 창의적으로 활용할 수 있습니다. 일부 요소가 다른 요소보다 나중에 나타나게 하거나, 특정 요소의 애니메이션을 더 빠르게 만들 수 있습니다. 이러한 시간 제어를 통해 애니메이션의 순서를 조절하고 다양한 전환 효과를 구현하여, 웹사이트의 사용자 경험을 더욱 흥미롭게 만들 수 있습니다.

애니메이션 속도 및 지연 설정

애니메이션 속도 제어

애니메이션의 속도나 지속 시간을 조절하려면 아래의 클래스를 사용할 수 있습니다. 각 요소에는 하나의 클래스만 적용할 수 있으며, 여러 개의 속도 제어 클래스를 동시에 사용할 수 없습니다.

.fb-anim–t-0-3s: 0.3초
.fb-anim–t-0-5s: 0.5초
.fb-anim–t-0-7s: 0.7초
.fb-anim–t-1s: 1초
.fb-anim–t-1-3s: 1.3초
.fb-anim–t-1-5s: 1.5초
.fb-anim–t-1-7s: 1.7초
.fb-anim–t-2s: 2초
.fb-anim–t-2-5s: 2.5초
.fb-anim–t-3s: 3초
.fb-anim–t-4s: 4초
.fb-anim–t-5s: 5초

이 클래스들을 활용해 요소별로 애니메이션의 지속 시간을 설정할 수 있으며, 이를 통해 다양한 속도의 애니메이션을 연출하여 시각적 효과를 극대화할 수 있습니다.

애니메이션 지연 설정

애니메이션 지연은 시각적으로 눈에 띄는 애니메이션을 만드는 데 매우 유용합니다. 일부 요소가 나중에 나타나도록 설정하여 순차적인 애니메이션을 연출할 수 있습니다. 아래의 클래스를 사용하여 지연 시간을 제어할 수 있으며, 각 요소에는 하나의 클래스만 적용할 수 있습니다.

.fb-anim–nodelay: 애니메이션 지연 없음 (특히 화면에서 처음 보이는 요소에 유용)
.fb-anim–delay-0-3s: 0.3초 지연
.fb-anim–delay-0-5s: 0.5초 지연
.fb-anim–delay-0-7s: 0.7초 지연
.fb-anim–delay-1s: 1초 지연
.fb-anim–delay-1-3s: 1.3초 지연
.fb-anim–delay-1-5s: 1.5초 지연
.fb-anim–delay-1-7s: 1.7초 지연
.fb-anim–delay-2s: 2초 지연
.fb-anim–delay-2-5s: 2.5초 지연
.fb-anim–delay-3s: 3초 지연
.fb-anim–delay-4s: 4초 지연

이 클래스들을 사용하여 요소의 애니메이션 시작 시간을 조절함으로써, 다양한 연출을 통해 페이지의 시각적 흥미를 높일 수 있습니다.

Yabe Bricks Plain Classes 호환성 설정

Fancy Animations와 Yabe Open Source – Bricks Plain Classes를 함께 사용하고, Fancy Bricks 클래스가 검색 엔진에서 나타나도록 하려면 아래의 PHP 코드를 functions.php 파일이나 선호하는 스니펫 플러그인에 추가해야 합니다.

이 코드는 Bricks 빌더가 활성화된 상태에서 Fancy Animations 클래스를 검색할 수 있도록 자동 완성 기능을 추가합니다. 이를 통해 Bricks 빌더에서 Fancy Animations의 클래스를 쉽게 검색하여 사용할 수 있습니다.

<?php

add_action('wp_enqueue_scripts', static function () {
    if (!function_exists('bricks_is_builder_main') || !bricks_is_builder_main()) {
        return;
    }

    if (!defined('FANCY_ANIMATIONS')) {
        return;
    }

    $selectors = file_get_contents(dirname(FANCY_ANIMATIONS::FILE) . '/build/builder-selectors.json');
    $selectors = json_decode($selectors, true, 512, JSON_THROW_ON_ERROR)['classes'];

    $classes = json_encode($selectors);

    wp_add_inline_script('yos-brx-plain-classes', <<<JS
        document.addEventListener('DOMContentLoaded', function () {
            wp.hooks.addFilter('yos-brx-plain-classes-autocomplete-items', 'yos_brx_plain_classes_fancy_animations', function (items) {
                return [...items, ...Object.values({$classes}).map((value) => ({ value: value }))];
            });
        });
    JS, 'after');
}, 1_000_002);

위 코드는 다음과 같은 기능을 수행합니다:

Bricks 빌더 활성화 확인: 먼저 Bricks 빌더가 주 빌더인지 확인한 후 실행됩니다.
Fancy Animations 정의 확인: Fancy Animations가 정의되어 있는지 확인합니다.
클래스 자동 완성 추가: Fancy Animations의 클래스 목록을 가져와 Bricks 빌더의 자동 완성 목록에 추가하여, 클래스 이름을 쉽게 검색할 수 있도록 합니다.

이 설정을 통해 Yabe Bricks와 Fancy Animations를 함께 사용할 때 편리하게 원하는 클래스를 검색하고 활용할 수 있습니다.

결론

Fancy Animations 플러그인은 웹사이트에 생동감 넘치는 애니메이션을 간편하게 추가할 수 있는 강력한 도구입니다. 다양한 애니메이션 효과와 세밀한 제어 기능을 통해 디자인을 향상시키고, 방문자의 시선을 사로잡는 역동적인 웹 환경을 구축할 수 있습니다. 또한, 애니메이션 속도, 지연 시간, 호버 및 스크롤 애니메이션 등 다양한 설정 옵션을 활용하면 원하는 대로 창의적인 사용자 경험을 제공할 수 있습니다. 이 가이드를 통해 Fancy Animations의 모든 기능을 적극 활용하여 웹사이트를 더욱 매력적이고 인터랙티브하게 만들어 보세요.