주요 내용으로 건너 뛰기

Divi에서 스크롤 할 때 애니메이션 카운터를 추가하는 방법

Divi : 사용하기 가장 쉬운 WordPress 테마

Elementor로 웹 사이트를 쉽게 만들 수 있습니다

Elementor를 사용하면 전문적인 모양으로 웹 사이트 디자인을 쉽게 만들 수 있습니다. 자신이 할 수있는 일에 대해 비용을 지불하지 마십시오. [무료]

애니메이션 숫자 카운터는 서비스, 사례 연구 등의 가치를 강조하기 위해 숫자 데이터를 표시하는 방법으로 웹에서 널리 사용됩니다. Divi에는 애니메이션 숫자 카운터를 쉽게 생성하는 데 사용할 수있는 전용 숫자 카운터 모듈이 있습니다.

그러나이 자습서에서는 Divi를 사용하여 스크롤 할 때 움직이는 디지털 카운터를 만드는 방법을 보여줍니다. Divi의 위치 옵션과 스크롤 효과를 사용하여 스크롤 번호로 날짜를 표시하는 간단한 레이아웃을 디자인 할 것입니다.

1 부 : 제목 섹션 만들기

이 첫 번째 부분에서는 레이아웃의 간단한 제목을 만듭니다.

먼저 섹션에 한 열의 행을 추가합니다.

divi 섹션 모듈 등록

그런 다음 줄에 새 텍스트 모듈을 추가하십시오.

텍스트 모듈의 내용을 다음으로 업데이트하십시오.

날짜 저장
날짜를 저장 1

그런 다음 헤더 텍스트 스타일을 다음과 같이 업데이트합니다.

  • 제목 2 글꼴 : Prata
  • 항목 2 텍스트 크기 : 130px (데스크톱), 70px (태블릿), 40px (전화)
Divi 제목 수정

2 부 : 스크롤 애니메이션을 사용하여 카운터 만들기

다음 부분에서는 날짜 (월, 일 및 연도)를 표시하기 위해 멈출 때까지 스크롤하는 숫자에 애니메이션을 적용 할 세 개의 카운터를 만듭니다. 각 카운터는 총 5 개의 텍스트 모듈과 구분자 모듈을 사용하여 구축됩니다. 첫 번째 텍스트 모듈은 카운터의 레이블 (예 : 월, 일, 연도) 역할을합니다. 다음 네 개의 텍스트 모듈에는 Divi의 수직 이동 오프셋을 사용하여 스크롤 할 때 애니메이션 될 다른 번호 (진행 중)가 포함됩니다. 하단 분리 모듈은 넘쳐나는 숫자를 숨기는 데 도움이됩니다.

방법은 다음과 같습니다.

두 번째 줄 추가

기존 행 아래에서 열에 다른 행을 추가하십시오.

라인 설정

모듈을 추가하기 전에 다음과 같이 행 매개 변수를 업데이트하십시오.

  • 거터 폭 : 1
  • 패딩 : 0px 높이, 0px low
Divi 테두리 구성

열 매개 변수

그런 다음 열 설정을 열고 다음과 같이 채우기를 업데이트하십시오.

  • 패딩 (데스크) : 100px 낮음
  • 패딩 (태블릿 및 휴대 전화) : 0 픽셀 낮음
Divi 열 간격 구성

텍스트 모듈 추가

그런 다음 열에 텍스트 모듈을 추가하십시오.

divi 텍스트 모듈 추가

내용 / 라벨

텍스트 모듈의 내용에 "month"라는 단어를 추가하십시오.

Divi : 모든 시간의 최고의 WordPress 테마!

901.000 다운로드Divi는 세계에서 가장 인기있는 WordPress 테마입니다. 그것은 완전하고, 사용하기 쉽고 62 무료 템플릿 이상을 제공합니다. [추천]

월 divi 지정

텍스트 디자인 설정

컨텐츠를 추가 한 후 다음과 같이 디자인 설정을 업데이트하십시오.

  • 배경색 : #ffffff
  • 텍스트 글꼴 : 토크
  • 텍스트 크기 : 40px
  • 텍스트 줄의 높이 : 2em
  • 너비 : 100 %
  • 패딩 : 상단 20 픽셀, 하단 20 픽셀, 왼쪽 20 픽셀, 오른쪽 20 픽셀
  • 아래쪽 테두리 너비 : 5px
  • 아래쪽 테두리의 색상 : #eeeeee
위치

그런 다음 고급 탭에서 다음과 같이 위치 옵션을 업데이트합니다.

  • 위치 : 상대
  • Z 인덱스 1
프라 타 워드 프레스 모듈

첫 번째 문제에 대한 텍스트 모듈 추가

첫 번째 텍스트 모듈이 배치되면 스크롤에서 이동할 숫자를 추가 할 수 있습니다. 첫 번째 숫자를 추가하려면 기존 "월"텍스트 모듈 아래에 새 텍스트 모듈을 추가하십시오.

스토리 텔러 텍스트 모듈 추가

숫자 / 내용 추가

그런 다음 텍스트 모듈 레이블을 업데이트하여 쉽게 참조 할 수 있도록 "num1"을 읽습니다. 그런 다음 숫자 "01"로 내용을 업데이트하십시오.

divi 번호 모듈 추가

숫자 디자인 설정

디자인 탭에서 다음을 업데이트하십시오.

  • 텍스트 글꼴 : Prata
  • 텍스트 텍스트 색상 : # 8ab2d3
  • 텍스트 텍스트 크기 : 70px
  • 텍스트 문자 간격 : 4px
  • 텍스트 줄 높이 : 1.5em
  • 패딩 : 20px 남음
Divi 색상 구성

참고 : 숫자의 텍스트 크기는 70px이고 행 높이는 1.5em입니다. 이는 텍스트 모듈의 총 높이가 100px에 가깝다는 것을 의미합니다. 수직 모션 오프셋을 추가 할 때마다 명심해야합니다. 예를 들어, 텍스트 모듈에 세로 오프셋 "1"을 추가하면 텍스트 모듈이 텍스트 모듈의 높이 인 정확히 100px로 이동합니다.

첫 번째 숫자에 대한 스크롤 효과

텍스트 모듈에 다음 스크롤 효과를 추가하십시오.

수직 모션 탭에서 다음을 업데이트하십시오.

  • 수직 운동 활성화 : 예
  • 시작 오프셋 : 1 (10 %에서)
  • 평균 오프셋 : 0 (20 %)
  • 끝 오프셋 : -1 (30 %에서)

페이드 인 및 페이드 아웃 탭에서 다음을 업데이트합니다.

  • 페이드 인 및 아웃 활성화 : 예
  • 초기 불투명도 : 0 % (10 %)
  • 평균 불투명도 : 100 % (20 %)
  • 최종 불투명도 : 0 % (~ 30 %)

클립 상단에서 모션 효과에 대한 트리거를 설정해야합니다.

  • 모션 효과 트리거 : 요소 상단
구성 애니메이션 모듈 divi 텍스트

두 번째 숫자의 텍스트 모듈을 만듭니다.

첫 번째 숫자를 복제

첫 번째 숫자가 생성되면이를 복제하여 두 번째 숫자 텍스트 모듈을 만듭니다. 그런 다음 더 나은 참조를 위해 레이어보기에서 레이블을 업데이트합니다.

divi 1 텍스트 모듈 중복

업데이트 번호 / 내용

두 번째 디지털 텍스트 모듈의 매개 변수를 열고 숫자 "02"로 컨텐츠를 업데이트하십시오.

번호 2 divi 저장

위치 업데이트

그런 다음 다음과 같이 위치 옵션을 업데이트하십시오.

  • 위치 : 절대
  • 수직 오프셋 : 126px
divi 텍스트 모듈의 위치 수정

스크롤 효과 업데이트

그런 다음 다음과 같이 스크롤 효과를 업데이트하십시오.

수직 동작 탭에서 다음을 업데이트합니다.

최고의 WordPress 테마 및 플러그인을 찾고 계십니까?

Envato에서 최고의 플러그인과 WordPress 테마를 다운로드하고 쉽게 웹 사이트를 만드십시오. 이미 49.720.000 다운로드 이상. [EXCLUSIVE]

  • 시작 오프셋 : 1 (20 %에서)
  • 평균 오프셋 : 0 (30 %)
  • 끝 오프셋 : -1 (40 %에서)

페이드 인 및 페이드 아웃 탭에서 다음을 업데이트합니다.

  • 초기 불투명도 : 0 % (20 %)
  • 평균 불투명도 : 100 % (30 %)
  • 최종 불투명도 : 0 % (~ 40 %)
애니메이션 스크롤 효과 divi

세 번째 문제에 대한 텍스트 모듈 만들기

두 번째 숫자를 복제

세 번째 숫자의 텍스트 모듈을 만들려면 두 번째 숫자의 텍스트 모듈을 복제하십시오.

중복 텍스트 모듈 번호 3

업데이트 번호 / 내용

숫자 "03"으로 컨텐츠를 업데이트하십시오.

divi 텍스트 모듈 수정

스크롤 효과 업데이트

그런 다음 스크롤 효과를 업데이트하십시오.

수직 동작 탭에서 다음을 업데이트합니다.

  • 시작 오프셋 : 1 (30 %에서)
  • 평균 오프셋 : 0 (40 %)
  • 끝 오프셋 : -1 (50 %에서)

페이드 인 및 페이드 아웃 탭에서 다음을 업데이트합니다.

  • 초기 불투명도 : 0 % (30 %)
  • 평균 불투명도 : 100 % (40 %)
  • 최종 불투명도 : 0 % (~ 50 %)
텍스트 모듈 애니메이션 편집

네 번째 문제에 대한 텍스트 모듈 만들기

세 번째 중복 문제

스크롤 카운터의 네 번째 숫자를 만들려면 세 번째 숫자의 텍스트 모듈을 복제하십시오.

중복 텍스트 모듈 divi 번호 4

업데이트 번호 / 내용

숫자 "04"으로 컨텐츠를 업데이트하십시오.

divi 텍스트 모듈 값 구성

스크롤 효과 업데이트

그런 다음 스크롤 효과를 업데이트하십시오.

수직 동작 탭에서 다음을 업데이트합니다.

  • 시작 오프셋 : 1 (40 %에서)
  • 평균 오프셋 : 0 (50 %)
  • 끝 오프셋 : 0 (60 %에서)

페이드 인 및 페이드 아웃 탭에서 다음을 업데이트합니다.

  • 초기 불투명도 : 0 % (40 %)
  • 평균 불투명도 : 100 % (50 %)
  • 최종 불투명도 : 100 % (~ 60 %)
애니메이션 구성 모듈 4 divi

하부 분리기 추가

마지막 텍스트 모듈 아래에 새 구분 모듈을 추가합니다. 보기에서 스크롤 텍스트의 하단 오버플로를 숨기는 데 사용됩니다.

divi 분리기 모듈 추가

그런 다음 NO를 선택하여 구분 기호를 표시하십시오.

divi 구분 기호를 표시하지 마십시오

스타일 및 위치 설정

다음과 같이 구분 기호 디자인을 업데이트하십시오.

  • 배경색 : #ffffff
  • 너비 : 100 %
  • 높이 : 100px
  • 상단 테두리 너비 : 5px

고급 탭에서 다음을 업데이트하십시오.

  • 비활성화 : 휴대 전화 및 태블릿
  • 위치 : 절대
  • 위치 : 왼쪽 하단

중요 : 구분 기호가 차지할 공간은 이전에 열에 100 픽셀 하단 패딩을 추가하여 생성되었습니다. 이 패딩을 추가하지 않으면 구분 기호가 숫자와 겹칩니다.

온라인 상점을 쉽게 만들 수 있습니다.

무료 WooCommerce를 다운로드하십시오. 전자 상거래 플러그인은 WordPress에서 실제 제품과 디지털 제품을 판매하는 플러그인입니다. [추천]

추가 카운터 및 열 생성

열 1을 복제하고 내용을 업데이트하십시오.

새 카운터를 만들려면 열 1을 복제하십시오. 그러면 모든 요소가 자동으로 배치 된 두 번째 열이 만들어집니다.

그런 다음 모든 텍스트 모듈의 내용을 새 텍스트와 숫자로 업데이트하기 만하면됩니다.

전체 열 divi 복제

열 2을 복제하고 내용을 업데이트하십시오.

모든 텍스트 모듈의 내용이 열 2에서 업데이트되면 열 2를 복제하여 해당 연도에 대한 세 번째 카운터를 만듭니다. 그런 다음 필요에 따라 각 텍스트 모듈의 내용을 업데이트합니다.

최종 결과

최종 결과는 다음과 같습니다.

기타 자료

마지막 생각

애니메이션 스크롤 숫자 카운터가있는이 간단한 레이아웃은 새롭고 독특한 방식으로 디지털 데이터를 표시하는 데 유용합니다. 데이트의 개념을 버리고 당신이 꿈꾸는 모든 것에 카운터를 사용하는 것을 망설이지 마십시오!

이 문서에는 메모의 0을 포함

코멘트를 남겨주세요

귀하의 이메일 주소는 공개되지 않습니다. 필수 필드는 표시됩니다 *

이 사이트는 원하지 않는 것을 줄이기 위해 Akismet을 사용합니다. 댓글 데이터 사용 방법에 대해 자세히 알아보기.

맨 위로
0 주식
짹짹
레지스터