패럴렉스(시차) 스크롤링 설정과 문제 해결 팁을 검토하세요.

Brine 그룹의 템플릿은 머리말 이미지에 패럴렉스(시차) 스크롤링이라는 특수한 시각 효과를 사용합니다. 패럴렉스(시차) 스크롤링은 배경 이미지가 전경의 콘텐츠보다 느리게 움직여 깊이감과 몰입감을 주는 착시 효과를 만듭니다.

버전 7.1에서 유사한 패럴렉스(시차) 스크롤링 효과를 만들려면 배경 이미지 효과를 사용하세요.

다음은 Burke 템플릿의 패럴렉스(시차) 스크롤링 예입니다.

시작하기 전에

• 템플릿이 패럴렉스(시차) 스크롤링을 지원하는지 알아보려면 Brine 그룹의 템플릿 목록을 참조하세요.
• 패럴렉스(시차) 스크롤링을 활성화하면 사이트의 모든 배너에 영향을 미칩니다.
• 패럴렉스(시차) 스크롤링은 모바일에서 작동합니다.
• 단종된 Marquee 그룹도 패럴렉스(시차) 스크롤링을 지원합니다. 자세히 알아보려면 Marquee 템플릿 가이드를 참조하세요.
• 패럴렉스(시차) 스크롤링과 접근성에 대해 자세히 알아보려면 오디오, 이미지, 비디오의 접근성 높이기를 참조하세요. 

지원되는 페이지

패럴렉스(시차) 스크롤링은 배너를 지원하는 페이지에서 사용할 수 있습니다.

• 색인 페이지(레이아웃 페이지 섹션 뒤의 배경 이미지)
• 레이아웃 페이지
• 스토어 페이지
• 이벤트 페이지
• 앨범 페이지
• 블로그 페이지
• 갤러리 페이지

패럴렉스(시차) 스크롤링 활성화 또는 비활성화

사이트의 배너에 패럴렉스 효과가 표시되지 않는 경우 Brine 그룹의 사이트 스타일에서 효과를 활성화하세요.

1. 사이트 스타일 패널을 엽니다.
2. 메인: 오버레이 섹션까지 아래로 스크롤합니다.
3. 패럴렉스 활성화를 선택합니다.
4. 자르기를 최소화하기 위해 패럴렉스 스마트 자르기를 선택할 수도 있습니다.
5. 저장을 클릭합니다. 

사이트에서 패럴렉스(시차) 스크롤링을 비활성화하려면 동일한 단계를 따르고 패럴렉스 활성화를 선택 해제하세요.

대표 이미지 추가

패럴렉스 효과를 만들려면 페이지나 섹션에 대표 이미지를 추가하세요.

• 페이지에 추가된 대표 이미지는 배너를 만듭니다. 
• 색인 콘텐츠 섹션에 추가된 대표 이미지는 배경 이미지를 만듭니다.

패럴렉스 효과가 표시되지 않으면 활성화되어 있는지 확인하세요.

효과 높이기

패럴렉스 스크롤 효과를 높이는 방법에는 여러 가지가 있습니다.

콘텐츠 혼합

패럴렉스(시차) 스크롤링 이미지를 패럴렉스(시차) 스크롤링되지 않는 콘텐츠 및 이미지와 혼합하세요. 더 빠르게 움직이는 콘텐츠는 패럴렉스 이미지 위로 미끄러져 지나가는 것처럼 보입니다.

예를 들어 색인에서 패럴렉스(시차) 스크롤링 콘텐츠 섹션을 패럴렉스가 아닌 갤러리 색인 섹션이나 배경 이미지가 없는 콘텐츠 섹션과 혼합할 수 있습니다.

오버레이 콘텐츠 추가

패럴렉스(시차) 스크롤링을 개선하는 또 다른 방법은 이미지에 텍스트, 버튼 또는 기타 콘텐츠를 오버레이로 추가하는 것입니다. 이 콘텐츠는 페이지의 다른 부분과 동일한 속도로 스크롤되며, 이미지보다 빠르게 스크롤됩니다. Brine 그룹에서는 블록을 사용하여 이 콘텐츠를 추가할 수 있습니다.

• 배너 - 인트로 영역에 콘텐츠를 추가하세요.
• 색인 페이지 섹션 - 페이지 콘텐츠 영역에 콘텐츠를 추가하세요. 

색상 필터 추가

사이트 스타일의 메인: 오버레이 섹션에서 오버레이 색상을 사용하여 사이트의 모든 배너에 색상 필터를 추가할 수 있습니다.

자르기

자르기가 패럴렉스 이미지에 미치는 영향을 이해하려면 사이트를 직사각형 구멍이 뚫린 종이 한 장으로 생각하면 도움이 됩니다. 패럴렉스 이미지는 그 아래에 있는 별도의 계층으로, 종이의 구멍을 통해서만 볼 수 있습니다.

종이가 이미지보다 빠르게 스크롤되려면 이미지가 구멍보다 더 길어야 합니다. 이미지의 상단과 하단에 있는 여분의 공간은 종이를 위아래로 움직일 때 드러납니다.

이로 인해 자르기와 초점 변경이 패럴렉스(시차) 스크롤링 이미지의 위치에 눈에 띄는 영향을 미치지 않을 수 있습니다. 사이트는 이미지가 패럴렉스 효과를 표시할 수 있도록 측면에 여백을 두도록 디자인되었습니다.

팁: 왼쪽과 오른쪽의 잘림 현상을 최소화하려면 사이트 스타일에서 패럴렉스 스마트 자르기를 선택하세요.

스크롤 문제

패럴렉스 효과가 활성화된 경우에 스크롤 문제가 발생하면 페이지 크기를 줄여야 할 수도 있습니다. 브라우저는 특히 전체 페이지 크기가 15MB 이상인 경우 패럴렉스(시차) 스크롤링 페이지를 느리게 로드할 수 있습니다. 스크롤이 여전히 제대로 보이지 않거나 페이지 크기를 줄일 수 없는 경우 패럴렉스를 비활성화해 보세요.