시차 효과가 있는 페이지 스크롤을 사용자에게 허용하는 방법

작동 방식

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

획득 방법

기존 솔루션 사용

  1. 게시자 계정 > 웹사이트 빌더로 이동.
  2. 다음 코드를 사용자 정의 코드 블록에 삽입:

Copy
Full screen
Small screen
<div class="img-holder" data-image="https://cdn.xsolla.net/files/uploaded/2340/4c9ab2e4036d41e2b31c4e6e01a5a7c6.jpeg"></div>

<script>
  var script = document.createElement('script');
  script.src = "https://cdn.jsdelivr.net/npm/parallax-imagescroll@0.2.3/jquery.imageScroll.min.js";
  script.addEventListener('load', function() {
    $('.img-holder').imageScroll({
      holderClass: 'sb-image-holder',
      speed: 0.5
    });
  });
  document.getElementsByTagName('body')[0].appendChild(script);
</script>

  1. 이미지에 시차 효과를 적용하려면 이 이미지에 대한 링크를 data-image 속성에 추가합니다.
  2. 미리보기를 클릭하면 변경 사항을 볼 수 있습니다.

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


자체 코드 추가

  1. 빌더에서 블록 추가를 클릭하고 사용자 지정 코드를 선택합니다.

  1. 자체 코드를 블록에 삽입합니다.

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

답하기 원하지 않습니다

의견을 보내 주셔서 감사드립니다!

유용한 링크

마지막 업데이트: 2021년 7월 20일

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

문제 보고
콘텐츠를 항상 검토합니다. 여러분의 피드백은 콘텐츠를 개선에 도움이 됩니다.
후속 조치를 위해 이메일을 제공해 주세요
의견을 보내 주셔서 감사드립니다!