시차 효과로 페이지 스크롤

작동 방식

시차 효과를 이용하면 다른 개체와 관련하여 이미지 위치를 변경할 수 있습니다. 페이지를 색다르게 스크롤 하도록 설정할 수 있으며 사이트가 보다 시선을 사로잡도록 만들 수 있습니다.

사용자

웹사이트 빌더와 이미 통합한 파트너.

획득 방법

  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. 미리보기를 클릭하면 변경 사항을 볼 수 있습니다.

이 레시피에 대한 예제 비디오 보기: