당신에 대해 이야기하는 페이지는 당신의 가장 중요한 페이지 중 하나입니다. 사이트 웹. 이를 통해 사람들은 귀하를 더 잘 알게 되고 다음 단계를 진행하는 것이 편안한지 결정할 수 있습니다. 이 페이지에 내레이션을 포함하는 쉬운 방법을 찾고 있다면 이 튜토리얼이 마음에 드실 것입니다. 스크롤 시 부드러운 내레이션 전환을 만들기 위해 Divi의 스크롤 효과를 사용하겠습니다. 이야기의 한 부분이 사라지자마자 다른 부분이 나타납니다. 이는 다음을 제공합니다. 방문자 재미있는 이야기를 읽는 느낌. 

가능한 최종 결과

튜토리얼을 시작하기 전에 다양한 화면 크기에서 결과를 살펴 보겠습니다.

Divi 애니메이션

1. 페이지의 첫 번째 전체 화면 섹션을 만듭니다.

새 섹션 추가

배경색

정보 페이지에 첫 번째 섹션을 추가하여 시작하십시오. 섹션 설정을 열고 배경색을 검정색으로 변경하십시오.

  • 배경색 : # 000000
Divi 배경 섹션

크기 조정

그런 다음 크기 조정 매개 변수에 최소 높이를 추가하여 섹션을 전체 화면으로 돌립니다.

  • 최소 높이 : 100vh
Divi 섹션 높이

2. 애니메이션 라인 추가

새 행 추가

기둥 구조

그런 다음 다음 열 구조를 사용하여 섹션에 새 행을 추가하십시오.

divi 라인 추가

크기 조정

선 매개 변수를 열고 치수 매개 변수를 수정하여 선이 단면 컨테이너의 전체 너비를 차지하도록합니다.

  • 너비 : 100 %
  • 최대 폭 : 100 %
최대 divi 너비 구성

간격

그런 다음 다른 화면 크기에 왼쪽 및 오른쪽 채우기를 추가합니다.

  • 왼쪽 패딩 : 20vw (데스크톱), 10vw (태블릿 및 전화)
  • 오른쪽 패딩 : 20vw (데스크) 10vw (태블릿 및 전화)
divi 패딩 맞춤 설정

애니메이션

스토리 텔링 효과를 높이기 위해 선에 페이드 애니메이션도 사용할 것입니다.

  • 애니메이션 스타일 : 페이드
  • 애니메이션 기간 : 3000ms
  • 애니메이션 속도 곡선 : Ease-in-out
  • 애니메이션 반복 : 한 번
Divi 섹션 애니메이션

위치

마지막으로 위치 옵션을 수정하여 선이 섹션 컨테이너의 중앙에 배치되도록합니다.

  • 위치 : 절대
  • 위치 : 센터
폐지 디비 위치

3. 스크롤 효과가있는 제목을 삽입하십시오

열에 텍스트 모듈 # 1 추가

H1 콘텐츠 추가

이 줄에 필요한 유일한 모듈은 텍스트 모듈입니다. 내용 H1.

디자인 제목 divi

제목 1 텍스트 설정

모듈 디자인 탭으로 이동하여 다음과 같이 H1 텍스트 설정을 변경합니다.

  • 제목 글꼴 : Nunito
  • 제목 글꼴 무게 : 세미 볼드
  • 헤더 텍스트 색상 : #ffffff
  • 헤더 텍스트 크기 : 7vw (데스크톱), 9vw (태블릿), 11vw (휴대 전화)
Divi 글꼴 구성

수직 운동

미묘한 수직 애니메이션도 추가 할 것입니다.

  • 수직 이동 활성화 : 예
  • 시작 오프셋 : 0 (50 %에서)
  • 평균 오프셋 : 10 (100 %)
  • 최종 오프셋 : 10
Divi 텍스트 애니메이션

들어오고 나가는 스크롤 효과

들어오고 나가는 페이드 효과.

  • 페이드 인 및 아웃 활성화 : 예
  • 초기 불투명도 : 100 %
  • 평균 불투명도 : 100 % (55 %)
  • 최종 불투명도 : 0 % (~ 62 %)
불투명 애니메이션 선택

스크롤 효과를 위아래로 크기 조정

마지막으로, 위아래 스크롤 효과도 사용할 것입니다.

  • 확장 및 축소 활성화 : 예
  • 시작 규모 : 100 % (~ 40 %)
  • 평균 규모 : 95 % (~ 74 %)
  • 엔드 스케일 : 90 %
Divi 애니메이션 텍스트

4. 전체 섹션을 한 번 복제하고 스크롤 효과가있는 설명 텍스트를 포함시킵니다.

제목 및 내용 편집

첫 번째 섹션을 완료하면 완전히 복제 할 수 있습니다. 중복 섹션 컨테이너 내부의 텍스트 모듈을 열고 H2 사본을 사용하십시오.

섹션 중복 divi

H2 텍스트 모듈의 텍스트 매개 변수 수정

H2 텍스트 설정을 적절히 변경하십시오.

  • 제목 2 경찰 : Nunito
  • 서체 제목 2 : 세미 볼드
  • 항목 2 텍스트 색상 : #ffffff
  • 항목 2 텍스트 크기 : 5vw (데스크톱), 7vw (태블릿), 8vw (전화)
  • 2 행 높이 : 1em (사무실), 1.2em (태블릿 및 전화)
스크롤 이야기

열에 텍스트 모듈 # 2 추가

콘텐츠 추가

다음으로, 다른 텍스트 모듈을 열에 추가합니다. 내용 당신의 선택에 대한 설명.

스크롤 이야기

텍스트 설정

다음과 같이 텍스트 모듈의 텍스트 설정을 변경하십시오.

  • 텍스트 글꼴 : Open Sans
  • 텍스트 색상 : #ffffff
  • 텍스트 크기 : 1vw (데스크톱), 2.5vw (태블릿), 3vw (전화)
  • 텍스트 줄 높이 : 3.1em (데스크), 2.5em (태블릿 및 전화)
스크롤 이야기

간격

또한 상단 여백을 사용하십시오.

  • 상단 여백 : 8vw
스크롤 이야기

들어오고 나가는 스크롤 효과

다음으로 고급 탭에서 스크롤 효과로 전환하고 다음 페이드 인 및 페이드 아웃 설정을 사용하십시오.

  • 페이드 인 및 아웃 활성화 : 예
  • 초기 불투명도 : 100 %
  • 평균 불투명도 : 0 % (31 %)
  • 최종 불투명도 : 0 % (~ 35 %)
Divi 텍스트 모듈 스크롤 애니메이션

스크롤 효과를 위아래로 크기 조정

또한 확대 및 축소 효과를 추가합니다.

  • 확장 및 축소 활성화 : 예
  • 시작 규모 : 100 % (~ 40 %)
  • 평균 규모 : 95 % (~ 74 %)
  • 엔드 스케일 : 90 %
애니메이션 적응 divi 텍스트 모듈

이제 이 마지막 섹션을 가능한 한 여러 번 복제할 수 있습니다. 그러나 조정이 필요합니다. 내용 필요에 따라 각 섹션을 선택하세요.

측량

이제 모든 단계를 수행 했으므로 다양한 화면 크기에서 어떻게 보이는지 마지막으로 살펴 보겠습니다.

샘플 결과

마지막 생각

이 글에서는 Divi에 내장된 스크롤 효과를 사용하여 정보 페이지에 스토리를 전달하는 방법을 보여주었습니다. 우리가 만든 효과는 연속 복사본이 페이드 인 및 페이드 아웃되도록 허용하여 방문자 이야기를 읽는 것처럼. 또한 무료로 JSON 파일을 다운로드할 수 있었습니다! 질문이나 제안 사항이 있으면 아래 의견 섹션에 의견을 남겨주십시오.