Divi에서 고유한 텍스트 디자인을 위해 글자에 애니메이션을 적용하는 방법

애니메이션은 현대 웹사이트의 사용자 경험의 일반적인 부분이 되었습니다. 멋져 보인다는 사실 외에도, 콘텐츠에 생명을 불어넣어 사용자의 참여를 유도하는 미묘한 상호 작용 요소를 추가할 수도 있습니다. Divi의 내장 애니메이션 효과를 사용하면 다양한 애니메이션 스타일로 페이지의 거의 모든 요소에 애니메이션을 적용할 수 있습니다.

이 튜토리얼에서는 Divi에서 고유한 텍스트 디자인을 위한 글자에 애니메이션을 적용하는 방법을 보여 드리겠습니다. 개별 문자를 텍스트 모듈에 넣으면 콘텐츠를 독창적으로 돋보이게 하는 다양한 애니메이션 스타일, 지속 시간 및 지연을 사용하여 각 문자의 애니메이션을 타겟팅할 수 있습니다. 이 기술은 콘텐츠를 구성하는 문자가 검색 엔진 최적화에 적합하지 않기 때문에 순전히 디자인 목적을 위한 것입니다. 그러나 애니메이션 문자를 사용하면 놀라운 방식으로 사용자와 이야기를 공유할 수 있습니다.

시작하자.

엿보기

편지 애니메이션 디자인 예제 레이아웃을 무료로 다운로드하십시오

이 튜토리얼의 문자 애니메이션 디자인을 손에 넣으려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. "재구독"되지 않거나 추가 이메일을 받지 않습니다.

파일 다운로드

무료로 다운로드

Divi 뉴스레터에 가입하면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 ​​금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.

다운로드

성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!

레이아웃을 페이지로 가져오려면 zip 파일을 추출하고 json 파일을 Divi Builder로 드래그하기만 하면 됩니다.

튜토리얼로 들어가 볼까요?

시작하기

이 튜토리얼에서는 Divi만 있으면 됩니다. 우리는 프론트 엔드의 Divi 빌더를 사용하여 처음부터 디자인을 구축할 것입니다. 시작하려면 새 페이지를 만들고 페이지에 제목을 지정하고 배포 클릭하여 Divi Builder를 사용하십시오. 그런 다음 "처음부터 빌드" 옵션을 선택하고 클릭하여 프런트 엔드에서 빌드합니다.

이제 디자인할 준비가 되었습니다!

글자 애니메이션을 위한 레이아웃 만들기

섹션, 행 및 열 추가

한 열 행으로 새 일반 섹션을 만듭니다.

텍스트 모듈(흰색 글자 포함) 추가를 시작하기 전에 섹션에 어두운 배경 이미지를 추가해 보겠습니다. 섹션 설정을 열고 배경 이미지를 추가합니다. 나는 투자 회사 소개 페이지 미리 만들어진 레이아웃에서 추상적인 배경 이미지를 사용하고 있습니다.

텍스트 모듈로 개별 문자 블록 만들기

글자에 애니메이션을 추가하기 전에 먼저 추가하려는 각 글자에 대해 별도의 텍스트 모듈을 만들어야 합니다. 이 예에서는 "Divi Design"이라는 텍스트를 만들 것입니다. 이 텍스트 구문에는 11개의 문자 공백이 포함되어 있으므로(문자 사이의 공백을 포함하여 11개의 다른 텍스트 모듈을 추가해야 합니다.

계속해서 열에 텍스트 모듈을 추가하십시오.

내용 상자에 텍스트의 첫 글자를 추가합니다. 이 경우에는 "d"입니다.

그런 다음 다음과 같이 텍스트 디자인 설정을 업데이트합니다.

• 텍스트 글꼴: Rubik
• 텍스트 글꼴 스타일: TT
• 텍스트 텍스트 색상: #ffffff
• 텍스트 텍스트 크기: 80px(데스크톱), 50px(태블릿), 30px(휴대폰)
• 텍스트 줄 높이: 1.6em
• 텍스트 방향: 중앙

다음과 같이 텍스트 모듈에 애니메이션을 추가합니다.

• 애니메이션 스타일: 슬라이드
• 애니메이션 방향: 위로
• 애니메이션 지속 시간: 600ms
• 애니메이션 지연: 100ms
• 애니메이션 시작 불투명도: 100%

텍스트 모듈을 복제하고 문자 "i"로 내용을 업데이트합니다. 그런 다음 다음과 같이 애니메이션 지연을 100ms만큼 늘립니다.

• 애니메이션 지연: 200ms

텍스트 모듈을 복제하고 문자 "v"로 내용을 업데이트합니다. 그런 다음 애니메이션 지연을 300ms로 늘립니다.

• 애니메이션 지연: 300ms

텍스트 모듈을 복제하고 문자 "i"로 내용을 업데이트합니다. 그런 다음 애니메이션 지연을 400ms로 늘립니다.

• 애니메이션 지연: 400ms

이 다음 텍스트 모듈에서는 공백을 추가하려고 합니다. 텍스트 모듈을 복제하고 콘텐츠 상자에 다음 html을 추가합니다.

 

이 애니메이션 지연을 업데이트할 필요가 없습니다.

그런 다음 텍스트 모듈을 복제하고 "d" 문자로 내용을 업데이트합니다. "디자인"이라는 단어의 첫 글자입니다. 그런 다음 애니메이션 지연을 500ms로 늘립니다.

• 애니메이션 지연: 500ms

"design"이라는 단어를 철자하는 나머지 문자 각각에 대해 텍스트 모듈을 복제하고 애니메이션 지연을 100ms씩 늘리는 프로세스를 계속합니다.

• 문자 "e": 애니메이션 지연 600ms
• 문자 "s": 애니메이션 지연 700ms
• 문자 "i": 애니메이션 지연 800ms
• 문자 "g": 애니메이션 지연 900ms
• 문자 "n": 애니메이션 지연 1000ms

지금까지의 디자인은 이렇습니다.

모듈을 수평으로 정렬하기 위해 Flex 속성 추가

아직 우리가 찾고 있는 결과가 아닙니다. 그러나 마술처럼 디자인을 함께 끌어오기 위해 해야 할 일은 행 열에 작은 CSS 스니펫을 추가하는 것입니다. 이렇게 하려면 행 설정을 열고 열 기본 요소에 다음 사용자 지정 CSS를 추가합니다.

display: flex;

display: flex 속성은 다양한 브라우저 너비에 맞게 아름답게 조정되는 유연한 테이블에서 모든 모듈을 수평으로 정렬합니다. 그리고 모듈이 1열 행에 있으므로 태블릿이나 모바일 장치에서 디자인이 깨지지 않습니다.

또한 문자 아래의 하단 여백을 없애기 위해 사용자 지정 여백 너비를 추가하고 행에 상단 및 하단 패딩을 추가하여 문자에 애니메이션 공간이 생기도록 해야 합니다.

• 거터 폭: 1
• 사용자 정의 패딩: 5vw 상단, 5vw 하단

다음은 최종 결과입니다.

다른 애니메이션 스타일 추가하기

이 설정을 사용하면 완전히 독특한 효과를 위해 새로운 애니메이션 스타일을 쉽게 추가할 수 있습니다. 이를 위해 Divi의 다중 선택 기능을 활용하여 모든 모듈을 한 번에 업데이트할 수 있습니다. 프런트 엔드에서 Shift 키를 누른 상태에서 첫 번째 및 마지막 텍스트 모듈을 클릭합니다. 그런 다음 선택한 모듈 중 하나에 대한 설정을 엽니다.

그러면 선택한 모든 모듈의 설정을 업데이트할 수 있는 요소 설정 모달이 열립니다. 각 문자에 계단식 효과를 유지하기를 원하기 때문에 애니메이션 지연을 변경하고 싶지 않습니다. 그러나 완전히 고유한 결과를 생성하기 위해 다른 방법으로 다른 애니메이션 옵션을 업데이트할 수 있습니다.

이전 예제를 유지할 수 있도록 새 애니메이션을 테스트하기 전에 섹션을 복제하는 것이 좋습니다.

다음은 몇 가지 예입니다.

역 줌 텍스트 애니메이션

역 확대/축소 효과로 문자를 애니메이션하려면 다음으로 요소 설정(모든 모듈에 대한 설정)을 업데이트하십시오.

• 애니메이션 스타일: 확대/축소
• 애니메이션 방향: 중앙
• 애니메이션 강도: 200%

다음은 최종 결과입니다.

롤링 웨이브 텍스트 애니메이션

롤링 웨이브 효과로 문자를 애니메이션하려면 다음으로 요소 설정(모든 모듈에 대한 설정)을 업데이트하십시오.

• 애니메이션 스타일: 회전
• 애니메이션 방향: 위로
• 애니메이션 강도: 100%

다음은 최종 결과입니다.

도미노 텍스트 애니메이션

도미노 효과로 텍스트에 애니메이션을 적용하려면 다음으로 요소 설정(모든 모듈에 대한 설정)을 업데이트하십시오.

• 애니메이션 스타일: 뒤집기
• 애니메이션 방향: 왼쪽
• 애니메이션 강도: 100%

다음은 최종 결과입니다.

스탠드업 텍스트 애니메이션

도미노 효과로 텍스트에 애니메이션을 적용하려면 다음으로 요소 설정(모든 모듈에 대한 설정)을 업데이트하십시오.

• 애니메이션 스타일: 접기
• 애니메이션 방향: 위로
• 애니메이션 강도: 100%

그런 다음 행 설정 아래의 기본 열 요소에 다음 CSS를 추가하여 원근감을 추가하여 3D 디자인 요소를 만듭니다.

기본 열 요소 CSS:

perspective: 1000px;

다음은 최종 결과입니다.

애니메이션 방향 조합을 사용하여 글자에 애니메이션 효과 주기

더 창의적으로 만들고 싶다면 애니메이션 효과의 조합을 사용하여 글자에 애니메이션을 적용할 수 있습니다. 이 예에서는 슬라이드 스타일에 애니메이션 방향과 강도를 조합하여 사용하겠습니다. 이것은 우리에게 완전히 독특한 프레젠테이션을 제공할 것입니다.

방법은 다음과 같습니다.

먼저, 이전에 구축한 섹션 중 하나를 복제하여 디자인 프로세스를 먼저 시작할 수 있습니다.

그런 다음 "design"이라는 텍스트만 표시되도록 처음 4개의 텍스트 모듈을 삭제합니다.

섹션 설정

다음으로 애니메이션의 일부 문자가 섹션 뷰포트 외부에서 시작되기를 원하므로 다음과 같이 섹션 설정에 작은 CSS 스니펫을 추가해야 합니다.

overflow: hidden;

이렇게 하면 섹션에 올 때까지 문자가 숨겨집니다.

행 설정

이제 텍스트 모듈(문자)이 중앙에 유지되도록 하려면 행 설정에 다음 CSS를 추가해야 합니다.

display:flex;
justify-content: center;

텍스트 모듈 공통 설정

다중 선택을 사용하여 다음 요소 설정으로 6개의 텍스트 모듈을 모두 업데이트합니다.

• 맞춤 여백: 왼쪽 3%, 오른쪽 3%
• 테두리 너비: 1px
• 테두리 색상: #ffffff

• 애니메이션 스타일: 슬라이드
• 애니메이션 시간: 2000ms
• 애니메이션 지연: 100ms
• 애니메이션 강도: 300%

모든 텍스트 모듈에 공통적으로 적용되는 기본 애니메이션 설정을 처리합니다. 이제 개별적으로 애니메이션 설정을 조정할 수 있습니다.

텍스트 모듈 개별 설정

이 시점에서 개별 텍스트 모듈 설정을 조정하여 각각의 애니메이션 방향을 변경하는 재미를 느낄 수 있습니다. 이렇게 하면 완전히 독특한 방식으로 글자에 애니메이션을 적용할 수 있습니다. 각 문자에 대해 다음과 같이 애니메이션 방향과 강도를 업데이트합니다.

• 편지 D
  애니메이션 방향: 위로
• 편지 E
  애니메이션 방향: 아래로
• 편지 S
  애니메이션 방향: 왼쪽
  애니메이션 강도: 80%
• 편지 나
  애니메이션 방향: 오른쪽
  애니메이션 강도: 80%
• 편지 G
  애니메이션 방향: 아래로
• 편지 N
  애니메이션 방향: 위로

다음은 최종 디자인입니다.

그리고 모바일에서는 이렇게 보입니다.

마지막 생각들

Divi에는 적절한 설정이 있으면 문자를 애니메이션으로 만드는 방법이 많이 있다고 말하는 것이 안전하다고 생각합니다. 그리고 이 예제를 만들 때 애니메이션 설정을 가지고 노는 것을 멈추는 것이 꽤 어려웠습니다. 시도할 수 있는 변형이 너무 많습니다! 어쨌든 이것이 다음 프로젝트에 작은 영감을 주기를 바랍니다. 무엇이든 재미를 위해 구축하고 싶을 수도 있습니다.

댓글로 여러분의 의견을 기다리겠습니다.

건배!