배경을 디자인하고 싶으신가요? Divi 마스크와 패턴 덕분에 페이지를 스크롤할 때 애니메이션이 적용됩니까? 이 튜토리얼은 당신을 위한 것입니다...

스크롤 애니메이션 추가 Divi 배경 마스크와 패턴은 배경 디자인에 새로운 생명을 불어넣을 수 있는 유용한 디자인 팁입니다. 사이트 웹

이 자습서에서는 스크롤 옵션을 사용하여 마스크와 배경 패턴을 만들고 애니메이션하는 방법을 보여줍니다. Divi (사용자 지정 코드가 필요하지 않음). 

이를 위해 선을 사용하여 플로팅 배경 레이어를 만듭니다. Divi 사용자가 섹션을 스크롤할 때 마스크와 배경 패턴에 애니메이션을 적용하는 데 사용할 것입니다. 내용

우리는 당신이 그 결과를 좋아할 것이라고 생각합니다.

시작하자!

측량

다음은 이 자습서의 배경 스크롤 애니메이션이 어떻게 표시되는지에 대한 간단한 그림입니다.

마스크와 패턴 덕분에 페이지를 스크롤할 때 애니메이션 Divi 배경

개념

이 디자인의 개념은 이해하기 너무 어렵지 않아야 합니다. 그라데이션 배경이 있는 섹션부터 시작합니다.

마스크와 패턴을 사용하여 페이지를 스크롤할 때 애니메이션 Divi 배경 디자인

그런 다음 오버레이와 같이 섹션을 완전히 덮도록 배치된(절대) 선을 만듭니다. 행에 배경 패턴을 추가할 수 있습니다.

다음으로 열에 배경 마스크를 추가할 수 있습니다.

그런 다음 추가합니다. 스크롤 효과 섹션의 배경에서 패턴과 마스크를 개별적으로 애니메이션화하는 행과 열(축척 및 회전과 같은).

마스크와 패턴을 사용하여 페이지를 스크롤할 때 애니메이션 Divi 배경 디자인

섹션 오버플로를 숨기면 섹션에 포함된 애니메이션만 볼 수 있습니다.

마스크와 패턴 덕분에 페이지를 스크롤할 때 애니메이션 Divi 배경

Divi Builder로 페이지를 만드는 것부터 시작해 봅시다.

시작하려면 다음을 수행해야 합니다.

WordPress 대시보드에서 페이지> 새로 추가 새 페이지를 만듭니다.

마스크와 패턴을 사용하여 페이지를 스크롤할 때 애니메이션 Divi 배경 디자인

이해하기 쉬운 제목을 지정하고 클릭하십시오.  Divi 건축업자

#이미지_제목

그런 다음 클릭 건물 시작 (처음부터 구축)

마스크와 패턴을 사용하여 페이지를 스크롤할 때 애니메이션 Divi 배경 디자인

그 후에 Divi에서 디자인을 시작할 빈 캔버스가 생깁니다.

읽기 : Divi: "그라디언트 빌더"를 사용하여 이미지를 아름답게 하는 방법

Divi로 애니메이션 스크롤 배경 마스크 및 패턴을 만드는 방법

섹션 배경 디자인

먼저 줄 만들기를 건너뛰고 테마 작성기에서 기존 기본 섹션 편집으로 바로 이동합니다. 

배경 디자인을 브라우저에 채우려면 섹션에 세로 높이를 추가해야 합니다. 이를 수행하는 간단한 방법은 섹션에 최소 높이를 추가하는 것입니다.

섹션 설정을 엽니다. 탭 아래 디자인, 다음과 같이 최소 높이를 업데이트하고 패딩을 제거합니다.

  • 여백: 80vh(상단 및 하단)
  • 패딩: 0px(상단 및 하단)

섹션의 배경 그라데이션 디자인

이제 섹션에 사용자 정의 배경 그라데이션을 추가할 수 있습니다.

첫 번째 그래디언트 스톱을 추가하려면 섹션 설정이 탭 아래에 열려 있는지 확인하십시오. 내용. 그런 다음 탭을 선택하십시오. 배경 그라데이션 클릭하여 새 그라디언트를 추가합니다. 이렇게 하면 두 가지 기본 그라데이션 색상이 추가됩니다. 다음과 같이 색상 및 위치와 함께 다음 Gradient Stops를 추가합니다.

  • 그라데이션 중지:
    • 0%: #4158d0
    • 50%: #c850c0
    • 100%: #ffcc70

그런 다음 선형 그래디언트의 방향을 변경합니다.

  • 기울기 방향: 270도

섹션에 행 추가

이제 섹션이 준비되었으므로 섹션에 XNUMX열 행을 추가합니다. 이 선은 배경 마스크와 패턴 스크롤 애니메이션에 사용됩니다.

다음으로 방금 만든 줄을 복제합니다. 이 두 번째(중복된) 줄은 다음 작업에 사용됩니다. 내용 평소처럼. 

이제 배경 스크롤 애니메이션에 대한 맨 위 줄과 내용 정상입니다.

라인 커스터마이징

이제 섹션 배경 그라데이션이 준비되었으므로 스크롤 배경 애니메이션에 사용할 라인으로 주의를 돌릴 수 있습니다. 

라인 설정을 엽니다. 탭 아래 Advnaced, 다음을 업데이트합니다.

  • 위치: 절대

이렇게 하면 문서의 실제 공간을 차지하지 않고 선이 섹션과 겹칠 수 있습니다. 

이제 우리가 해야 할 일은 섹션의 전체 너비와 높이에 걸쳐 있도록 높이와 너비를 업데이트하는 것입니다. 이렇게 하면 필요한 오버레이와 두 번째 배경 디자인 레이어가 생성됩니다.

탭 아래 디자인, 다음과 같이 크기 조정 옵션을 업데이트합니다.

  • Aquasize 컬럼 높이: 예
  • 폭: 100%
  • 최대 너비: 100%
  • 높이: 100%
  • 패딩: 0px(상단 및 하단)

이제 선이 보이지 않을 수 있지만 이제 전체 섹션의 배경을 완벽하게 덮습니다.

선의 배경 패턴 만들기

이 예에서는 패턴을 추가합니다. 색종이 조각 라인 배경으로.

라인 설정을 엽니다. 옵션에서 배경, 탭 선택 배경 무늬 다음을 업데이트하십시오.

  • 배경 패턴: 색종이 조각
  • 패턴 :
    • 색상: #f6bef7
    • 크기: 사용자 정의 크기
    • 너비: 35vw
    • 원점 반복: 중심

참고 : VW 길이 단위를 사용하면 패턴이 브라우저에 따라 크기가 조정되어 디자인의 일관성과 반응성이 유지됩니다.

라인에 스크롤 효과 추가

이제 배경 패턴이 배치되었으므로 스크롤 효과를 선에 추가할 수 있습니다.

탭으로 이동 Advnaced. 옵션에서 스크롤 효과, 다음을 업데이트합니다.

탭 선택 수평 운동 다음을 업데이트하십시오.

  • 수평 모션 활성화: 예
  • 시작 오프셋: 0,5(0%에서)
  • 중간 오프셋: 0(40%에서 60%까지)
  • 끝 오프셋: -0,5(100%에서)

이렇게 하면 선 배경 패턴이 왼쪽으로 50픽셀 시작하여 오른쪽으로 50픽셀 끝납니다.

"Scale Up and Down" 탭을 선택하고 다음을 업데이트합니다.

  • 확장 및 축소 활성화: 예
  • 시작 배율: 150%(0%에서)
  • 중간 규모: 100%(40%에서 60%까지)
  • 엔딩 배율: 150%(100% 기준)

그러면 스크롤할 때 행의 배경 패턴이 조정됩니다.

Divi로 스크롤할 때 마스크와 배경 패턴을 애니메이션으로 만드는 방법

탭 선택 « 회전  » 다음을 업데이트하십시오.

  • 회전 활성화: 예
  • 시작 회전: 10도(0%에서)
  • 중간 회전: 0도(40%에서 60%로)
  • 끝 회전: -10도(100% 기준)

핵심 팁: 회전을 최소로 유지해야 합니다. 그렇지 않으면 선이 섹션을 지나 확장되지 않는 간격이 나타날 위험이 있습니다. 좋은 경험 법칙은 회전을 늘리려면 배율을 높이는 것입니다. 이렇게 하면 가장자리를 노출하지 않고 선이 단면 위로 회전할 수 있습니다.

열에 스크롤 효과가 있는 배경 마스크 추가

행이 완료되면 동일한 행의 열에 스크롤 효과가 있는 배경 마스크를 추가할 준비가 된 것입니다. 시작하려면 배경 마스크를 추가해 보겠습니다.

이렇게 하려면 열 설정을 엽니다. 탭 아래 배경 마스크, 다음을 업데이트합니다.

  • 마스크: 레이어 블롭
  • 색상: #ffffff
  • 마스크 변환: 수평 뒤집기, 반전

열에 스크롤 효과 추가

이제 배경 마스크가 배치되었으므로 열에 스크롤 효과를 추가할 수 있습니다. 열에는 이미 상위 행에서 상속된 스크롤 효과가 있음을 명심하십시오. 

우리가 할 일은 스크롤하는 동안 마스크와 패턴을 더 많이 분리하기 위해 열을 행의 반대 방향으로 회전시키는 것입니다.

탭으로 이동 Advnaced. 옵션에서 스크롤 효과, 탭 선택 로타 티ng 및 다음을 업데이트합니다.

  • 회전 활성화: 예
  • 시작 회전: -15도(0%에서)
  • 중간 회전: 0도(40%에서 60%로)
  • 끝 회전: 15도(100% 기준)

섹션 오버플로 숨기기

현재는 스크롤로 인해 섹션을 넘어 확장될 때마다 줄이 계속 표시됩니다.

마스크와 패턴 덕분에 페이지를 스크롤할 때 애니메이션 Divi 배경

이를 정리하려면 섹션 오버플로를 숨겨야 합니다. 이렇게 하려면 섹션 설정을 엽니다. 탭 아래 Advnaced, 다음과 같이 가시성 옵션을 업데이트합니다.

  • 수평 오버플로: 숨김
  • 수직 오버플로: 숨김

이제 더 좋아 보입니다.

마스크와 패턴 덕분에 페이지를 스크롤할 때 애니메이션 Divi 배경

또한보십시오: Divi: 마스크와 배경 패턴의 12가지 조합

이 목적을 위해 생성된 줄에 콘텐츠 추가

이 시점에서 배경 마스크와 패턴 스크롤 애니메이션이 완성됩니다. 우리가 해야 할 일은 콘텐츠에 대해 이전에 만든 줄에 원하는 콘텐츠를 추가하는 것입니다.

이 예에서는 정적 텍스트로 배경 애니메이션이 어떻게 보이는지 확인할 수 있도록 더미 제목을 추가했습니다.

마스크와 패턴을 사용하여 페이지를 스크롤할 때 애니메이션 Divi 배경 디자인

최종 결과

디자인의 최종 결과를 살펴보겠습니다.

마스크와 패턴 덕분에 페이지를 스크롤할 때 애니메이션 Divi 배경

지금 DIVI를 다운로드하세요!!!

결론

Divi의 배경 옵션으로 이렇게 아름다운 배경을 만드는 것이 얼마나 쉬운지 놀랍습니다. 또한 Divi의 스크롤 효과로 애니메이션을 추가하면 이러한 디자인에 새로운 생명을 불어넣을 수 있습니다.

다른 모양을 위해 각 레이어에서 다른 마스크와 패턴을 시도할 수 있습니다. 사용 방법에 대해 더 많은 영감을 얻고 싶다면 마스크와 패턴 배경, 이것들을 확인하십시오 12가지 배경 마스크 및 패턴 조합

이 튜토리얼이 다음 Divi 프로젝트에 영감을 주기를 바랍니다. 우려 사항이나 제안 사항이 있으면 다음에서 저희를 찾으십시오. 댓글 섹션 그것을 논의하기 위해.

상담도 가능합니다 우리의 자원, 인터넷 사이트 작성 프로젝트를 수행하기 위해 더 많은 요소가 필요한 경우.

주저하지 말고 가이드와 상의하세요. 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.

그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.

...