x-motion background

₩14,900

Leon X Motion Background는 영상을 X 형태의 픽셀 데이터로 변환하여 Elementor Section 또는 Container 배경에 적용할 수 있는 인터랙티브 모션 플러그인입니다. 영상의 명암과 움직임을 기반으로 X 픽셀이 실시간으로 움직이며, 마우스 반응과 뭉개짐 효과를 더해 일반적인 영상 배경과는 다른 입체적인 화면을 만들 수 있습니다.

Product No. DSRP-01

Builder	Elementor
Support	Mobile, PC
시스템 요구사양	Elementor 4.0.7 이상, PHP 7.4 이상, WordPress 6.2 이상

X-motion Background 는
영상 업로드만으로 X Pixel 모션 그래픽을 구현합니다.

평범한 영상 배경을 X Pixel Motion과 Mouse Interaction이 살아있는 인터랙티브 비주얼로 바꿔보세요.
밋밋한 평범한 일반적인 디자인보다 뭔가 과하지 않으면서 Creative한 디자인 요소로 사이트에 임팩트를 주고자 할 때 사용하면 좋습니다.

본 영상은 실제 홈페이지 메인 화면입니다.

Leon X Motion Background는 방문자가 페이지에 접속할 때마다 원본 영상을 분석하지 않습니다. Elementor 편집 과정에서 영상을 한 번 분석하여 경량 Motion Data로 변환하고, 실제 페이지에서는 해당 데이터를 Canvas로 렌더링합니다. 따라서 일반적인 실시간 Video Processing 방식보다 불필요한 브라우저 연산을 줄일 수 있도록 설계했습니다. 또한 화면 밖으로 이동하거나 브라우저 탭이 비활성화된 경우 렌더링을 일시 정지하고, 모바일 환경에서는 Pixel Density와 DPR을 자동 조정합니다.

설계는 복잡하지만, 누구나 쉽게 사용 가능하도록, 그리고 디테일하게 설정도 할 수 있도록 설계하였습니다.

디자인 포인트 및 제품의 기능

Video → X Pixel Motion

업로드한 영상의 명암과 프레임을 분석하여 X 형태의 Motion Graphic으로 변환합니다.

Elementor Background

별도의 위젯을 배치할 필요 없이 Section 또는 Container의 Background처럼 사용할 수 있습니다.

Smear Interaction

마우스가 지나간 주변의 X가 이동 방향으로 끌리며 자연스럽게 뭉개지는 인터랙션을 만들 수 있습니다.

Recovery Control

변형된 X Pixel이 원래 위치로 돌아오는 시간을 조절하여 잔상의 느낌을 세밀하게 설정할 수 있습니다.

Depth Effect

X Pixel의 움직임에 깊이를 더해 평면적인 이미지보다 입체적인 느낌을 표현합니다.

Live Elementor Preview

Elementor 편집 화면에서 효과와 설정 변경을 확인할 수 있습니다.

Responsive Optimization

모바일에서는 Pixel Density와 렌더링 부하를 줄여 퍼포먼스를 관리합니다.

영상 하나면 누구나 쉽게 시작할 수 있습니다.

01. Elementor Section 또는 Container 선택
02. Style → X Pixel Motion 활성화
03. MP4 영상 선택
04. 영상 분석 및 Motion Data 생성
05. X 크기·밝기·Depth·Mouse Effect 조정
06. 완료

해당 디자인을 적용한 사이트

Leo Kim

주의사항 안내

다운로드 받은 프로그램은 구매자 본인이 소유·운영 또는 직접 제작·관리하는 여러 도메인에 적용할 수 있습니다. 단, 프로그램 파일 또는 수정본을 제3자에게 재배포·공유·양도·재판매하는 행위는 금지됩니다.
WordPress 및 Elementor의 주요 버전 변경에 따른 호환성 개선과 안정화 업데이트를 제공합니다. 단, 모든 서드파티 테마·플러그인·커스텀 코드와의 완전한 호환성을 보장하지는 않습니다.
본 상품은 다운로드 방식으로 제공되는 디지털 콘텐츠입니다. 다운로드 전에는 환불이 가능하며, 다운로드 또는 사용이 개시된 이후에는 관련 법령상 청약철회 제한 사유에 해당하는 경우 환불이 제한될 수 있습니다. 다만 상품이 표시·광고 내용과 다르거나 정상적으로 제공되지 않은 경우에는 관계 법령에 따릅니다.
사용 전 상품 페이지에 안내된 WordPress / PHP / Elementor 최소 요구 버전을 확인해 주세요. 요구 환경을 충족하지 않는 서버나 오래된 Elementor 환경에서는 정상 작동을 보장하지 않습니다.
X Motion은 HTML5 Canvas 기반의 실시간 그래픽 효과이므로 기기 성능, 브라우저, 화면 해상도, X 밀도 및 효과 강도 설정에 따라 렌더링 성능에 차이가 있을 수 있습니다.
영상 변환은 WordPress 미디어 라이브러리에 업로드한 동일 도메인 영상 사용을 권장합니다. 외부 CDN이나 타 도메인 영상은 CORS 정책에 따라 분석이 제한될 수 있습니다.
플러그인 자체 오류 및 공식 지원 환경에서의 기능 문제는 지원하지만, 타사 테마·플러그인 충돌, 서버 설정, 사용자 커스텀 코드 수정, 개별 디자인 제작은 기본 기술지원 범위에 포함되지 않습니다.
플러그인 업데이트 전에는 사이트 및 데이터베이스를 백업하는 것을 권장합니다.