당신에 대해 이야기하는 페이지는 당신의 가장 중요한 페이지 중 하나입니다. 사이트 웹. 이를 통해 사람들은 귀하를 더 잘 알게 되고 다음 단계를 진행하는 것이 편안한지 결정할 수 있습니다. 이 페이지에 내레이션을 포함하는 쉬운 방법을 찾고 있다면 이 튜토리얼이 마음에 드실 것입니다. 스크롤 시 부드러운 내레이션 전환을 만들기 위해 Divi의 스크롤 효과를 사용하겠습니다. 이야기의 한 부분이 사라지자마자 다른 부분이 나타납니다. 이는 다음을 제공합니다. 방문자 재미있는 이야기를 읽는 느낌.
가능한 최종 결과
튜토리얼을 시작하기 전에 다양한 화면 크기에서 결과를 살펴 보겠습니다.
1. 페이지의 첫 번째 전체 화면 섹션을 만듭니다.
새 섹션 추가
배경색
정보 페이지에 첫 번째 섹션을 추가하여 시작하십시오. 섹션 설정을 열고 배경색을 검정색으로 변경하십시오.
- 배경색 : # 000000
크기 조정
그런 다음 크기 조정 매개 변수에 최소 높이를 추가하여 섹션을 전체 화면으로 돌립니다.
- 최소 높이 : 100vh
2. 애니메이션 라인 추가
새 행 추가
기둥 구조
그런 다음 다음 열 구조를 사용하여 섹션에 새 행을 추가하십시오.
크기 조정
선 매개 변수를 열고 치수 매개 변수를 수정하여 선이 단면 컨테이너의 전체 너비를 차지하도록합니다.
- 너비 : 100 %
- 최대 폭 : 100 %
간격
그런 다음 다른 화면 크기에 왼쪽 및 오른쪽 채우기를 추가합니다.
- 왼쪽 패딩 : 20vw (데스크톱), 10vw (태블릿 및 전화)
- 오른쪽 패딩 : 20vw (데스크) 10vw (태블릿 및 전화)
애니메이션
스토리 텔링 효과를 높이기 위해 선에 페이드 애니메이션도 사용할 것입니다.
- 애니메이션 스타일 : 페이드
- 애니메이션 기간 : 3000ms
- 애니메이션 속도 곡선 : Ease-in-out
- 애니메이션 반복 : 한 번
위치
마지막으로 위치 옵션을 수정하여 선이 섹션 컨테이너의 중앙에 배치되도록합니다.
- 위치 : 절대
- 위치 : 센터
3. 스크롤 효과가있는 제목을 삽입하십시오
열에 텍스트 모듈 # 1 추가
H1 콘텐츠 추가
이 줄에 필요한 유일한 모듈은 텍스트 모듈입니다. 내용 H1.
제목 1 텍스트 설정
모듈 디자인 탭으로 이동하여 다음과 같이 H1 텍스트 설정을 변경합니다.
- 제목 글꼴 : Nunito
- 제목 글꼴 무게 : 세미 볼드
- 헤더 텍스트 색상 : #ffffff
- 헤더 텍스트 크기 : 7vw (데스크톱), 9vw (태블릿), 11vw (휴대 전화)
수직 운동
미묘한 수직 애니메이션도 추가 할 것입니다.
- 수직 이동 활성화 : 예
- 시작 오프셋 : 0 (50 %에서)
- 평균 오프셋 : 10 (100 %)
- 최종 오프셋 : 10
들어오고 나가는 스크롤 효과
들어오고 나가는 페이드 효과.
- 페이드 인 및 아웃 활성화 : 예
- 초기 불투명도 : 100 %
- 평균 불투명도 : 100 % (55 %)
- 최종 불투명도 : 0 % (~ 62 %)
스크롤 효과를 위아래로 크기 조정
마지막으로, 위아래 스크롤 효과도 사용할 것입니다.
- 확장 및 축소 활성화 : 예
- 시작 규모 : 100 % (~ 40 %)
- 평균 규모 : 95 % (~ 74 %)
- 엔드 스케일 : 90 %
4. 전체 섹션을 한 번 복제하고 스크롤 효과가있는 설명 텍스트를 포함시킵니다.
제목 및 내용 편집
첫 번째 섹션을 완료하면 완전히 복제 할 수 있습니다. 중복 섹션 컨테이너 내부의 텍스트 모듈을 열고 H2 사본을 사용하십시오.
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 %)
스크롤 효과를 위아래로 크기 조정
또한 확대 및 축소 효과를 추가합니다.
- 확장 및 축소 활성화 : 예
- 시작 규모 : 100 % (~ 40 %)
- 평균 규모 : 95 % (~ 74 %)
- 엔드 스케일 : 90 %
이제 이 마지막 섹션을 가능한 한 여러 번 복제할 수 있습니다. 그러나 조정이 필요합니다. 내용 필요에 따라 각 섹션을 선택하세요.
측량
이제 모든 단계를 수행 했으므로 다양한 화면 크기에서 어떻게 보이는지 마지막으로 살펴 보겠습니다.
마지막 생각
이 글에서는 Divi에 내장된 스크롤 효과를 사용하여 정보 페이지에 스토리를 전달하는 방법을 보여주었습니다. 우리가 만든 효과는 연속 복사본이 페이드 인 및 페이드 아웃되도록 허용하여 방문자 이야기를 읽는 것처럼. 또한 무료로 JSON 파일을 다운로드할 수 있었습니다! 질문이나 제안 사항이 있으면 아래 의견 섹션에 의견을 남겨주십시오.
당신의 튜토리얼이 저를 많이 도왔습니다.
divi로 페이지 전환을 만드는 방법을 알고 있습니까? 잘 작동하는 것 같은 플러그인을 찾았습니다. https://divi-page-transition.com 내 사이트에서. 어떻게 생각해 ?