시차 스크롤 구현 방법

작동 방식

시차 효과를 이용하면 다른 개체와 관련하여 이미지 위치를 변경할 수 있습니다. 사용자 지정 HTML 코드를 통해 페이지 스크롤을 색다르게 설정할 수 있으며 더욱 눈길을 끄는 사이트를 만들 수 있습니다. 기존 솔루션 또는 자체 코드를 추가할 수 있습니다.

획득 방법

  1. 관리자 페이지에서 프로젝트를 열고 스토어프런트 > 웹 사이트 섹션으로 이동합니다.
  2. 사이트 섹션에서 사이트를 선택하고 웹 사이트 빌더 열기를 클릭합니다.
  3. 사이트에 여러 페이지가 있는 경우, 필요한 페이지를 선택합니다:
    1. 빌더 상단의 현재 페이지 제목을 클릭합니다.
    2. 드롭다운 목록에서 필요한 페이지를 선택합니다.
  4. 페이지의 어느 곳에서나 블록 추가를 클릭합니다.
  5. 사용자 정의 코드 블록을 선택합니다.
  6. 효과 스크립트가 포함된 HTML 코드를 다음 두 가지 방법 중 하나로 추가하세요:
    • 独自のコードを使用する。
    • 기성 스크립트를 사용합니다. 방법은 다음과 같습니다:
      1. 블록에 다음 코드를 삽입합니다:
Copy
Full screen
Small screen
 1<div class="img-holder" data-image="https://cdn.xsolla.net/files/uploaded/2340/4c9ab2e4036d41e2b31c4e6e01a5a7c6.jpeg"></div>
 2<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
 3<script>
 4  var script = document.createElement('script');
 5  script.src = "https://cdn.jsdelivr.net/npm/parallax-imagescroll@0.2.3/jquery.imageScroll.min.js";
 6  script.addEventListener('load', function() {
 7    $('.img-holder').imageScroll({
 8      holderClass: 'sb-image-holder',
 9      speed: 0.5
10    });
11  });
12  document.getElementsByTagName('body')[0].appendChild(script);
13</script>
      1. 이미지에 패럴랙스 효과를 적용하려면 이 이미지의 링크를 data-image 속성에 추가하십시오.
  1. 미리 보기를 클릭하여 변경 사항을 확인합니다.

이 지침에 대한 튜토리얼 동영상 시청:

이 기사가 도움이 되었나요?
감사합니다!
개선해야 할 점이 있을까요? 메시지
유감입니다
이 기사가 도움이 안 된 이유를 설명해 주세요. 메시지
의견을 보내 주셔서 감사드립니다!
메시지를 검토한 후 사용자 경험 향상에 사용하겠습니다.

유용한 링크

마지막 업데이트: 2026년 4월 29일

오자 또는 기타 텍스트 오류를 찾으셨나요? 텍스트를 선택하고 컨트롤+엔터를 누르세요.

문제 보고
콘텐츠를 항상 검토합니다. 여러분의 피드백은 콘텐츠를 개선에 도움이 됩니다.
후속 조치를 위해 이메일을 제공해 주세요
의견을 보내 주셔서 감사드립니다!
피드백을 보내는 중 문제가 발생했습니다
잠시 후 다시 시도하거나 doc_feedback@xsolla.com으로 연락해 주세요.