Section Divider를 사용하여 스크롤 효과를 만드는 것은 당신의 작품에 생명을 불어넣을 수 있는 간단하고 재미있는 기술입니다. 사이트 웹 를 사용하여 워드 프레스 테마 디비. 섹션 구분선은 계속해서 다양한 디자인 요소로 활용되며 전환에 창의성을 더하는 데 유용합니다. 내용 데 페이지.
그러나 Divi의 스크롤 효과를 사용하면 섹션 구분선이 더욱 흥미로워집니다! 비결은 선택한 구분선 스타일 전용 섹션을 분리하는 것입니다. 그런 다음 스크롤로 생성된 모든 종류의 움직임을 섹션에 추가하여 배경으로 아름다운 스크롤 효과를 만들 수 있습니다. 내용 페이지입니다.
시작하자!
가능한 결과
다음은이 튜토리얼을 완료 한 후 얻을 수있는 디자인에 대한 개요입니다.
Divi를 사용하여 애니메이션 스크롤 섹션 구분선을 만드는 방법
두 개의 컨텐츠 섹션 작성
행 추가
시작하려면 기본 섹션에 하나의 열이있는 행을 만듭니다.
섹션 마진 (테스트 용)
테스트 목적으로 스크롤 할 공간을 확보 할 수 있도록 섹션에 위쪽 여백을 추가합니다. 섹션 설정을 열고 다음을 추가하십시오.
- 상단 마진 : 80vh
텍스트 모듈 추가
열 행에 새 텍스트 모듈을 추가하십시오.
텍스트 모듈의 내용
내면에 내용 본문에 다음 H2 제목을 추가합니다.
<h2>Section Avec Séparateurs</h2>
텍스트 모듈 디자인
디자인 설정에서 다음을 업데이트하십시오.
- 텍스트 글꼴 : Roboto
- 텍스트의 정렬 : 중심
- 항목 2 텍스트 색상 : # bae0d8
- 헤더 2 텍스트 크기 : 80px (데스크톱), 50px (태블릿), 30px (전화)
두 번째 컨텐츠 섹션 추가
이전 섹션에서 새 일반 섹션을 추가하십시오.
행 추가
새 섹션에서 열에 행을 추가하십시오.
텍스트 모듈 추가
그런 다음 줄에 새 텍스트 모듈을 추가하십시오.
텍스트 모듈 디자인
지금은 기본 패딩 콘텐츠를 본문 안에 유지할 수 있습니다. 디자인 탭으로 이동하여 다음을 업데이트하겠습니다.
- 텍스트 글꼴 : Roboto
- 텍스트 텍스트 색상 : #dddddd
- 텍스트 크기 : 16px
- 텍스트 줄 높이 : 1,5 em
- 텍스트 정렬 : 왼쪽
- 최대 너비 : 400 픽셀
- 모듈의 정렬 : 중심
섹션 설정
섹션의 기본 배경색을 제거하되 완전히 투명한 배경을 지정하십시오. 그런 다음 스크롤 테스트를 위해 상단 패딩을 제거하고 하단 여백을 추가 할 수 있습니다.
이렇게하려면 섹션 설정을 열고 다음을 업데이트하십시오.
- 배경색 : rgba (0,0,0,0)
- 하단 마진 : 80vh
- 안쪽 여백 : 0px
애니메이션 섹션 구분자 작성
두 개의 콘텐츠 섹션이 완성되면 애니메이션 섹션 구분선에 섹션을 추가 할 수 있습니다.
새 섹션 추가
계속해서 두 컨텐츠 섹션 중간에 새로운 일반 섹션을 만듭니다.
섹션의 컨텍스트
다시 섹션의 기본 배경색을 제거하고 다음을 업데이트합니다.
- 배경색 : rgba (0,0,0,0)
섹션 디바이더 디자인
걱정하지 마세요. 섹션 구분선으로 배경색을 만들 것입니다. 이렇게하려면 디자인 탭을 클릭하고 다음과 같이 섹션에 위쪽 및 아래쪽 구분선을 추가합니다.
우수한 분배기 설계
- 상단 구분선 스타일 : 스크린 샷 참조
- 상단 분배기의 색상 : # 524fbf
- 상단 분배기의 높이 : 20vw
- 상단 분배기의 수평 반복 : 0,6x
- 상단 분배기의 뒤집기 : 수평
하부 분배기 설계
- 하단 구분선 스타일 : 스크린 샷 참조
- 하단 분리기 색상 : # 524fbf
- 하부 분배기의 높이 : 20vw
- 하위 분배기의 수평 반복 : 0,5x
- 하부 분배기 기울기 : 수평 및 수직
섹션 높이 및 패딩
이 섹션은 순전히 구분선 디자인을위한 것이므로 구분선의 스타일 만 표시되고 두 콘텐츠 섹션 사이에 불필요한 공간이 생기지 않도록 높이와 패딩을 제거 할 수 있습니다. 다음을 업데이트하십시오.
- 높이 : 0px
- 패딩 : 0px 높이, 0px low
섹션 구분자 스크롤 효과
그런 다음 섹션에 다음과 같은 스크롤 효과를줍니다.
탭 아래 수평 운동 ...
- 수평 이동 활성화 : 예
보기에서이 설정에 대한 기본 설정을 유지할 수 있습니다. 국 .
그런 다음 수평 이동 매개 변수를 했던 Tablette :
- 시작 오프셋 : 3 (창의 0 %에서)
- 평균 오프셋 : 0 (뷰포트의 50 %에서)
- 끝 오프셋 : -3 (뷰포트의 100 %에서)
탭 아래 확대 및 축소 효과 에서 다음을 업데이트하십시오. 국 ...
- 시작 눈금 : 200 % (창의 0 %에서)
- 평균 배율 : 150 % (뷰포트의 45 % -65 %에서)
- 끝 배율 : 150 % (뷰포트의 100 %에서)
그런 다음 Scaling Up and Down 효과를 했던 Tablette 다음과 같이
- 시작 눈금 : 400 % (창의 0 %에서)
- 평균 배율 : 300 % (뷰포트의 45 % -65 %에서)
- 끝 배율 : 400 % (뷰포트의 100 %에서)
태블릿 (및 휴대폰)에서 모션 효과를 조정해야하는 주된 이유는 픽셀 길이 단위 (즉, 3 = 300 픽셀)를 사용하는 수평 모션 값 때문입니다. 절대적이며 브라우저의 너비에 맞게 조정하지 마십시오.
이제 스크롤 애니메이션 섹션 디바이더의 최종 결과를 봅시다.
마지막 생각
스크롤의 섹션 구분선 애니메이션은 웹 페이지에 활기를 불어 넣는 재미 있고 효과적인 방법입니다. 이것이 더 창의적인 디자인을 직접 촉발 할 수있는 영감을주기를 바랍니다.
