Divi의 내장 된 스크롤 효과로 부드러운 애니메이션을 만드는 방법을 찾고 있다면이 튜토리얼을 좋아할 것입니다. 스크롤 스냅을 Divi의 내장 모션 효과와 결합하여 한 번에 스크롤 할 수있는 전체 높이 섹션을 만드는 방법을 보여 드리겠습니다.
첫 번째 섹션을 만드는 것으로 시작하겠습니다. 따라서 페이지 디자인 전체에서이 섹션을 재사용 할 것입니다. 스크롤 스냅을 활성화하기 위해 페이지의 섹션, HTML, 머리글 및 바닥 글에 할당 할 CSS 스크롤 스냅 속성을 사용합니다.
가능한 결과
튜토리얼을 시작하기 전에 다양한 화면 크기에서 결과를 빠르게 살펴 보겠습니다.
1. 새 페이지를 만들고 첫 번째 섹션 디자인을 시작하십시오
새 페이지를 추가하고 Visual Builder로 전환
새 페이지를 추가하여 시작하십시오. 페이지 제목을 입력하고 페이지를 게시 한 다음 Visual Builder로 전환합니다.
섹션 설정
크기 조정
새 페이지에 들어가면 이미있는 섹션을 열고 크기 설정을 변경합니다.
- 최소 높이 : 100vh
주요 요소
또한 섹션에 두 줄의 CSS 코드를 추가합니다. 이 CSS 코드 줄은 섹션을 스크롤 스냅을위한 스냅 지점으로 바꾸는 데 도움이됩니다.
스크롤 스냅 정렬 : 시작; 스크롤 스냅 중지 : 정상;
시계
섹션 컨테이너를 넘어서는 것이 없도록 섹션 오버플로를 숨길 것입니다.
- 수평 오버플로 : 숨겨진
- 수직 오버플로 : 숨겨진
라인 # 1 추가
기둥 구조
다음 열 구조를 사용하여 섹션에 새 줄을 계속 추가하십시오.
크기 조정
아직 모듈을 추가하지 않고 행 설정을 열고 다음과 같이 크기를 수정하십시오.
- 사용자 지정 거터 너비 사용 : 예
- 거터 폭 : 1
- 폭 : 100 %
- 최대 폭 : 100 %
간격
섹션의 기본 상단 및 하단 패딩도 제거합니다.
- 상단 패딩 : 0px
- 하단 패딩 : 0px
위치
그리고 우리는 그에 따라 행을 재배치 할 것입니다 :
- 위치 : 절대
- 위치 : 하단 중앙
열에 텍스트 모듈 추가
내용 상자를 비워 두십시오
이 행에서 필요한 유일한 모듈은 텍스트 모듈입니다. 모듈의 내용 상자를 비워 두십시오.
배경색
그런 다음 배경색을 변경하십시오.
- 배경색 : # ffee00
텍스트 설정
모듈의 텍스트 행 높이도 제거합니다.
- 텍스트 줄 높이 : 1em
크기 조정
그런 다음 크기 설정으로 이동하여 너비를 변경합니다.
- 폭 : 30 %
간격
상단 패딩을 추가하여 모듈을 정사각형으로 바꿉니다.
- 탑 패딩 : 30 %
행 # 2 추가
열 구조
다음 줄에. 다음 열 구조를 사용하십시오.
크기 조정
아직 모듈을 추가하지 않고 행 설정을 열고 디자인 탭에서 크기 조정 설정을 변경합니다.
- 사용자 정의 거터 너비를 사용하십시오. 예
- 거터 폭 : 1
- 폭 : 60vw
- 최대 폭 : 100 %
간격
그런 다음 다양한 화면 크기에 맞춤 상단 여백을 추가합니다.
- 상단 여백 : 20vh (데스크톱), 5vw (태블릿 및 전화)
2 열 간격
그런 다음 2 열의 설정을 열고 사용자 정의 채우기 값을 추가합니다.
- 상단 패딩 : 2vh (태블릿 및 전화)
- 왼쪽 패딩 : 2vw
- 오른쪽 패딩 : 2vw
열 1에 이미지 모듈 추가
업로드 이미지
모드를 추가하고 1 열에 이미지 모드를 추가하고 원하는 이미지를 업로드 할 때입니다.
크기 조정
그런 다음 모듈에 전체 너비를 적용합니다.
- 전체 폭 : 예
1 열에 텍스트 모듈 # 2 추가
H2 콘텐츠 추가
두 번째 열에서 우리에게 필요한 첫 번째 모듈은 텍스트 모듈입니다. 내용 H2.
H2 텍스트 설정
모듈 디자인 탭으로 이동하여 다음과 같이 H2 텍스트 설정을 변경합니다.
- 제목 2 글꼴 : Anton
- 항목 2 텍스트 크기 : 5vw (데스크톱), 7vw (태블릿), 9vw (전화)
2 열에 텍스트 모듈 # 2 추가
콘텐츠 추가
이전 모듈 바로 아래에 다른 텍스트 모듈을 추가하고 내용 당신이 선택한 설명의.
텍스트 설정
다음과 같이 모듈의 텍스트 설정을 변경하십시오.
- 텍스트 글꼴 : Open Sans
- 텍스트 크기 : 0.8vw (데스크톱), 2vw (태블릿), 2.5vw (전화)
- 텍스트 줄 높이 : 1,8 em
간격
그리고 간격 설정에 사용자 정의 상단 및 하단 여백을 추가합니다.
- 상단 여백 : 2vw
- 하단 여백 : 2vw
2 열에 버튼 모듈 추가
복사본 추가
이 칼럼에서 필요한 다음 모듈과 마지막 모듈은 버튼 모듈입니다. 선택한 사본을 추가하십시오.
버튼 설정
그에 따라 버튼의 스타일을 지정하십시오.
- 버튼에 사용자 정의 스타일 사용 : 예
- 버튼 텍스트 크기 : 1vw (데스크톱), 2vw (태블릿), 3vw (전화)
- 버튼 텍스트 색상 : # 333333
- 버튼 테두리 색상 : # 333333
- 버튼 반경 : 1px
- 버튼 글꼴 : Anton
- 버튼 글꼴 스타일 : 대문자
간격
그리고 화면 크기에 따라 사용자 지정 값을 추가하여 모듈 설정을 완료합니다.
- 높은 내부 여백 : 1vw (데스크톱), 2vw (태블릿), 3vw (전화)
- 낮은 내부 여백 : 1vw (데스크톱), 2vw (태블릿), 3vw (전화)
- 왼쪽 내부 여백 : 3vw (데스크톱), 5vw (태블릿), 7vw (전화)
- 오른쪽 인터넷 여백 : 3vw (데스크톱), 5vw (태블릿), 7vw (전화)
2. 다른 요소에 스크롤 효과 추가
라인 1의 텍스트 모듈
수직 애니메이션
모든 요소가 배치되면 스크롤 효과를 추가 할 차례입니다. 첫 번째 행에서 텍스트 모듈을 열고 세로 동작을 사용하십시오.
- 수직 운동 활성화 : 예
- 오프셋 시작 : 4
- 중간 오프셋 : 0
- 종료 오프셋 : -4
- 모션 효과 트리거 : 요소의 중간
2 호선
1 열
수평 애니메이션
그런 다음 두 번째 행의 첫 번째 열을 열고 수평 이동을 추가하십시오.
- 수평 이동 활성화 : 예
- 시작 오프셋 : -3
- 평균 오프셋 : 0 (40 % ~ 60 %)
- 끝 오프셋 : -3
- 트리거 모션 효과 : 요소 중간
페이드 인 및 아웃
또한 동일한 열에 페이드 인 및 페이드 아웃 효과를 적용합니다.
- 페이드 인 및 아웃 활성화 : 예
- 초기 불투명도 : 0 %
- 평균 불투명도 : 100 %
- 최종 불투명도 : 100 %
- 트리거 모션 효과 : 요소 중간
2 열
수평 운동
그런 다음 두 번째 열의 매개 변수를 열고 다음 수평 이동 매개 변수를 적용합니다.
- 수평 이동 활성화 : 예
- 시작 오프셋 : 3
- 평균 오프셋 : 0 (40 % ~ 60 %)
- 끝 오프셋 : 3
- 트리거 모션 효과 : 요소 중간
페이드 인 및 아웃
들어오고 나가는 페이드 효과.
- 페이드 인 및 아웃 활성화 : 예
- 초기 불투명도 : 0 %
- 평균 불투명도 : 100 %
- 최종 불투명도 : 100 %
- 트리거 모션 효과 : 요소 중간
4. 첫 번째 섹션을 재사용
섹션을 네 번 복제
첫 번째 섹션과 스크롤 효과를 완료하면 원하는만큼 복제 할 수 있습니다.
다른 모든 섹션의 배경색 변경
다른 모든 섹션의 배경색을 변경합니다.
- 배경색 : # 111111
5. HTML 페이지에서 스크롤 캡처를 가능하게하는 CSS 코드 추가
페이지의 마지막 섹션에 코드 모듈 추가
이제 페이지의 HTML에서 스크롤 캡처를 활성화하기 위해 페이지의 마지막 섹션에 코드 모듈을 추가 할 것입니다.
HTML CSS 코드 삽입
이 CSS 코드 줄은 페이지의 HTML 코드에 스크롤 정렬을 적용하는 데 도움이됩니다.
<style> html {overflow-x: hidden;scroll-snap-type: y mandatory;scroll-snap-points-y: repeat(100vh);} </style>
머리글 및 바닥 글에 스크롤 스냅 시작 추가
다음과 같은 CSS 코드 행을 추가하여 머리글과 바닥 글이 스크롤 캡처 지점 (섹션과 마찬가지로)인지 확인합니다.
머리글, 바닥 글 {scroll-snap-align : start;}
완료하는 방법
이 기사에서는 스크롤 스냅과 Divi의 내장 모션 효과를 결합하여 부드러운 애니메이션을 만드는 방법을 보여주었습니다. 이것은 한 번의 스크롤로 스크롤 효과를 활성화하는 좋은 방법입니다.
스크롤 캡처 도움말 방문자 의 다른 부분을 쉽게 탐색할 수 있습니다. 사이트 웹. 전체 높이 섹션 디자인과 결합했습니다. JSON 파일도 무료로 다운로드할 수 있었습니다! 질문이나 제안 사항이 있으면 아래의 댓글 섹션에 자유롭게 의견을 남겨주세요.
