Master Addons 의 Floating Effect Elementor 확장 기능을 사용하면 웹 사이트의 모든 요소에 부드럽고 상호 작용하는 애니메이션을 추가 할 수 있습니다. 번역,회전 및 스케일링과 같은 간단한 사용자 정의로 미묘한 것을 만들 수 있습니다 부동 동작 또는 동적 3D 효과.
이 튜토리얼에서는 이러한 사용자 지정 옵션을 사용하여 요소에 생명을 불어넣는 방법을 살펴보고,Positioning Extension 이 완벽한 모양을 위해 배치를 미세 조정하는 데 어떻게 도움이 되는지 보여드리겠습니다. 결국에는 사이트에 눈길을 끄는 플로팅 애니메이션을 만들 준비가 됩니다.
부동 효과 Elementor 확장 사용 방법
부동 효과의 옵션에 들어가기 전에 확장이 활성화되어 있는지 확인해야 합니다.
대시보드의 마스터 애드온으로 이동하면 됩니다. 확장 프로그램 탭으로 들어가서 부동 효과 확장 프로그램을 전환합니다. 간단합니다!
활성화한 후 사이트의 모든 요소의 고급 탭으로 이동하여 아래로 스크롤하여 “부동 효과” 확장 프로그램을 찾을 수 있습니다. 전환하면 다음과 같은 사용자 정의 옵션이 표시됩니다.
1. 번역하기
이렇게 하면 X 축과 Y 축을 따라 요소를 이동할 수 있습니다. X 축의 병진 조정을 통해 요소는 왼쪽과 오른쪽으로 이동합니다. 마찬가지로 Y 축을 조정하면 요소가 위아래로 이동합니다. 두 축을 결합하면 3D 부동 효과가 생성되어 요소에 깊이와 움직임이 추가됩니다.
2. 회전
이 옵션을 사용하면 X,Y, Z 축을 따라 요소를 회전시킬 수 있습니다. 이렇게 하면 요소에 더욱 역동적이고 회전하는 효과가 나타납니다.
회전의 지속 시간과 지연을 조절할 수도 있어 보다 부드럽거나 극적인 전환이 가능합니다.
3. 규모
스케일 효과를 사용하면 X 축과 Y 축을 따라 요소를 늘리거나 축소할 수 있습니다. 그러면 성장/수축 애니메이션이 생성되어 요소가 확장되거나 축소되는 것처럼 보입니다. 다른 효과와 마찬가지로 지속 시간과 지연을 조정하여 애니메이션의 타이밍을 제어할 수 있습니다.
이 세 가지 사용자 정의 옵션을 결합하면 미묘한 움직임부터 더 복잡하고 눈길을 끄는 애니메이션까지 부동 효과의 끝없는 변형을 만들 수 있습니다.
확인하시길 권해드립니다 outelementor Pro 기능 뿐만 아니라. Elementor pro 와 를 결합할 수 있습니다 마스터 애드온 원하는 유형의 웹사이트를 만들려면.
효과를 결합합니다
의 가장 강력한 기능 중 하나입니다 부동 효과 확장은 독특하고 역동적인 애니메이션을 위해 번역,회전, 스케일링을 결합하는 기능입니다. 이러한 효과를 레이어링하면 미묘한 부동 동작부터 완전한 3D 인터랙티브 요소까지 무엇이든 만들 수 있습니다.
번역과 회전을 결합하세요: 회전과 병진 변환을 페어링하면 화면 전체의 움직임과 함께 유동적인 회전 효과가 생성됩니다. 예를 들어 요소를 대각선으로 떠다니면서 제자리에서 회전시켜 보다 역동적인 3D 환상을 만들 수 있습니다.
번역과 척도를 결합하세요: 변환과 스케일링을 모두 사용하면 요소가 동시에 이동하고 크기를 변경할 수 있습니다. 이렇게 하면 요소가 화면을 가로질러 표류할 때 부동 효과가 확장되거나 축소될 수 있습니다.
세 가지를 모두 결합하세요: 궁극의 부동 효과를 위해 번역,회전, 스케일을 결합합니다. 이를 통해 요소가 한꺼번에 이동하고 회전하며 성장/수축하는 복잡한 애니메이션이 가능해 매력적인 다차원적 외관을 제공합니다.
이러한 조합을 실험해 보면 가능성은 무궁무진합니다. 지속 시간과 지연에 대해 서로 다른 값으로 플레이하여 속도와 타이밍을 조정하면 어떤 요소든 진정한 맞춤형 플로팅 애니메이션을 만들 수 있습니다.
이미지에 부동 효과 생성하기
이제 부동 효과 확장에 대한 다양한 설정을 조정하는 방법을 알게 되기를 바랍니다.
보너스로 우리는 몇 가지 이미지와 함께 멋진 섹션을 만드는 방법을 보여 드리겠습니다, the 부동 효과 그리고 포지셔닝 확장:
당신은 우리가 당신에게 전체 과정을 보여주는 아래의 비디오를 따를 수 있습니다.
우선, pick은 섹션을 만드는 데 사용할 이미지를 선택해 보겠습니다.
그런 다음 3 열과 2 행에 대한 전체 너비 Flexbox 또는 그리드를 추가하고 적절한 상자 안에 다음 스크린 샷과 같은 모든 이미지를 정렬합니다.
자,위치 및 부동 효과에 집중해 보겠습니다. 위치 지정부터 시작하는 것이 좋습니다. 부동 효과를 구현하기 전에 디자인을 주의 깊게 검토하고 모든 이미지와 입자를 정확하게 배치하십시오.
Master Addons 위치 지정 확장 기능을 활용하여 이미지의 위치를 정확하게 지정했습니다. 시작하려면 위치 확장 내에서 '상대적'을 선택합니다. 그런 다음 필요에 따라 이미지 또는 기타 요소를 정렬하기 위해 진행합니다.
모든 이미지의 위치 지정을 완료했으며 첨부된 스크린샷은 현재 배열을 보여줍니다.
마지막으로 부동 효과를 원하는 이미지에 적용해 보겠습니다. 첫 번째 및 세 번째 열의 이미지에 translate X 및 Y 효과를 적용했습니다. Rotate Z 효과는 프로필 사진에만 적용되었습니다. 현재 시각적 결과를 보려면 다음 GIF 파일을 참조하십시오.
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 부동 효과 확장 기능은 웹 사이트의 요소 애니메이션에 대한 무한한 가능성을 제공합니다. 번역,회전 및 확장을 위한 간단하면서도 강력한 사용자 정의 옵션을 통해 방문자의 관심을 끄는 역동적이고 눈길을 끄는 부동 효과를 만들 수 있습니다. X-10,10.5 및 X-1,0.1 및 X-1,0.1 및 X-1,0.1 과 결합하면,이들은 이 기능을 통해 다양한 기능을 사용할 수 있습니다 포지셔닝 확장는, 당신은 진짜로 주문을 받아서 만들어진 디자인을 위한 성분의 운동 그리고 배치 둘 다에 가득 차있는 통제가 있습니다.
사이트에 딱 맞는 부동 효과를 찾기 위해 다양한 설정과 조합을 실험하는 것을 두려워하지 마세요. 약간의 창의력으로 웹 디자인을 높이고 더 많은 인터랙티브한 사용자 경험을 만들 수 있습니다.
이 확장 프로그램에 문제가 있는 경우 여기에 댓글을 달거나 당사에 문의해 주세요 웹사이트 문의 양식.
