Bubble.io에서 parallax 스크롤링 기능을 어떻게 설정하나요?

Bubble.io에서 패럴랙스 스크롤링 기능을 설정하는 것은 앱 페이지가 스크롤됨에 따라 요소의 시각적인 모양을 조작하는 것을 포함합니다. 다음은 이를 달성하는 방법에 대한 간단한 안내입니다:

1단계: 페이지에 Floating Group을 추가하여 시작합니다. 이 그룹에는 패럴 랙스 효과를 적용하려는 요소가 들어갑니다. 이 작업을 수행하려면 편집기에서 '시각적 요소' 탭을 클릭하고 'Floating Group'을 선택하십시오.

2단계: Floating Group이 페이지에 추가되면, 패럴릭스 효과를 적용하려는 페이지의 영역 아래에 정렬 순서를 설정해야 합니다. 일반적으로 이는 기타 주요 콘텐츠 그룹 아래에 배치하는 것을 의미합니다.

3단계: Floating Group의 속성을 조정하여 배경 설계 요소로 만듭니다. 그것이 눈에 띄게 하려면 페이지 배경이 투명해야합니다.

4단계: 패럴랙스 효과를 적용하려면, Floating Group에 대한 '패럴랙스 효과 요소' 설정을 찾습니다. 이 곳에서 스크롤 동작에 상대적인 패럴랙스 효과의 속도와 방향을 설정합니다.

5단계: 사용자가 스크롤하면 요소가 어떻게 움직여야 하는지에 따라 '패럴랙스 효과 요소'를 설정합니다:

• 패럴랙스 효과를 원하지 않으면 요소를 1로 설정하십시오.
• 요소를 고정 위치에 두려면 요소를 0으로 설정하십시오.
• 스크롤 속도의 두 배로 원소를 움직이려면 요소를 2로 설정하십시오.
• 스크롤 동작의 반대 방향으로 요소를 움직이려면 음수를 사용하십시오.

6단계: 원하는 요소를 설정한 후에는 Bubble.io에서 '미리보기' 버튼을 클릭하여 앱을 미리 보십시오. 페이지를 스크롤하여 패럴랙스 효과가 예상대로 작동하는지 확인하십시오.

7단계: 패럴랙스 요소 또는 Floating Group 설정에 필요한 조정을 해서 원하는 시각 효과를 얻을 때까지 이를 반복 합니다.

레이어와 페이지의 요소가 서로 어떻게 상호 작용하는지에 대한 명확한 이해는 패럴랙스 효과를 구현하는 데 중요합니다. Floating Group은 패럴랙스 스크롤링 기능이 눈에 띄고 효과적인지 확인하기 위해 올바르게 레이어링되어야 합니다.

그리고 이것이 Bubble.io에서 기본 패럴랙스 스크롤링 기능을 설정하는 방법입니다. 앱 디자인에 최적의 모양과 느낌을 찾기 위해 다양한 요소로 실험해보십시오.