시차는 페이지의 다른 부분이 다른 속도로 스크롤되는 효과이므로 배경이 전경보다 느리게 지나가고 섹션이 깊이감을 집어냅니다. The Rellax 확장 에서 마스터 애드온 프로 라고 덧붙입니다 요소 시차 스크롤 javascript 줄을 건드리지 않고 Rellax.js 라이브러리를 사용하여 이미지나 제목과 같은 위젯에 효과. 속도,이동 비율,z-index 및 방향에 대한 컨트롤과 함께 요소의 고급 탭에 섹션으로 표시됩니다.
Rellax가 사는 곳, 각 설정이하는 일, 페이지가 라이브되면 효과가 어떻게 보이는지 여기에 있습니다.
Rellax 확장자가 하는 일 #
Rellax 는 스크롤 기반 애니메이션을 선택한 요소에 고정합니다. 방문자가 스크롤하면 해당 요소는 설정한 속도에 따라 페이지의 나머지 부분보다 더 빠르게 또는 느리게 이동합니다. 영웅 이미지를 가리키면 배경이 미끄러집니다; 헤드라인을 가리키면 텍스트가 주변의 모든 것보다 먼저 떠다닙니다. 요소별로 작동하므로 동일한 섹션에서 몇 가지 다른 속도를 혼합하고 전용 시차 플러그인 없이 계층화된 스크롤을 구축할 수 있습니다.
다른 두 개의 마스터 애드온 모션 도구의 스크롤 기반 사촌으로 생각하십시오: 부동 효과스크롤 없이 자체적으로 요소에 애니메이션을 적용하는 것입니다 변환합니다회전, 스케일링, 스큐를 처리하는 것입니다.
시작하기 전에 #
- 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
- 마스터 애드온 프로 활성 라이센스로 설치됨,Rellax 는 Pro 확장자이므로 아직 설치하지 않았다면 다음을 따르십시오 설치 가이드.
- 마스터 애드온 옵션 패널에서 Rellax 확장 기능이 활성화되었습니다.
- 이미지, 아이콘 또는 a와 같이 애니메이션을 적용할 위젯입니다 그라데이션 헤드라인. Rellax는 섹션 배경 이미지가 아닌 전체 위젯을 이동합니다.
Elementor 에서 시차 효과를 추가하는 방법 #
이동하려는 요소를 선택합니다. Open the 고급 elementor 패널에서 탭하고 아래로 스크롤합니다 렐락스 섹션 (그것은 보라색 마스터 애드온 배지를 수행). 그것을 확장하고 뒤집습니다 Rellax를 활성화했습니다 에 예. 그 토글은 전체 효과에 대한 스위치이므로 켜질 때까지 아무 일도 일어나지 않습니다.
사람을 넘어뜨리는 한 가지: 시차는 라이브 페이지나 미리 보기에서만 실행되며 캔버스에서 편집하는 동안에는 실행되지 않습니다. 따라서 요소가 편집기 내부로 이동할 때까지 기다리지 말고 미리 보기를 눌러서 확인하세요.
Rellax 설정 설명 #
Rellax를 활성화하면 나머지 컨트롤이 요소가 이동하는 방식을 형성합니다:
- 속도: 요소가 스크롤에 대해 얼마나 빨리 움직이는지. 양수가 높을수록 스크롤을 내릴 때 더 빠르게 위로 이동하게 됩니다; 음수는 반대로 밀어줍니다. 데모는 사용합니다 6 X 1000 X 1000 X 1000 X 100 X 60 X 60 X 60 X 60 X 60 X 60 X 60 X 60 X 60 X 60 X 60 X 60 X 60 X 60 X . 4~6 정도에서 시작하여 거기에서 조정합니다. 큰 값이 요소를 해당 섹션에서 깨끗하게 밀어낼 수 있기 때문입니다.
- 백분율: 애니메이션의 시작점,0 부터 1 까지,뷰포트에서 요소가 어디에 위치하는지에 따라. 데모는 로 설정합니다 0.4. 효과가 너무 일찍 또는 너무 늦게 시작될 때 이것을 쿡쿡 찌르십시오.
- Z-인덱스: 스태킹 순서,CSS z-index 와 같은 아이디어. 올립니다 (데모가 사용합니다 3 X 1000 X 1000 X 1000 X 100 X 100 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X) 시차 요소가 이웃 요소 위나 아래에 위치해야 할 때 중간 스크롤과 겹칩니다.
- 수직: 페이지가 스크롤될 때 요소를 위아래로 이동합니다. 이것이 일반적인 시차 방향입니다.
- 수평: 대신 요소를 왼쪽과 오른쪽으로 이동합니다. 측면에서 밀어 넣으려는 요소에 편리합니다.
속도와 백분율 모두 옆에 반응 아이콘이 있으므로 데스크톱,태블릿 및 모바일에 대해 다른 값을 설정할 수 있습니다. 소리보다 더 중요합니다. 넓은 데스크톱에서 멋지게 보이는 속도는 화면이 짧고 요소가 작은 공간에서 많은 영역을 덮는 전화에서 거슬리는 느낌을 줄 수 있습니다. 모바일 속도를 낮추는 다이얼링은 일반적으로 수정 사항입니다.
라이브 페이지에서 시차 효과를 확인하세요 #
페이지를 게시 (또는 미리보기를 열) 및 스크롤. 당신이 활성화 한 요소는 페이지의 나머지 부분은 정상적으로 스크롤하는 동안 자신의 속도로 이동에 Rellax,그리고 그 속도 차이는 깊이를 판매하는 것입니다. 여기에 데모 영웅,와 시차 이미지 스크롤 “스크롤 UP” 헤드 라인에 대해:
움직임이 너무 강하거나 너무 미묘하게 느껴지면 속도 제어로 돌아가서 조정하십시오. 시차는 작은 숫자가 큰 것보다 일반적으로 더 잘 읽는 효과 중 하나입니다.
일반적인 사용 사례 #
- 영웅 이미지: 랜딩 페이지 영웅의 이미지 위젯에 느린 드리프트를 제공하여 누군가가 스크롤하는 순간 섹션이 생생하게 느껴지도록 하세요.
- 떠다니는 헤드라인: rellax를 제목에 올려 그 아래의 내용보다 앞서게 하세요.
- 레이어드 섹션: 쌓인 다중 깊이 스크롤을 위해 동일한 섹션에서 두세 가지 요소를 다른 속도로 설정합니다.
- 기능 호출: 방문자가 아이콘이나 배지에 도달하면 아이콘이나 배지를 수평으로 밀어 넣습니다.
- 스토리텔링 페이지: 블록 사이의 부드러운 시차를 사용하여 긴 스크롤이 평평하게 느껴지지 않도록 합니다.
스크롤에 묶이지 않은 모션의 경우 Rellax를 페어링합니다 입구 애니메이션 따라서 요소들은 나타나는 대로 애니메이션을 적용한 다음,스크롤이 계속됨에 따라 시차로 계속 이동합니다. 전체 찾아보기 위젯 및 확장 모션 툴킷의 나머지 부분을 보려면 목록을 작성하세요.
비디오 자습서 #
시청을 선호하시나요? 이 비디오는 Rellax 확장 프로그램을 요소에서 활성화하는 것부터 라이브 페이지의 시차 스크롤까지 끝에서 끝까지 살펴봅니다:
자주 묻는 질문 #
Elementor 에서 시차 스크롤 효과를 어떻게 추가합니까?
요소를 선택하고 고급 탭을 열고 Master Addons Rellax 섹션을 확장한 다음 Rellax 를 사용으로 설정하십시오. 그런 다음 속도와 백분율을 설정하십시오. 요소는 라이브 페이지에서 자체 속도로 스크롤되며 코드는 필요하지 않습니다.
왜 Elementor 편집기에서 시차 효과를 볼 수 없나요?
Rellax 는 프런트 엔드에서만 실행됩니다. 캔버스에서 편집하는 동안 요소가 가만히 있으므로 미리보기를 열거나 게시된 페이지를 보고 시차 동작을 볼 수 있습니다.
Rellax 에서 Speed 설정은 어떤 역할을 하나요?
속도는 페이지 스크롤에 비해 요소가 얼마나 빨리 움직이는지를 제어합니다. 높은 양의 값은 아래로 스크롤할 때 더 빠르게 위로 이동하고 음의 값은 방향을 반대로 합니다. 4~6 부근의 값은 대부분의 영웅 섹션에서 잘 작동합니다.
모바일에서 다른 시차 속도를 사용할 수 있나요?
예. 속도 및 백분율 컨트롤은 반응형이므로 데스크톱,태블릿 및 모바일에 대해 별도의 값을 설정할 수 있습니다. 모바일에서 속도를 낮추면 작은 화면에서 효과가 너무 공격적으로 느껴지지 않습니다.
Rellax 확장 프로그램이 내 사이트 속도를 늦추나요?
Rellax 는 요소별로 스크롤 기반의 애니메이션을 실행하므로,영향은 작게 유지됩니다. 페이지의 모든 블록이 아닌 필요한 요소에만 적용하면 모든 것이 원활하게 유지됩니다.
감싸는 #
Rellax 확장은 다음을 추가하는 가장 빠른 방법입니다 요소 시차 스크롤 별도의 플러그인이나 사용자 정의 코드 없이 효과. 모든 요소에서 활성화하여 속도,백분율, z-index,방향을 설정하고 요소는 라이브 페이지에서 실제 깊이로 스크롤합니다. 화면에서 물건을 이동하는 더 많은 방법을 보려면 다음을 살펴보세요 변환합니다 그리고 부동 효과, 그리고 보세요 Rellax 시차 확장 페이지 elementor Pro 모션 효과와의 비교를 위해.
