Elementor에서 패럴랙스 효과를 만드는 방법 | 3가지 방법

Elementor의 시차 효과는 스크롤하는 동안 배경이 전경 콘텐츠와 다른 속도로 움직이게 하는 디자인 기능입니다. 웹 페이지에 깊이감과 움직임을 만들어 줍니다.

Elementor에서 시차 효과를 만들려면 효과를 원하는 페이지를 열고 요소를 선택합니다. 다음으로 이동합니다. 스타일 > 배경를 클릭하고 이미지를 추가합니다. 그런 다음 고급 > 모션 효과 을 클릭하고 스크롤 효과 또는 마우스 효과. 여기에서 스크롤 설정과 속도를 조정하고 필요에 따라 사용자 지정합니다.

이 블로그에서는 Elementor 사이트에 시차 효과를 추가하는 3가지 방법을 보여드리겠습니다. 

1. 웹 요소의 시차 효과
2. 배경의 시차 효과.
3. 고급 커스터마이징을 통한 시차 효과

이제 시작해 보겠습니다.

Elementor를 사용하여 시차 효과를 만드는 방법 | 3가지 방법

Elementor에서 패럴랙스를 추가하는 방법은 크게 두 가지입니다. 첫 번째는 웹 요소에 패럴랙스 효과를 적용하는 것이고, 두 번째는 배경 섹션에 패럴랙스 효과를 사용하는 것입니다. 

두 옵션 모두 Elementor Pro에서만 사용할 수 있으므로, 이를 사용하려면 Pro 버전이 필요합니다.

Elementor를 사용하여 시차 효과를 단계별로 만드는 방법은 다음과 같습니다.

1. 웹 요소에 패럴랙스 효과 만들기

웹 요소의 시차 효과는 섹션, 열 또는 위젯이 페이지의 나머지 부분과 다르게 이동하여 깊이와 움직임을 만드는 것입니다. Elementor의 프로 기능이므로 여기서는 Elementor 프로를 사용하겠습니다.

이제 어떻게 하는지 알아봅시다.

1단계: Elementor로 페이지 추가 및 편집하기

먼저 사이트에서 새 페이지 또는 기존 페이지를 엽니다. 페이지 요소에서 시차를 사용하려면 'Elementor로 편집'을 클릭합니다.

2단계: 패럴랙스를 추가할 요소 선택하기

그런 다음 시차 효과를 적용하려는 섹션, 열 또는 위젯을 선택합니다.

3단계: 스크롤 효과 사용

여기에서 처음에는 스크롤 효과를 활성화해야 하므로 스크롤 효과를 활성화하려면 고급 탭을 클릭하고 아래로 스크롤하여 왼쪽 패널에서 모션 효과 설정으로 이동합니다. 

그런 다음 스크롤 효과와 마우스 효과에 대한 옵션을 찾을 수 있습니다. 간단히 스크롤 효과 토글합니다.

4단계: 스크롤 사용자 지정

이제 각 효과를 필요에 맞게 쉽게 사용자 지정할 수 있습니다. 그냥 연필 아이콘을 클릭하면 모든 컨트롤이 있는 설정 패널이 열립니다.

여기에서 방향, 속도, 뷰포트를 미세 조정하여 애니메이션이 시작되는 시점과 끝나는 시점을 정확하게 결정할 수 있습니다. 

또한 뷰포트 배율을 설정하여 스크롤의 어느 지점에서 효과를 시작하고 어느 지점에서 효과를 중지할지 지정할 수도 있습니다.

예를 들어, 여기에서는 가로 스크롤 옵션에서 연필 아이콘을 클릭하여 가로 스크롤 효과를 적용하여 다음과 같이 만듭니다. 

• 방향: 방향: 오른쪽
• 속도: 4.8
• 뷰포트(상단): 38%
• 뷰포트(하단): 75%

전문가 팁: 보다 역동적인 모양을 원하면 단일 요소에 여러 애니메이션을 결합할 수 있습니다. 이 단계는 전적으로 선택 사항이며 주로 전체 사이트 디자인에 따라 달라집니다. 하지만 여러 시차 애니메이션을 사용하면 눈에 띄는 레이어 효과를 만들 수 있습니다.

5단계: 마우스 효과 활성화 웹 요소의 경우

이제 커서를 움직일 때 요소가 약간 움직이도록 마우스 기반 시차를 활성화해야 합니다. 

먼저 마우스 효과를 활성화하고 연필 아이콘을 사용하여 마우스 트랙과 3D 기울기를 사용자 지정하고 조정합니다.

예를 들어 3D 기울기 효과의 경우 아래와 같이 조정했습니다:

• 방향: 방향: 직접
• 속도: 4

6단계: 다양한 기기에 시차 적용하기

이제 데스크톱, 태블릿, 모바일 등 다양한 디바이스에서 시차 효과에 대응할 차례입니다. 필요한 경우 모든 기기에서 시차가 원활하게 작동하도록 조정하세요.

마지막으로 웹 요소 시차 효과의 최종 결과물은 다음과 같습니다:

2. 사이트 배경에 시차 효과 만들기

Elementor에서 시차를 추가하는 또 다른 인기 있는 방법은 섹션의 배경에 적용하는 것입니다. 이렇게 하면 배경이 전경 콘텐츠와 다르게 움직이기 때문에 페이지가 더욱 역동적으로 느껴집니다. 간단하지만 디자인에 생동감을 불어넣을 수 있는 효과적인 방법입니다. 설정하려면 다음 단계를 따르세요:

1단계: 배경 섹션 선택

먼저 시차 효과를 표시할 섹션을 선택해야 합니다. 영웅 배너, 추천 영역 또는 강조하고 싶은 섹션이 될 수 있습니다.

2단계: 모션 효과 또는 마우스 효과 설정 열기

그런 다음 고급 탭에서 모션 효과 패널로 이동합니다. 여기에서 다음 중 하나를 활성화할 수 있습니다. 스크롤 효과 또는 원하는 스타일에 따라 마우스 효과를 사용할 수 있습니다.

3단계: 패럴랙스 애니메이션 스타일 조정하기

이제 애니메이션 스타일을 조정해야 합니다. 먼저 스타일 탭을 엽니다. 배경 이미지를 업로드한 다음 디자인에 매끄럽게 맞을 때까지 효과의 방향, 속도 및 강도를 조정하여 움직이는 방식을 사용자 정의합니다.

여기에서 마우스 효과가 있는 스크롤 효과와 같이 배경 레이어에 적용할 수 있는 두 가지 효과 중에서 선택할 수 있습니다.

4단계: 마우스 효과 활성화 배경의 경우

스크롤 효과를 조정한 후 마우스 기반 시차를 켜서 커서 움직임에 따라 배경이 반응하도록 합니다. 이렇게 하면 방문자에게 인터랙티브한 느낌을 더할 수 있습니다. 따라서 연필 아이콘을 사용하여 마우스 트랙을 사용자 지정하고 미세 조정합니다.

예를 들어, 여기에서는 흐림 효과를 구성했습니다,

• 방향: 페이드 아웃으로 설정하면 요소가 뷰포트에서 빠져나갈 때 서서히 흐려집니다.
• 레벨: 15
• 뷰포트 범위: 49%에서 84% 사이에서는 사용자의 스크롤 위치에 따라 효과가 시작되고 종료되는 시점을 설정합니다.

5단계: 여러 기기에서 테스트

이제 데스크톱, 태블릿, 모바일 등 다양한 기기에서 시차 효과가 어떻게 작동하는지 확인해 보겠습니다. 애니메이션이 원활하게 실행되고 어디서나 멋지게 보이도록 필요에 따라 조정합니다.

배경 시차 효과의 최종 결과는 다음과 같습니다:

참고: 브랜드에 맞게 패럴랙스 효과를 더 스타일링하고 싶으신가요?

이 두 가지 방법이 Elementor에서 시차 효과를 추가하는 가장 일반적인 방법입니다. 하지만 고급 시차 효과와 같은 고급 효과를 원한다면 시차 섹션, 기울기 효과 또는 고급 3D 시차Elementor 자체는 기본적으로 이러한 기능을 제공하지 않습니다. 이 기능을 사용하려면 별도의 Elementor 시차 효과 플러그인.

여기에서 사이트에 시차 효과를 추가하려면 Element pro를 구입해야 합니다. 하지만 더 저렴한 비용으로 고급 패럴랙스를 추가할 수 있다면 어떨까요?

이것이 바로 우리가 생각해낸 것입니다. Element Pack Pro 최고의 Elementor 애드온 옵션 중 하나입니다. 시차 효과를 위한 4가지 위젯과 함께 이 플러그인에는 다른 300개 이상의 Elementor 위젯.

따라서 전문가가 아니거나 자신의 웹사이트에 가장 적합한 패럴랙스 스타일을 잘 모르더라도 데모 디자인을 살펴보고 자신의 사이트에 완벽하게 맞는 스타일을 선택할 수 있습니다.

Element Pack로 고급 Elementor 패럴랙스 효과 만들기

Elementor Pro는 모션 효과와 같은 기본적인 시차 효과를 제공합니다, 변환 및 확장및 스티커 요소. 

Elementor의 기본 패럴랙스 옵션을 넘어서고 싶다면 Element Pack 플러그인을 사용하는 것도 좋은 선택입니다. 이 플러그인을 사용하면 고급 시차 배경틸트 효과, 고급 3D 시차 및 미리 만들어진 블록을 사용하여 전문적인 디자인을 만들 수 있습니다.

이제 Elementor에서 Element Pack로 고급 시차 효과를 단계별로 만드는 방법을 시작해 보겠습니다:

1단계: Element Pack 설치 및 활성화하기

먼저 Element Pack 플러그인을 설치한 다음 활성화합니다.

참고: 먼저 사이트에 Elementor를 무료로 설치한 다음 Element 팩을 설치합니다.

2단계: 패럴랙스 위젯 활성화하기

그런 다음 다음으로 이동합니다. Element Pack Dashboard > Extensions > Active 시차 효과 관련 확장 기능은 다음과 같이 필요에 따라 사용할 수 있습니다.

• 배경 이미지 시차
• 시차/스크롤 효과
• 섹션 이미지 시차
• 스크롤 채우기 효과
• 애니메이션 그라데이션 BG
• 커서 효과

다양한 옵션이 있으므로 시차 효과를 향상시키기 위한 추가 사용자 지정 기능을 쉽게 활성화할 수 있습니다. 

3단계: Elementor 페이지 열기 

이제 시차 효과를 추가할 페이지를 선택한 후 Elementor로 편집.

4단계: 시차를 추가할 요소 선택하기

배경에 시차 효과를 추가하려면 먼저 배경 시차 효과를 활성화하고 섹션을 선택한 후 다음 단계로 이동합니다. 스타일 > 배경을 클릭하고 BG 시차 효과.

그런 다음 다음을 사용하여 스크롤 이동을 조정합니다. 패럴랙스 X 그리고 패럴랙스 Y 필요에 따라

이제 시차 효과를 적용할 다른 하위 섹션, 열 또는 위젯을 선택한 다음 다음으로 이동합니다. 고급.

5단계: 시차 설정 사용자 지정하기

이제 고급 탭에는 다음과 같은 많은 사용자 지정 섹션이 있습니다. 

• 색종이 효과
• 커서 효과
• 이펙트 공개
• 리플 효과
• Sticky
• 텍스트 그라데이션 배경
• 사실적인 이미지 그림자
• 도구 설명
• 가시성 제어
• 음향 효과.

섹션을 사용하여 속도, 방향, 트리거 옵션 및 애니메이션 스타일을 조정할 수 있습니다. Element Pack를 사용하면 여러 요소를 레이어링하여 고급 3D 또는 틸트 효과를 만들 수도 있습니다.

예를 들어, 여기에서는 양식화된 만화 로켓 우주선 이미지 아래에 실제와 같은 그림자를 추가하는 '사실적인 이미지 그림자'를 추가합니다. 이 효과는 그래픽에 입체감을 부여하여 페이지에서 튀어나오는 느낌을 줍니다.

그런 다음 다음을 사용하여 스크롤 이동을 조정합니다. 패럴랙스 X 그리고 패럴랙스 Y 필요에 따라

6단계: 기성품 패럴랙스 블록 사용(빠른 방법)

처음부터 제작하고 싶지 않다면 미리 디자인된 시차 효과 중에서 선택하세요. 준비된 블록 Element Pack에 포함되어 있습니다. 다음 페이지로 이동하여 Element Pack 템플릿 라이브러리 Elementor 편집기 내부에 있습니다.

이제 디자인에 맞는 시차 섹션을 찾을 때까지 사용 가능한 사전 디자인된 시차 섹션을 살펴보세요.

그런 다음 원하는 블록 위로 마우스를 가져간 다음 라이브 카피 을 클릭하여 레이아웃과 효과를 복사합니다.

이제 Elementor 캔버스로 이동하여 복사한 블록을 원하는 섹션이나 컨테이너에 붙여넣습니다.

그런 다음 플레이스홀더 텍스트, 이미지 및 링크를 브랜드에 맞는 고유 콘텐츠로 교체합니다.

이제 스타일에서 색상, 타이포그래피, 시차 설정을 미세 조정하여 사이트의 미적 감각에 맞게 변경할 수 있습니다.

7단계: 다양한 디바이스에 맞게 최적화하기

이제 데스크톱, 태블릿, 모바일에서 시차 효과를 테스트해 보세요. 반응형 옵션을 설정하고 모든 곳에서 매끄럽게 보이도록 합니다.

그리고 다음은 시차 효과의 최종 결과물입니다. Element Pack:

Elementor Pro로 패럴랙스 효과를 직접 제작할 때는 기본을 익힐 수 있습니다. 하지만 Element Pack를 사용하면 훨씬 더 많은 유연성을 발휘할 수 있습니다. 

표준 모션에 국한되지 않고 애니메이션 레이어링, 스크롤 속도 제어, 색종이 효과, 커서 효과, 공개 효과, 물결 효과 등 Elementor Pro에서 제공하지 않는 고급 기능을 혼합할 수도 있습니다. 

즉, 단순히 섹션에 '움직임'을 추가하는 것이 아니라 개발자가 아니더라도 완전한 인터랙티브 경험을 만들 수 있습니다.

Elementor를 사용한 패럴랙스 효과 디자인 모범 사례 

시차 효과는 웹사이트를 현대적이고 매력적이며 시각적으로 매력적으로 보이게 만들 수 있습니다. 하지만 최상의 결과를 얻으려면 현명하게 사용해야 합니다. 다음은 명심해야 할 몇 가지 모범 사례입니다:

1. 가독성 보호

콘텐츠가 항상 우선시되어야 합니다. 시차가 있는 배경 위에 텍스트가 있는 경우 대비를 확인하세요. 배경이 너무 바쁘면 오버레이 또는 흐린 효과를 사용하세요.

예시: 시차 효과로 인해 텍스트 콘텐츠가 흐릿하게 보이는 경우가 있습니다. 따라서 패럴랙스 디스플레이에서 콘텐츠를 사용할 때는 콘텐츠가 선명하게 보이는지 확인하세요.

2. 브랜드의 개성과 일치

시차 스타일은 브랜드와 일관된 느낌을 주어야 합니다. 웰니스 스파에서는 느리고 차분한 스크롤 효과를 사용하는 반면 게임 사이트에서는 빠르고 역동적인 움직임을 사용할 수 있습니다.

예시: 고급 호텔 웹사이트의 배경에 천천히 움직이는 파도가 브랜드 스토리와 완벽하게 일치하는 해변의 편안한 분위기를 자아낸다고 가정해 보겠습니다.

3. 애니메이션 과부하 방지

사이트에 슬라이딩, 페이드, 확대/축소 요소가 가득한 경우 시차 효과를 여러 개 추가하면 노이즈만 늘어납니다. 영웅 배너나 제품 쇼케이스처럼 패럴랙스가 필요한 한두 가지 순간에 집중하세요.

예시: Apple의 제품 페이지에서는 스크롤할 때 하나의 제품 기능을 강조하는 시차를 거의 사용하지 않는 경우가 많다는 것을 알 수 있습니다. 이 정도면 방문자의 참여를 유도하는 데 충분합니다.

4. 성능 보기

애니메이션 + 큰 이미지 = 로드 시간이 느려집니다. 시차를 추가한 후에는 항상 성능을 테스트하세요. 사이트가 느리게 느껴진다면 이미지를 압축하거나 지연 로딩을 사용하거나 효과를 축소하세요.

전문가 팁: 시차를 추가한 후 페이지스피드 인사이트 또는 GTmetrix를 통해 사이트를 실행합니다. 위험 신호가 표시되면 라이브로 전환하기 전에 최적화하세요.

Elementor 시차 효과가 작동하지 않음 - 문제 및 수정 사항

간혹 Elementor의 시차 효과가 예상대로 작동하지 않을 수 있습니다. 이는 설정, 테마 충돌 또는 디바이스 제한으로 인해 발생할 수 있습니다. 가장 일반적인 문제와 해결 방법은 다음과 같습니다:

1. 모션 효과 사용 안 함

시차가 작동하지 않는 경우 먼저 다음 사항을 확인하세요. 모션 효과 섹션, 열 또는 위젯에 대해 활성화되어 있습니다. 로 이동합니다. 고급 > 모션 효과 를 클릭하고 스크롤 또는 마우스 효과가 켜져 있는지 확인합니다.

3. 테마 또는 플러그인 충돌

테마나 다른 플러그인이 Elementor의 스크립트를 재정의할 수 있습니다. 다른 플러그인을 하나씩 비활성화하거나 Hello Elementor와 같은 기본 테마로 일시적으로 전환하여 테스트해 보세요.

4. 브라우저 또는 장치 제한

시차 효과는 모바일 또는 특정 브라우저에서 항상 동일하게 나타나지 않을 수 있습니다. 시차 효과는 반응형 설정 를 Elementor로 설정하여 태블릿과 모바일에서 효과가 허용되는지 확인합니다.

5. 캐싱 및 성능 문제

브라우저 캐시, CDN 또는 최적화 플러그인이 애니메이션 실행을 차단할 수 있습니다. 캐시를 지우고 CDN을 제거한 후 사이트를 다시 확인하세요.

자주 묻는 질문

최종 생각

시차 효과는 웹사이트에 개성, 사실감, 움직임을 더할 수 있습니다. 하지만 목적에 맞게 사용해야 합니다. 미묘하게 유지하고 가독성을 보호하며 항상 여러 기기에서 테스트하여 디자인이 모든 곳에서 매끄럽게 느껴지도록 해야 합니다.

Elementor는 시작을 위한 도구를 제공하지만, 창의력을 한 단계 더 끌어올리고 싶다면 Element Pack를 사용하면 그 가능성을 한 단계 더 높일 수 있습니다. 색종이 효과, 커서 효과, 동일 높이, 이미지 시차, 스티커, 타일 스크롤, 가시성 제어와 같은 추가 시차 효과 기능과 더 많은 고급 모션 옵션으로 보기만 좋은 것이 아니라 기억에 남는 디자인을 제작할 수 있습니다.

결국 중요한 것은 효과를 추가하기 위한 것이 아닙니다. 방문자에게 자연스럽게 느껴지는 경험을 만드는 것이 중요합니다. 이 균형을 제대로 맞추면 시차는 사이트를 돋보이게 하는 작은 디테일 중 하나가 됩니다.