애니메이션 숫자 카운터는 숫자를 표시하는 방법으로 웹에서 인기가 있습니다. données 서비스, 사례 연구 등의 가치를 강조하기 위해 Divi 애니메이션 숫자 카운터를 쉽게 생성하는 데 사용할 수 있는 전용 숫자 카운터 모듈이 있습니다.
그러나 이 자습서에서는 다음을 사용하여 스크롤할 때 움직이는 숫자 카운터를 만드는 방법을 보여 드리겠습니다. Divi. 위치 옵션 및 스크롤 효과 사용 Divi, 스크롤되는 숫자로 날짜를 표시하는 간단한 레이아웃을 디자인하겠습니다.
1 부 : 제목 섹션 만들기
이 첫 번째 부분에서는 레이아웃의 간단한 제목을 만듭니다.
먼저 섹션에 한 열의 행을 추가합니다.
그런 다음 줄에 새 텍스트 모듈을 추가하십시오.
업데이트 내용 다음 요소가 포함된 텍스트 모듈:
날짜 저장
그런 다음 헤더 텍스트 스타일을 다음과 같이 업데이트합니다.
- 제목 2 글꼴 : Prata
- 항목 2 텍스트 크기 : 130px (데스크톱), 70px (태블릿), 40px (전화)
2 부 : 스크롤 애니메이션을 사용하여 카운터 만들기
다음 부분에서는 날짜 (월, 일 및 연도)를 표시하기 위해 멈출 때까지 스크롤하는 숫자에 애니메이션을 적용 할 세 개의 카운터를 만듭니다. 각 카운터는 총 5 개의 텍스트 모듈과 구분자 모듈을 사용하여 구축됩니다. 첫 번째 텍스트 모듈은 카운터의 레이블 (예 : 월, 일, 연도) 역할을합니다. 다음 네 개의 텍스트 모듈에는 Divi의 수직 이동 오프셋을 사용하여 스크롤 할 때 애니메이션 될 다른 번호 (진행 중)가 포함됩니다. 하단 분리 모듈은 넘쳐나는 숫자를 숨기는 데 도움이됩니다.
방법은 다음과 같습니다.
두 번째 줄 추가
기존 행 아래에서 열에 다른 행을 추가하십시오.
라인 설정
모듈을 추가하기 전에 다음과 같이 행 매개 변수를 업데이트하십시오.
- 거터 폭 : 1
- 패딩 : 0px 높이, 0px low
열 매개 변수
그런 다음 열 설정을 열고 다음과 같이 채우기를 업데이트하십시오.
- 패딩 (데스크) : 100px 낮음
- 패딩 (태블릿 및 휴대 전화) : 0 픽셀 낮음
텍스트 모듈 추가
그런 다음 열에 텍스트 모듈을 추가하십시오.
내용 / 라벨
용 내용 텍스트 모듈에서 "월"이라는 단어를 추가합니다.
텍스트 디자인 설정
일단 내용 추가된 경우 다음과 같이 디자인 설정을 업데이트합니다.
- 배경색 : #ffffff
- 텍스트 글꼴 : 토크
- 텍스트 크기 : 40px
- 텍스트 줄의 높이 : 2em
- 너비 : 100 %
- 패딩 : 상단 20 픽셀, 하단 20 픽셀, 왼쪽 20 픽셀, 오른쪽 20 픽셀
- 아래쪽 테두리 너비 : 5px
- 아래쪽 테두리의 색상 : #eeeeee
위치
그런 다음 고급 탭에서 다음과 같이 위치 옵션을 업데이트합니다.
- 위치 : 상대
- Z 인덱스 1
첫 번째 문제에 대한 텍스트 모듈 추가
첫 번째 텍스트 모듈이 배치되면 스크롤에서 이동할 숫자를 추가 할 수 있습니다. 첫 번째 숫자를 추가하려면 기존 "월"텍스트 모듈 아래에 새 텍스트 모듈을 추가하십시오.
숫자 / 내용 추가
그런 다음 텍스트 모듈 레이블을 업데이트하여 쉽게 참조 할 수 있도록 "num1"을 읽습니다. 그런 다음 숫자 "01"로 내용을 업데이트하십시오.
숫자 디자인 설정
디자인 탭에서 다음을 업데이트하십시오.
- 텍스트 글꼴 : Prata
- 텍스트 텍스트 색상 : # 8ab2d3
- 텍스트 텍스트 크기 : 70px
- 텍스트 문자 간격 : 4px
- 텍스트 줄 높이 : 1.5em
- 패딩 : 20px 남음
참고 : 숫자의 텍스트 크기는 70px이고 행 높이는 1.5em입니다. 이는 텍스트 모듈의 총 높이가 100px에 가깝다는 것을 의미합니다. 수직 모션 오프셋을 추가 할 때마다 명심해야합니다. 예를 들어, 텍스트 모듈에 세로 오프셋 "1"을 추가하면 텍스트 모듈이 텍스트 모듈의 높이 인 정확히 100px로 이동합니다.
첫 번째 숫자에 대한 스크롤 효과
텍스트 모듈에 다음 스크롤 효과를 추가하십시오.
수직 모션 탭에서 다음을 업데이트하십시오.
- 수직 운동 활성화 : 예
- 시작 오프셋 : 1 (10 %에서)
- 평균 오프셋 : 0 (20 %)
- 끝 오프셋 : -1 (30 %에서)
페이드 인 및 페이드 아웃 탭에서 다음을 업데이트합니다.
- 페이드 인 및 아웃 활성화 : 예
- 초기 불투명도 : 0 % (10 %)
- 평균 불투명도 : 100 % (20 %)
- 최종 불투명도 : 0 % (~ 30 %)
클립 상단에서 모션 효과에 대한 트리거를 설정해야합니다.
- 모션 효과 트리거 : 요소 상단
두 번째 숫자의 텍스트 모듈을 만듭니다.
첫 번째 숫자를 복제
첫 번째 숫자가 생성되면이를 복제하여 두 번째 숫자 텍스트 모듈을 만듭니다. 그런 다음 더 나은 참조를 위해 레이어보기에서 레이블을 업데이트합니다.
업데이트 번호 / 내용
두 번째 디지털 텍스트 모듈의 매개 변수를 열고 숫자 "02"로 컨텐츠를 업데이트하십시오.
위치 업데이트
그런 다음 다음과 같이 위치 옵션을 업데이트하십시오.
- 위치 : 절대
- 수직 오프셋 : 126px
스크롤 효과 업데이트
그런 다음 다음과 같이 스크롤 효과를 업데이트하십시오.
수직 동작 탭에서 다음을 업데이트합니다.
- 시작 오프셋 : 1 (20 %에서)
- 평균 오프셋 : 0 (30 %)
- 끝 오프셋 : -1 (40 %에서)
페이드 인 및 페이드 아웃 탭에서 다음을 업데이트합니다.
- 초기 불투명도 : 0 % (20 %)
- 평균 불투명도 : 100 % (30 %)
- 최종 불투명도 : 0 % (~ 40 %)
세 번째 문제에 대한 텍스트 모듈 만들기
두 번째 숫자를 복제
세 번째 숫자의 텍스트 모듈을 만들려면 두 번째 숫자의 텍스트 모듈을 복제하십시오.
업데이트 번호 / 내용
숫자 "03"으로 컨텐츠를 업데이트하십시오.
스크롤 효과 업데이트
그런 다음 스크롤 효과를 업데이트하십시오.
수직 동작 탭에서 다음을 업데이트합니다.
- 시작 오프셋 : 1 (30 %에서)
- 평균 오프셋 : 0 (40 %)
- 끝 오프셋 : -1 (50 %에서)
페이드 인 및 페이드 아웃 탭에서 다음을 업데이트합니다.
- 초기 불투명도 : 0 % (30 %)
- 평균 불투명도 : 100 % (40 %)
- 최종 불투명도 : 0 % (~ 50 %)
네 번째 문제에 대한 텍스트 모듈 만들기
세 번째 중복 문제
스크롤 카운터의 네 번째 숫자를 만들려면 세 번째 숫자의 텍스트 모듈을 복제하십시오.
업데이트 번호 / 내용
숫자 "04"으로 컨텐츠를 업데이트하십시오.
스크롤 효과 업데이트
그런 다음 스크롤 효과를 업데이트하십시오.
수직 동작 탭에서 다음을 업데이트합니다.
- 시작 오프셋 : 1 (40 %에서)
- 평균 오프셋 : 0 (50 %)
- 끝 오프셋 : 0 (60 %에서)
페이드 인 및 페이드 아웃 탭에서 다음을 업데이트합니다.
- 초기 불투명도 : 0 % (40 %)
- 평균 불투명도 : 100 % (50 %)
- 최종 불투명도 : 100 % (~ 60 %)
하부 분리기 추가
마지막 텍스트 모듈 아래에 새 구분 모듈을 추가합니다. 보기에서 스크롤 텍스트의 하단 오버플로를 숨기는 데 사용됩니다.
그런 다음 NO를 선택하여 구분 기호를 표시하십시오.
스타일 및 위치 설정
다음과 같이 구분 기호 디자인을 업데이트하십시오.
- 배경색 : #ffffff
- 너비 : 100 %
- 높이 : 100px
- 상단 테두리 너비 : 5px
고급 탭에서 다음을 업데이트하십시오.
- 비활성화 : 휴대 전화 및 태블릿
- 위치 : 절대
- 위치 : 왼쪽 하단
중요 : 구분 기호가 차지할 공간은 이전에 열에 100 픽셀 하단 패딩을 추가하여 생성되었습니다. 이 패딩을 추가하지 않으면 구분 기호가 숫자와 겹칩니다.
추가 카운터 및 열 생성
열 1을 복제하고 내용을 업데이트하십시오.
새 카운터를 만들려면 열 1을 복제하십시오. 그러면 모든 요소가 자동으로 배치 된 두 번째 열이 만들어집니다.
그런 다음 모든 텍스트 모듈의 내용을 새 텍스트와 숫자로 업데이트하기 만하면됩니다.
열 2을 복제하고 내용을 업데이트하십시오.
모든 텍스트 모듈의 내용이 열 2에서 업데이트되면 열 2를 복제하여 해당 연도에 대한 세 번째 카운터를 만듭니다. 그런 다음 필요에 따라 각 텍스트 모듈의 내용을 업데이트합니다.
최종 결과
최종 결과는 다음과 같습니다.
기타 자료
마지막 생각
스크롤 애니메이션 숫자 카운터가 있는 이 간단한 레이아웃은 표시에 유용합니다. données 새롭고 독특한 방식으로 디지털. 날짜 개념을 버리고 상상할 수 있는 모든 것에 대해 카운터를 사용하십시오!