Divi에서 웨이브 애니메이션을 구분선으로 만드는 방법

게시 됨: 2024-12-30

웹 디자이너로서 시각적으로 매력적인 웹사이트를 만드는 것은 필수입니다. 우리는 종종 그 목표를 달성하기 위해 미묘하면서도 매력적인 디자인 요소에 의존합니다. 그러한 요소 중 하나는 디자인에 역동적인 흐름을 추가하는 동시에 웹 페이지의 섹션을 원활하게 분리하는 우아한 구분선 역할을 할 수 있는 파도 애니메이션입니다.

인기 있는 WordPress 페이지 빌더인 Divi에서 이 효과를 만드는 것은 어려워 보일 수 있지만, 올바른 기술과 창의성이 있다면 매우 가능하고 달성 가능합니다.

이 글에서는 Divi에 내장된 도구, 사용자 정의 설정, CSS를 활용하여 물결 애니메이션 구분선을 만드는 단계별 과정을 안내해 드립니다. 이 가이드는 정적 구분선을 눈길을 끄는 애니메이션으로 변환하여 웹 사이트의 미적 측면과 사용자 경험을 향상시키는 데 도움이 됩니다.

섹션 구분선으로 애니메이션 파도

Divi에서 웨이브 애니메이션을 구분선으로 만드는 방법

1단계. SVG 웨이브 생성

먼저 SVG 웨이브를 생성해야 합니다. SVG 웨이브를 생성하는 방법과 도구는 다양합니다. 이 예에서는 옵션이 포함된 사용자 친화적인 인터페이스를 제공하는 온라인 SVG 웨이브 생성기 중 하나를 사용합니다.

  • 이것을 클릭하면 아름다운 SVG 웨이브 생성이 시작됩니다.
  • 물결 모양 사용자 정의

다음으로 진폭, 파장, 주파수 등과 같은 매개변수를 원하는 대로 조정하여 파도의 모양을 제어할 수 있습니다.

  • 색상 제어

대화형 색상 선택기를 사용하거나 색상 코드(16진수 코드 또는 RGB 값)를 입력하여 SVG 웨이브의 색상을 선택할 수 있습니다.

SVG 웨이브가 아래 요소와 잘 섞이도록 하려면 SVG 웨이브 요소 아래 섹션의 배경색과 동일한 색상을 선택하는 것이 좋습니다.

  • 내보내다

마지막으로 생성된 SVG 코드를 프로젝트에 사용할 수 있도록 복사합니다. 나중에 필요하므로 보관해 두세요.

2단계: 새 섹션 추가

애니메이션 웨이브 구분선을 별도의 섹션에 배치하겠습니다. 별도의 섹션을 생성하면 페이지의 다른 콘텐츠로부터 웨이브 구분선을 분리할 수 있습니다. 이를 통해 독립적으로 스타일 지정, 배치 및 관리가 더 쉬워졌습니다.

기존 게시물 유형(페이지 또는 게시물)을 선택하여 Divi Visual Builder로 이동하세요. 그런 다음 새 섹션 추가 버튼을 클릭하여 페이지에 새 섹션을 추가하세요. 그런 다음 열이 하나인 행 레이아웃을 선택합니다.

행 설정

열에 새 모듈을 추가하기 전에 먼저 행 설정을 사용자 정의합니다. 이 단계는 웨이브 디바이더의 적절한 위치 지정과 스타일을 보장하는 데 중요합니다. 고려해야 할 몇 가지 주요 행 설정은 다음과 같습니다.

  • 사이징
    • 폭: 100%
    • 최대 너비: 100%

모든 화면 크기에서 값이 100%인지 확인하려면 이 설정을 태블릿과 휴대폰에도 적용하세요.

  • 간격
    • 패딩: 상단 0px , 하단 0px
  • 변환
    • 회전: 180deg
  • 위치
    • 위치: 절대
    • 위치 : 하단 중앙
    • 수직 오프셋: -2px
    • Z 인덱스: 100

3단계: 코드 모듈에 SVG 코드 추가

SVG 코드 입력

열 내부에 코드 모듈을 추가한 다음 온라인 SVG 웨이브 생성기에서 얻은 SVG 코드를 붙여넣습니다.

다음으로, 코드 모듈의 너비를 100% 로 설정하여 컨테이너의 전체 너비에 걸쳐 있도록 하여 포함된 SVG 웨이브가 적절하게 정렬되고 모듈 전체에서 일관되게 보이도록 합니다.

코드 모듈 복제

SVG 코드를 추가한 후에는 모듈을 복제해야 합니다. 두 번째 복사/모듈의 경우 100% 수평 오프셋 의 절대 위치를 사용해야 합니다.

4단계: CSS 조각 추가

이제 두 개의 CSS 코드를 추가하여 SVG 웨이브에 애니메이션을 적용할 차례입니다. 첫 번째 CSS 코드는 페이지 설정에 추가되고 두 ​​번째 CSS 코드는 열 설정에 추가됩니다.

  • 첫 번째 CSS 코드

페이지 설정 -> 고급 탭 -> 사용자 정의 CSS 로 이동합니다. 그런 다음 아래 CSS 스니펫을 복사하여 사용 가능한 필드에 붙여넣으세요.

다음은 필요에 맞게 사용하고 편집할 수 있는 CSS 조각입니다. 

 @keyframes wpp-waves {
	0% {변환: 번역X(0)}
	25% {변환: 번역X(-25%) 규모Y(45%);}
	50% {변환: 번역X(-50%) 규모Y(100%)}
	75% {변환: 번역X(-75%) 규모Y(45%);}
	100% {변환: 번역X(-100%)}
  }
  • 두 번째 CSS 코드

코드 모듈이 있는 열 설정으로 이동한 다음 아래 CSS 코드를 복사하여 열의 기본 요소 필드에 붙여넣습니다. 

 애니메이션: wpp-waves 12s 선형 무한;
변환 원본: 상단;

그게 다야. CSS 스니펫을 자유롭게 편집하고 SVG 모양을 다시 디자인하여 섹션 구분선에 가장 어울리는 물결 애니메이션을 만드세요. 원한다면 페이지를 저장하고 게시하는 것을 잊지 마세요.

CSS 코드는 무엇을 했나요? 

 @keyframes wpp-waves {
	0% {변환: 번역X(0)}
	25% {변환: 번역X(-25%) 규모Y(45%);}
	50% {변환: 번역X(-50%) 규모Y(100%)}
	75% {변환: 번역X(-75%) 규모Y(45%);}
	100% {변환: 번역X(-100%)}
  }

주요 개념:

  • @keyframes : 애니메이션 시퀀스를 정의합니다. 각 백분율(예: 0%, 25% 등)은 애니메이션 중에 특정 스타일이 적용되는 키프레임을 나타냅니다.
  • transform 속성: 변환(이동)을 제어합니다.
    • translateX : 요소를 지정된 양만큼 수평으로 이동합니다.
    • scaleY : 요소의 크기를 수직으로 조정합니다.

생기

  • 0%: 크기 조절 없이 원래 위치에서 시작합니다.
  • 25%: 왼쪽으로 25% 이동하고 높이의 45%로 축소됩니다.
  • 50%: 왼쪽으로 50% 이동한 후 전체 높이로 돌아갑니다.
  • 75%: 왼쪽으로 75% 이동하고 높이가 다시 45%로 줄어듭니다.
  • 100%: 왼쪽으로 100% 이동하고 전체 높이로 재설정됩니다. 
 애니메이션: wpp-waves 12s 선형 무한;
변환 원본: 상단;

animation: wpp-waves 12s linear infinite;

  • wpp-waves : 애니메이션 이름이 적용됩니다.
  • 12s : 애니메이션 주기의 속도는 12초입니다.
  • linear : 애니메이션이 완화 없이 일정한 속도로 진행됩니다.
  • infinite : 애니메이션이 끝없이 반복됩니다.

transform-origin: top;

  • 변형은 요소의 위쪽 가장자리를 기준으로 발생합니다.

결론

Divi를 사용하여 구분 기호로 파도 애니메이션을 만드는 것은 웹 사이트에 역동적이고 눈길을 끄는 디자인 구성 요소를 제공하는 훌륭한 접근 방식입니다. Divi에 내장된 도구, 키프레임 애니메이션, 사용자 정의 CSS를 사용하면 웹사이트의 모양과 느낌을 개선하고 방문자의 관심을 끄는 물결 효과를 쉽게 통합할 수 있습니다.

몇 가지 간단한 단계를 통해 웹 디자인을 향상시켜 Divi의 유연성과 사용 편의성을 유지하면서 더욱 현대적이고 대화형으로 만들 수 있습니다. 섹션 구분선에 가장 적합한 물결 애니메이션을 얻으려면 키프레임과 사용자 정의 CSS에서 다른 값을 자유롭게 시도해 보세요.