오늘 우리는 새로운 업데이트에 대한 정보를 받았습니다. Divi 스크롤링 애니메이션 효과를 제공합니다. 우리는 그것을 살펴보았고 이 튜토리얼에서는 여러분이 예상해야 하는 것을 요약할 것입니다.

시작하자.

스크롤 효과는 무엇입니까?

스크롤 효과는 화면에 반응하는 사용자 정의 가능한 애니메이션입니다. 방문자 페이지를 위아래로 스크롤할 때 기존 애니메이션과 달리 스크롤 효과는 애니메이션의 스크롤 동작과 직접적인 관련이 있습니다. 방문객. 애니메이션의 속도와 방향은 스크롤 속도와 방향에 따라 달라집니다. 방문객. 애니메이션 타임라인은 브라우저 창의 요소 위치를 기반으로 합니다.

복잡하게 들리지만, Divi, 그것은 아주 간단합니다

크기 조정, 회전, 수평 및 수직 이동, 불투명도 및 흐림 효과를 조합하여 모든 요소에 애니메이션을 적용할 수 있습니다. 애니메이션의 다양한 지점에서 각 효과의 크기를 제어한 다음 Divi 나머지 요소를 처리하여 이러한 요소가 보기 내로 들어오고 이동할 때 아름다운 전환을 만듭니다. 방문객. 미묘한 깊이와 정교함을 추가하는 간단한 애니메이션을 만들거나 효과를 결합하고 여러 요소에 애니메이션을 적용하여 놀라운 활동을 만들어 보세요. 방문자!

6 가지 새로운 XNUMX 가지 독특한 효과

선택하거나 조합하여 사용할 수있는 효과. Divi에는 XNUMX 가지 스크롤 효과가 제공되며, 각 효과는 새로운 스크롤 효과 사용자 인터페이스를 사용하여 개별적으로 사용자 지정할 수 있습니다. 효과를 결합하여 더 복잡한 애니메이션을 만들 수도 있습니다.

수직 운동

수직 모션 효과를 사용하면 방문자의 스크롤 속도 및 방향에 따라 모든 요소가 페이지 위아래로 이동할 수 있습니다. 결과는 시차 효과입니다! 이제 모든 것을 Divi로 시차 효과를 만드는 데 사용할 수 있습니다. 수직 이동과 시차 배경 이미지를 결합하여 진정으로 인상적인 디자인을 만들 수도 있습니다.

Divi 이미지 설정

수평 운동

가로 이동 효과는 방문자의 방향과 스크롤 속도에 따라 화면에서 항목을 왼쪽에서 오른쪽으로 이동할 수 있다는 점을 제외하면 세로 이동 효과와 유사합니다. . 수직 및 수평 이동을 결합하여 모든 요소의 이동을 완벽하게 제어 할 수 있습니다!

Divi 애니메이션 효과

상황에 맞는 흐림

흐림 효과는 방문자가 스크롤하는 속도와 방향에 따라 요소의 초점을 안팎으로 가져옵니다. Divi를 사용하면 시작, 중간 및 끝 흐림 값을 제어 할 수 있으므로 항목이 방문자의 눈 앞에있을 때 바로 초점을 맞출 수 있습니다. 중요한 정보에주의를 끌 수있는 좋은 방법입니다.

Divi 컨텍스트 블러 설정

녹은

요소가있는 페이드 효과는 방문자 스크롤의 속도와 방향에 따라 페이드 인 및 페이드 아웃됩니다. 요소를 혼합하거나 사라지게하거나 둘 다 할 수 있습니다. 페이드, 블러 및 스케일의 조합은 디자인에 "그것"요소를 추가하는 매우 정교한 애니메이션을 만들 수 있습니다.

Divi 페이드 효과

스케일링 효과

스케일 효과는 방문자 스크롤의 속도와 방향에 따라 항목의 크기를 늘리거나 줄입니다. 클릭 유도 문안과 같은 특정 요소에주의를 끌려면 요소가 프레임 중앙에 가까워 질수록 크기가 커지도록 배율 효과를 설정할 수 있습니다. 창문. 물론 다른 많은 가능성도 있습니다!

스케일링 효과

회전 효과

회전 효과는 방문자의 스크롤 속도 및 방향에 따라 항목을 양방향으로 회전합니다. 미묘한 회전은 실제로 장면에 생명을 불어 넣을 수 있습니다. 수평 이동과 결합하면 약간의 회전만으로도 멋지게 보일 수 있습니다! 또는 요소를 원으로 둥글게합니다.

이미지 조정 divi 회전 효과

새로운 직관적 인 인터페이스

Divi 스크롤 효과의 진정한 아름다움은 사용하기 쉽다는 것입니다! 모든 사람이 액세스 할 수 있도록 웹 애니메이션을 만드는 프로세스를 단순화하는 새로운 사용자 인터페이스가 있습니다. 클릭 한 번으로 Divi의 XNUMX 가지 스크롤 효과 중 하나를 추가하거나 결합 할 수 있습니다. 상자에서 꺼내면 멋지게 보일 것입니다! 그런 다음 효과를 미세 조정하여 더욱 고급 애니메이션을 만들 수 있습니다.

한 번의 클릭으로 그게 다입니다!

모듈에 스크롤 효과를 추가하고 싶습니까? 한 번의 클릭으로 효과가 추가되고 멋지게 보일 것입니다! 스크롤 효과를 추가하려면 모듈, 행, 열 또는 섹션의 고급 탭에서 새로운 스크롤 효과 옵션 그룹에 액세스하면됩니다. 여러 효과를 동시에 활성화 할 수 있으며 효과는 스크롤 할 때 아름답게 변형되는 하나의 부드러운 애니메이션으로 결합됩니다.

모든 권한을 원하십니까? 당신은 그것을 가지고 있습니다!

스크롤 효과를 활성화하면 애니메이션의 각 지점에서 효과의 크기를 완전히 제어 할 수 있습니다. 시작, 중간 및 끝 값을 제어하여 무엇을 하는가 생기. 값이 설정되면 Divi가 나머지 작업을 처리하고 브라우저 창에서 이동할 때 요소를 전환하여 애니메이션을 만듭니다.

  • 시작 가치 -요소가 브라우저 창 하단에 들어갈 때 사용되는 시작 애니메이션의 상태입니다.
  • 중간 가치 -요소가 창 중앙으로 이동할 때 전달되는 중간 애니메이션 상태입니다.
  • 최종 가치 -항목이 화면 상단의 브라우저 창을 벗어날 때 발생하는 종료 애니메이션 상태입니다.

예를 들어 시작 값이 0 (보이지 않음), 중앙값이 100 (완전히 표시됨)이고 종료 값이 0 (보이지 않음) 인 불투명도 효과는 시작시 보이지 않는 상태에서 변경됩니다. 창 중앙에 100 % 표시 될 때까지 창을 닫으면 창을 종료 할 때 보이지 않는 상태로 사라집니다.

애니메이션 타임 라인 조정

애니메이션 값을 조정할 수 있을 뿐만 아니라 애니메이션 타임라인도 조정할 수 있습니다. 타임라인 UI는 브라우저 창의 높이를 나타냅니다. 각 애니메이션 키프레임은 뷰포트의 다른 위치에서 트리거될 수 있습니다. 이를 통해 브라우저 창의 y축에서 애니메이션 요소의 위치를 ​​기반으로 애니메이션 애니메이션의 시작, 종료 및 타이밍을 제어할 수 있습니다.

  • 키 프레임 위치 시작 -이 옵션은 애니메이션의 시작을 제어합니다. 애니메이션을 지연 시키려면 시작 키 프레임의 위치를 ​​안쪽으로 드래그합니다.
  • 중앙 키 프레임 위치 -애니메이션이 중앙 애니메이션 값에 도달하는 지점을 제어합니다. 애니메이션 타임 라인의 중간에있을 필요는 없습니다. 중간 키 프레임을 창의 임의 위치로 이동할 수 있습니다.
  • 키 프레임 위치 끝 -이 컨트롤은 애니메이션을 종료하는 데 사용됩니다. 클립이 브라우저 창을 종료하기 전에 애니메이션이 종료되도록하려면 끝 키 프레임 위치를 안쪽으로 드래그 할 수 있습니다.

애니메이션에 정적 상태 추가

정적 중간 효과 값의 지속 시간을 늘려 애니메이션에 일시 중지를 추가 할 수도 있습니다. 정적 애니메이션 기간을 만들려면 중간 키 프레임 위에 마우스를 올려 놓을 때 두 개의 화살표를 클릭합니다. 그런 다음 가장자리를 앞뒤로 드래그하여 중간 키 프레임을 확장 할 수 있습니다. 애니메이션에서이 지점 동안 요소는 정적으로 유지됩니다. 정적 기간이 종료 된 후에도 애니메이션은 계속해서 최종 값으로 전환됩니다.

이러한 새로운 기능에 대해 어떻게 생각하십니까? 의견에 대한 의견을 주저하지 마십시오.