Rellax.js (Pro) 를 사용한 엘리멘터 시차 효과
Rellax 는 Rellax.js 시차 라이브러리를 Elementor 로 가져오는 Master Addons Pro 확장 프로그램입니다. 요소에 대해 켜고 속도를 - 10 에서 10 으로 설정하면 해당 요소가 페이지의 나머지 부분보다 더 빠르거나 느리게 스크롤되므로 깊이감이 생깁니다. 태블릿과 모바일에 대해 다른 속도를 설정하고 수직 또는 수평 방향을 선택하고 Z-Index 를 사용하여 콘텐츠 뒤 또는 앞에서 레이어를 계속 이동할 수 있습니다. 코드 또는 스크립트 로딩이 필요하지 않습니다.
Elementor에서 시차 스크롤 효과를 추가하는 방법
Elementor와 액티브가 필요합니다 마스터 애드온 프로 라이센스.
- 로 이동 마스터 애드온, 확장, Rellax를 켜고 저장하세요.
- Elementor로 페이지를 편집하고 이미지, 아이콘 또는 모양과 같이 이동하려는 위젯을 선택하세요.
- 해당 요소에 대한 Rellax 설정을 열고 켭니다 Rellax를 활성화했습니다.
- 느린 드리프트에 대해 -2와 같은 속도를 설정하고 태블릿 및 모바일용으로 조정합니다.
- 세로 또는 가로 를 선택하고 레이어가 텍스트를 덮지 않도록 Z-Index 를 설정합니다.
- 페이지를 미리 보고 스크롤하여 모션을 확인합니다.
자세한 내용은 에 나와 있습니다 Rellax 확장 설정.
속도, 백분율 및 방향
속도 0,1 의 단계로 - 10 에서 10 까지 실행되며 장치별로 설정할 수 있습니다. 음수 값은 요소가 페이지보다 느리게 이동하므로 더 멀리 느껴지고 양수 값은 더 빠르게 이동하므로 더 가깝게 느껴집니다. 백분율 (0 ~ 1)은 움직임이 시작될 때 요소가 놓이는 위치를 설정합니다 수직의 그리고 수평 옵션은 방향을 선택합니다.
- 영웅 뒤에 장식적인 모양을위한 -1 에서 -2 의 느린 표류.
- 콘텐츠 앞에 떠 있는 아이콘에 대한 작은 양의 속도입니다.
- 작은 화면에서 모션이 너무 강하게 느껴지면 모바일에서는 속도가 느려지거나 0이 됩니다.
Z-Index 로 레이어링
시차 레이어는 텍스트와 버튼 위로 미끄러질 수 있습니다. Rellax adds a Z-인덱스 -1 에서 50 으로 설정하면 콘텐츠 아래에 움직이는 배경 레이어를 유지하고 그 위에 전경 모양을 유지할 수 있습니다. Rellax 는 배경 이미지가 아닌 전체 요소를 이동하므로 이동하려는 이미지를 자체 이미지 위젯에 배치합니다.
- 콘텐츠 뒤에 있어야 하는 레이어에는 -1을 사용하세요.
- 헤드라인과 버튼을 레이어 이동 경로에서 벗어나게 하세요.
- 게시하기 전에 실제 전화에서 스크롤을 테스트하십시오.
Elementor 모션 효과 대 마스터 애드온 Rellax
Elementor Pro 에는 이미 스크롤 효과가 있는 모션 효과가 있습니다. 두 가지를 비교하는 방법은 다음과 같습니다.
| 특징 | Elementor Pro 모션 효과 | 마스터 애드온 Rellax |
|---|---|---|
| 가격 | Elementor Pro가 필요합니다 | 마스터 애드온 프로가 필요합니다 |
| 스크롤 이동 | 속도와 뷰포트 범위를 갖춘 수직 및 수평 스크롤 | Rellax.js 속도 -10 에서 10 까지,수직 또는 수평 |
| 기타 스크롤 효과 | 투명도, 흐리게 하기, 회전 및 가늠자 | 없음, 움직임만 |
| 마우스 효과 | 마우스 트랙 및 3D 기울기 | 아니요 |
| 배경 시차 | 섹션 및 컨테이너에 대한 배경 동작 효과 | 전체 요소를 이동합니다 |
| 장치별 설정 | 효과가 실행되는 장치를 선택합니다 | 장치당 속도 |
Elementor Pro 가 이미 있는 경우 Motion Effects 는 더 많은 효과 유형을 다룹니다. Master Addons Pro 를 사용할 때 Rellax 는 간단한 속도 기반 레이어에 적합합니다. 스크롤에 의존하지 않는 반복 동작에 대해서는 를 참조하십시오 부동 효과 (프로).
Rellax.js란 무엇입니까?
Rellax.js 는 페이지가 스크롤되는 동안 요소를 다른 속도로 이동하게 만드는 Dixon 과 Moe 의 작은 오픈 소스 JavaScript 라이브러리입니다. 손으로 코딩한 사이트에서 스크립트를 추가하고 요소에 rellax 클래스를 제공하고 속도,백분율, z-index 및 코드의 방향과 같은 옵션을 설정합니다.
이 확장 프로그램은 Master Addons Pro 내부에 Rellax.js 를 번들로 묶고 해당 옵션을 Elementor 컨트롤에 매핑하므로 패널에서 속도,백분율, Z-Index 및 방향을 설정합니다. 스크립트는 요소가 Rellax 를 사용하는 페이지에만 로드됩니다. Elementor 에 있지 않은 경우 Rellax.js 라이브러리를 직접 사용하십시오.
Rellax에 대해 자주 묻는 질문
시차 효과가 모바일에서 작동합니까?
예. 속도는 태블릿과 모바일에 대해 별도로 설정할 수 있으므로 모션이 너무 강하게 느껴지면 휴대폰에서 더 작은 값이나 0 을 사용할 수 있습니다. 항상 실제 장치에서 테스트하십시오.
섹션 배경 이미지를 이동시킬 수 있나요?
Rellax 는 배경 이미지가 아닌 전체 요소를 이동합니다. 이미지를 콘텐츠 뒤에 있는 자체 이미지 위젯에 넣고 해당 위젯에 Rellax 를 추가하거나 Elementor Pro 의 배경 모션 효과를 사용하여 움직이는 섹션 배경을 만듭니다.
Rellax 확장 프로그램은 무료입니까?
아니요. Rellax는 일부입니다 마스터 애드온 프로. Rellax.js 라이브러리 자체는 무료이며 자신의 코드로 추가하면 오픈 소스입니다.
너무 많은 시차 효과로 인해 사이트 속도가 느려질 수 있나요?
그들은 할 수 있습니다. 모든 움직이는 요소는 스크롤하는 동안 브라우저가 더 많은 작업을 수행하게합니다. 페이지 당 몇 가지 핵심 요소에 시차를 사용하고 속도를 적당히 유지하십시오.
트렌드 엘리먼트 위젯 및 확장
더 짧은 시간에 정교한 웹사이트를 구축하세요.
![Elementor용 마스터 애드온 게시물/페이지 복제기 확장: 랜딩 페이지를 생성하는 WordPress 페이지 목록의 MA 복제기 행 링크 - [복제된 #128] 초안](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
