시차 스크롤 구현 방법
작동 방식
시차 효과를 이용하면 다른 개체와 관련하여 이미지 위치를 변경할 수 있습니다. 사용자 지정 HTML 코드를 통해 페이지 스크롤을 색다르게 설정할 수 있으며 더욱 눈길을 끄는 사이트를 만들 수 있습니다. 기존 솔루션 또는 자체 코드를 추가할 수 있습니다.
획득 방법
기존 솔루션 사용
- 관리자 페이지에서 프로젝트를 열고 스토어프런트 > 웹 사이트 섹션으로 이동합니다.
- 웹 사이트 빌더 열기를 클릭합니다.
- 사용자 정의 코드 블록에 다음 코드를 삽입합니다.
Copy
- html
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>
- 이미지에 시차 효과를 적용하려면 이 이미지에 대한 링크를
data-image속성에 추가합니다. - 미리보기를 클릭하면 변경 사항을 볼 수 있습니다.
이 지침에 대한 튜토리얼 동영상 시청:
자체 코드 추가
- 빌더에서 블록 추가를 클릭하고 사용자 지정 코드를 선택합니다.
- 자체 코드를 블록에 삽입합니다.
이 기사가 도움이 되었나요?
의견을 보내 주셔서 감사드립니다!
메시지를 검토한 후 사용자 경험 향상에 사용하겠습니다.유용한 링크
마지막 업데이트: 2025년 8월 29일오자 또는 기타 텍스트 오류를 찾으셨나요? 텍스트를 선택하고 컨트롤+엔터를 누르세요.
