섹션/행에 애니메이션을 추가하는 방법

옛날 옛적에 인터넷에서 사이트에 애니메이션을 추가하는 것은 번거롭고 다소 전문적인 작업이었습니다. 그러나 Divi에는 많은 기술 전문 지식 없이도 구현할 수 있는 강력한 애니메이션 도구와 스크롤 효과가 있습니다. 누구나 최소한의 노력으로 이러한 효과를 사이트에 추가할 수 있습니다. 이 튜토리얼의 프로세스는 Divi 내의 모든 요소에 적용될 수 있지만, 오늘은 섹션과 행을 사용하여 특정 효과를 얻는 데 집중할 것입니다. 애니메이션으로 파헤쳐 봅시다!

시사

데스크탑

이동하는

페이지 또는 게시물에 Divi Builder 로드

가장 먼저 해야 할 일은 Divi Builder에 들어가는 것입니다. 레이아웃 팩(이 기사에서는 테니스 클럽 레이아웃 팩을 사용함) 중 하나를 선택하든 자신의 디자인을 선택하든 모든 단계는 섹션 및 행 설정 내에서 수행됩니다.

이 디자인으로 1개의 섹션과 3개의 행에 애니메이션을 적용하여 순차 로딩 효과를 얻을 것입니다.

미리 만들어진 레이아웃 선택

전문적으로 설계된 레이아웃 팩 중 하나를 적용하려면 Divi Builder를 입력하고 미리 만들어진 레이아웃 사용을 선택 하십시오 . 그러면 우리가 제공하는 모든 공짜 목록이 나타납니다.

레이아웃 선택

다음으로 사용하려는 레이아웃 팩을 선택하기만 하면 됩니다. 카테고리별로 정렬하거나 키워드를 검색하여 생성된 항목을 볼 수 있습니다.

애니메이션할 섹션 및 행 찾기

레이아웃이 모든 자산을 가져오고 페이지가 로드되면 애니메이션을 추가할 섹션과 행을 찾고 싶을 것입니다. Divi Builder에서 섹션 은 파란색 으로 구분되고 행 은 초록색으로 표시 된다는 점을 기억하세요.

매핑이 완료되면 해당 애니메이션을 추가해 보겠습니다!

섹션 및 행에 애니메이션을 추가하는 방법 – 옵션 1

Divi 섹션에 애니메이션을 추가하는 것은 매우 간단합니다. 먼저 섹션 설정을 입력해야 합니다. 그런 다음 디자인 탭으로 이동하여 애니메이션 옵션이 표시될 때까지 스크롤합니다.

애니메이션 옵션에서 선택한 애니메이션에 대해 최대 8가지 옵션을 조정할 수 있습니다.

1. 애니메이션 스타일 은 애니메이션 이 표시되는 방식을 선택하는 곳입니다. 섹션이 끝에서 끝까지 굴러가거나 공처럼 페이지 측면에서 튀어 나오는 경우. 가장 일반적인 것은 Fade 및 Slide 입니다.
2. 방향 – 요소가 이동하는 방향을 설정합니다. up 값은 섹션이 맨 아래에서 시작하여 위로 이동함을 의미합니다. 위 는 원점이 아닙니다.
3. Duration – 애니메이션이 처음부터 끝까지 지속되는 시간입니다. 값이 낮을수록 속도가 빨라지고 값이 높으면 느려집니다.
4. 지연 – 이 옵션은 애니메이션이 가능한 한 빨리 트리거되는 것을 방지하고 즉시 트리거하는 것보다 더 많은 관심을 불러일으키는 데 도움이 될 수 있습니다.
5. 강도 – 값이 낮을수록 애니메이션보다 부드럽고 값이 높을수록 더 빠르고 공격적입니다.
6. 시작 불투명도 – 값이 0이면 애니메이션이 보이지 않고 지속 시간 동안 초점이 맞춰집니다. 100은 애니메이션이 시작되기 전에도 요소가 완전히 표시됨을 의미합니다.
7. 속도 곡선 – 애니메이션의 시작과 끝을 부드럽게 조정할 수 있습니다.
8. 반복 – 애니메이션이 일회성 효과입니까, 아니면 계속 반복하고 싶은 것입니까? 애니메이션이 한 번 으로 설정된 경우 페이지를 다시 로드하여 다시 시작해야 합니다.

섹션 및 행에 애니메이션을 추가하는 방법 – 옵션 2

Divi에는 스크롤 효과 라는 기능도 있습니다. 사용자가 뷰포트를 요소로 스크롤할 때마다 트리거되는 애니메이션입니다. 스크롤 효과는 모든 요소로 설정할 수 있으며 위에서 언급한 애니메이션 옵션과 결합할 수 있습니다.

스크롤 효과를 활성화하는 방법

다시 말하지만, Divi의 모든 요소는 스크롤 효과를 활성화하도록 설정할 수 있지만 오늘은 섹션과 행을 다루고 있습니다. 따라서 섹션 설정을 입력하고 고급 탭으로 이동한 다음 스크롤 효과 제목을 찾으십시오.

효과 및 트리거 선택

스크롤 효과 옵션 내에서 스크롤 시 트리거할 수 있는 다양한 종류의 애니메이션에 대한 다양한 탭을 찾을 수 있습니다.

• 고정 위치 – 사용자가 스크롤할 때 섹션이나 행이 사용자 화면에 고정 되는지 여부입니다.
• 변형 효과 – 수평 및 수직 이동, 페이드 인/아웃, 크기 조정, 회전 및 흐림과 같은 실제 애니메이션 효과입니다.
• [기능] 설정 – 화면에서 효과가 가장 잘 보이는 위치와 발생 시기/위치를 설정할 수 있습니다.
• 모션 효과 트리거 – 요소의 상단이 뷰포트에 들어갈 때 애니메이션이 시작되는지, 요소의 중앙 또는 하단이 시작되는지 결정합니다.

이전 섹션의 애니메이션 옵션 사용과 이들의 주요 차이점은 애니메이션을 자동화할지 또는 사용자가 작업을 수행할 때마다 애니메이션을 트리거할지 여부에 있습니다. 메인 튜토리얼의 효과에 사용할 스크롤 효과 및 애니메이션 옵션을 사용하여 애니메이션을 결합할 수 있습니다.

섹션 및 행에 대한 애니메이션 결합

다양한 애니메이션을 결합하여 서로 다른 시간에 트리거하여 사이트에 멋진 효과를 만들 수 있습니다. 애니메이션 지연 옵션을 사용하면 사이트에서 일련의 섹션, 행 및 요소에 애니메이션을 적용하여 인상적인 시각적 효과를 얻을 수 있습니다.

먼저 섹션 설정에서 애니메이션 스타일 을 슬라이드 로 설정하고 애니메이션 방향 을 위로 설정합니다.

나머지 옵션은 기본값으로 유지합니다. 특히 애니메이션 지연 . 섹션이 뷰에 있을 때 트리거되기를 원합니다.

행 1에 대한 애니메이션 설정

다음으로 섹션의 첫 번째 행을 조정합니다. 행 설정으로 이동하여 디자인 탭 아래의 애니메이션 옵션으로 이동한 다음 다시 슬라이드 를 선택합니다. 이번에는 Direction 을 Down으로 변경하고 Animation Delay 를 5 00ms 로 변경하려고 합니다. 1000ms는 1초와 같습니다. 기억하십시오.

섹션 타이밍을 즉시 트리거하도록 0ms로 두었으므로 행을 약간 오프셋하여 이 행이 시작되기 전에 초기 애니메이션이 대부분 완료되도록 하고 싶습니다.

행 2에 대한 애니메이션 설정

다음으로 페이지의 두 번째 행에 대한 설정으로 이동하고 애니메이션 옵션으로 이동합니다. 다시 애니메이션 스타일로 슬라이드 를 선택하고 이 행은 오른쪽 으로 슬라이드합니다.

또한 애니메이션 지연 을 1000ms 로 설정할 것입니다. 즉, 첫 번째 애니메이션이 끝나는 즉시 이 지연 이 트리거됩니다.

행 3에 대한 애니메이션 설정

애니메이션을 적용할 세 번째 행의 경우 스크롤 효과 를 사용하여 목표를 달성할 것입니다. 세 번째 행은 스크롤 없이 볼 수 있는 바로 위에서 시작하기 때문에 다른 요소와 마찬가지로 단순히 시간 지연을 사용하면 대부분의 애니메이션이 표시되지 않습니다. 그래서 우리는 그런 일이 없도록 만들 것입니다.

애니메이션 옵션

먼저 위의 과정을 반복합니다. 이 행에서만 애니메이션 스타일 을 페이드로 설정합니다. 그런 다음 애니메이션 중에 이 행이 더 빨리 표시되도록 Duration 을 500ms로 설정합니다. 이 작업이 시작되기 전에 다른 애니메이션이 완전히 완료되도록 1500ms 지연 합니다.

마지막으로 시작 불투명도 가 0% 로 설정되어 있는지 확인하십시오. 우리는 이 행이 보일 준비가 될 때까지 보이지 않기를 원합니다.

스크롤 효과 설정

이것은 우리가 효과를 결합하기 때문에 일이 재미있어지는 곳입니다. 행의 고급 탭을 클릭하고 스크롤 효과를 찾습니다. 수평 동작 탭을 찾아 켜야 합니다. 그런 다음 모션 효과 트리거 를 요소 중간으로 설정합니다. 사용자의 뷰포트에 행의 맨 위가 표시되는 경우를 대비하여 사용자가 스크롤할 때까지 효과가 적용되기 시작하지 않도록 맨 위가 아닌 가운데를 사용하고 있습니다.

이 세트를 사용하면 행은 다른 모든 애니메이션이 완료될 때까지 기다렸다가 사용자가 행을 향해 스크롤하면 전체 행이 화면 측면에서 미끄러지는 것처럼 보입니다.

최종 결과

이 모든 작업을 마치면 결과가 이와 유사해야 합니다.

데스크탑

이동하는

결론

애니메이션 효과를 추가하는 것은 사이트를 더욱 역동적이고 흥미롭고 시각적으로 매력적으로 만드는 확실한 방법입니다. 사용 디비에 내장 된 애니메이션과 스크롤 효과 도구, 당신은 와우 발생하는 모든 방문자가 감소 할 것이다 놀라운 조합을 만들 수 있습니다.

섹션과 행에서 Divi 애니메이션 효과를 사용하여 무엇을 만드셨습니까? 댓글에서 봅시다!

Vectorchok / shutterstock.com의 기사 특집 이미지