시차 모션 스크롤

시차의 시각적 효과는 깊이와 차원의 인상을 줍니다. 다양한 속도로 화면의 요소를 이동하여 이 효과를 얻을 수 있습니다. 시차 효과가 포함된 애니메이션 구현은 메커니즘을 보여주거나 제품 구조를 강조하여 사용자 참여를 높이는 등 다양한 목적으로 사용됩니다. 또한 방문자가 사이트를 더 자세히 탐색하도록 유도하는 매력적인 시각적 경험을 만들 수도 있습니다. Webflow의 최신 Interactions 2.0은 코딩 없이도 웹사이트에 이러한 애니메이션을 통합하는 작업을 단순화합니다.

여기서는 다음 내용을 다룰 것입니다.

1. 초기 설정 확립
2. 애니메이션 정의
3. 스크롤 애니메이션 설정
4. 애니메이션 미리보기
5. 추가 애니메이션 통합
6. 특정 장치에서 애니메이션 비활성화

전문가 팁 — 깊이 환상

사실적인 3D 환경을 만들려면 깊이 인식 원칙을 준수하세요. 요소 크기, 위치, 그림자 거리, 심지어 흐림 효과와 같은 요소는 깊이와 필드를 시뮬레이션하는 데 도움이 됩니다.

설정 시작

1단계. 섹션 삽입

다음을 추가하여 시작하세요. 부분 요소를 캔버스에 추가합니다. 요소 패널 왼쪽에. 보이는 영역 아래와 다른 섹션 위에 배치합니다.

2단계. 단면 조정

단면을 선택하고 상단과 하단을 추가하세요. 심 스타일 패널에서 또한 과다 에게 숨겨진 섹션 경계 내에 콘텐츠를 포함합니다.

3단계. 컨테이너 삽입

드래그 컨테이너 의 요소 요소 패널 섹션으로. 설정 키 1200px로 만들고 위치 상대적인. 이 설정을 사용하면 컨테이너 내에서 이미지의 정확한 위치를 지정할 수 있습니다.

4단계. 이미지 가져오기

다음에서 이미지를 선택하세요. 자산 패널 섹션에 배치하세요. 이미지 크기를 조정하여 3D 공간감을 효과적으로 만듭니다.

추가 정보

다음에서 이미지 너비를 수정할 수 있습니다. 이미지 설정 모달. 이미지를 두 번 클릭하거나 이미지 라벨 옆에 있는 톱니바퀴 아이콘을 클릭하여 액세스하세요. 또는 요소 설정 패널 이미지를 선택하고 키보드에서 D를 눌러 오른쪽 디자인 면에

이미지 설정에서 이미지 크기를 조정하면 다양한 장치 중단점에 걸쳐 변경 사항이 계단식으로 적용됩니다. 특정 기기의 고유한 크기에 대해 너비 를 통해 스타일 패널.

5단계. 이미지 스타일 강화

적용하다 그림자 각 이미지에. 일관된 그림자 보장 각도 모든 이미지에 걸쳐. 조정하다 색상, 불투명, 거리, 흐림, 그림자의 크기/확산을 통해 시각적 깊이를 만듭니다.

6단계. 이미지 배치

설정 위치 각 이미지의 순수한. UI 또는 수동 입력을 통해 위치 값을 조작하여 이미지 위치를 조정합니다. 정의하다 Z-색인 레이어링을 제어하려면 - z-index가 높은 이미지가 더 가까이 나타나며 배경과 겹칩니다.

애니메이션 정의

애니메이션을 이해하는 것은 이벤트와 응답 원하는 결과를 얻기 위해 필요합니다. 

이 애니메이션에서 이미지는 섹션이 스크롤되어 표시될 때 애니메이션으로 표시됩니다. 그래서 이벤트 이다 요소 트리거 ~의 보기에서 스크롤하는 동안, 트리거 스크롤 애니메이션에 으로 응답.

7단계. 이벤트 정의

이미지가 포함된 섹션을 선택하여 상호 작용 만들기를 시작하세요. 활용 상호 작용 패널 설정하려면 요소 트리거 ~의 보기에서 스크롤하는 동안.

8단계. 이벤트 구성

다음을 선택하세요. 스크롤 애니메이션 시작. 애니메이션이 시작되고 끝나는 시기를 제어하려면 필요한 경우 애니메이션 경계를 조정하세요. 기본적으로 애니메이션은 섹션이 뷰포트에 들어갈 때 시작되고 종료할 때 끝납니다. 이 튜토리얼에서는 기본 설정을 유지합니다.

스크롤 애니메이션 설명

목표를 명확히 하면 확립해야 할 작업을 정확히 찾아내는 데 도움이 될 수 있습니다. 이 시점에서 목표는 이미지의 속도를 변경하는 것입니다. 세그먼트를 스크롤하는 동안 앞쪽에 있는 개체는 배경에 있는 개체보다 더 빠른 속도로 움직이는 것처럼 보여야 합니다. 그러므로 당신은 다음을 디자인하게 될 것입니다. 스크롤 행위 ~와 함께 옮기다 각 이미지마다. 그 후, 결정 위치 각 이미지의 y축 애니메이션의 시작과 끝에서.

9단계. 스크롤 애니메이션 만들기

애니메이션을 시작하기 전에 스무딩의 개념에 대해 논의해 보겠습니다. 스무딩 또는 댐핑은 애니메이션 타임라인의 정확한 위치를 향한 임박한 속도를 완화하고 개선합니다. 스무딩 값은 내에서 조정될 수 있습니다 스크롤 애니메이션. 이 가이드의 경우 50%에 보관할 수 있습니다.

이제 새로운 생성 스크롤 동작

10단계. 교대 작업 수행

Z-색인이 최대이고 사용자의 관점에 가장 가까운 이미지를 선택하세요. 소개하다 스크롤 행위 ~의 옮기다 애니메이션 중에 이미지가 움직이는 방식을 수정합니다.

두 개의 중요한 프레임 또는 이미지 발생이 애니메이션 타임라인에 포함됩니다. 하나는 애니메이션의 시작 부분인 0%에 구성되고 다른 하나는 애니메이션의 끝 부분인 100%에 구성됩니다.

11단계. 초기 위치 설정

0%에서 첫 번째 키프레임을 선택합니다. 에서 교대 변환 설정, 위치를 지정하여 이미지의 위치를 낮춥니다. Y축 1000px로. 이는 세그먼트가 처음으로 스크롤되어 표시될 때 이미지의 위치를 나타냅니다.

12단계. 최종 위치 결정

애니메이션 타임라인에서 두 번째 키프레임을 지정하고 y축 -1000px까지. 이는 세그먼트가 보기 밖으로 스크롤될 때 이미지의 위치를 나타냅니다.

13단계. 보조 작업 설정

Z-색인이 가장 낮고 세그먼트 내에서 가장 뒤쪽에 위치한 이미지를 선택합니다. 스크롤 동작 통합 옮기다. 이 새로운 이미지의 애니메이션 타임라인에 두 개의 새로운 키프레임이 추가됩니다. 하나는 0%에, 다른 하나는 100%에 추가됩니다.

기본 위치 결정

이 새 이미지에 대해 0%의 키프레임을 선택합니다. 에서 교대 변환 설정, 위치를 지정하여 이미지를 높입니다. Y축 -352px로. 세그먼트가 보기로 스크롤되면 이 이미지는 이 위치에서 이동하기 시작합니다.

최종 위치 지정

해당 이미지에 대해 100%에서 키프레임을 선택하고 위치를 조정합니다. Y축 352px로. 페이지를 아래로 진행하면 이 이미지가 이 위치로 내려갑니다. 이전 작업의 완화 환경설정을 수정한 경우 동일한 내용을 적용해야 합니다. 완화 모든 행동에.

14단계. 세 번째 애니메이션 제작

전경에서 다른 이미지를 선택합니다. 다음의 스크롤 작업을 포함합니다. 옮기다. 첫 번째 키프레임의 경우 키프레임을 낮추세요. 값을 300px로 지정합니다. 두 번째 키프레임의 경우 이미지를 올립니다. 이제 -500px와 같은 값을 설정하십시오. 이로 인해 이미지가 800px 범위를 통과하게 되며, 이는 가장 가까운 이미지보다 느리고 가장 먼 이미지보다 빠릅니다.

애니메이션의 예고편

애니메이션을 예견하다 미리보기 모드 디자이너의 또는 토글하여 캔버스에 라이브 실시간 미리보기 에. 현재 시차 효과가 더욱 분명해졌으며 이 애니메이션 내에서 깊이가 한 단계 더 높아진 것처럼 보입니다. 의도한 결과를 달성하기 위해 위치 또는 완화를 수정합니다.

추가 애니메이션 통합

이 스크롤 애니메이션 시퀀스 전체에서 애니메이션을 적용하려는 각 이미지에 스크롤 작업을 계속 추가합니다. 일관된 시차 스크롤 애니메이션을 공식화하려면 이 체계적인 패턴을 준수해야 합니다. 전경에 있는 요소(z-index가 높은 요소)는 배경에 있는 요소(z-index가 낮은 요소)보다 빠른 속도로 움직이는 것처럼 보입니다.

가젯 애니메이션 비활성화

모바일 장치에서는 이 애니메이션을 비활성화할 수 있는 옵션이 있습니다. 다음을 선택하여 애니메이션 타임라인을 닫습니다. 엑스 '시차 스크롤 효과' 옆에 있습니다. 그럼 안에 다른 설정, 장치 비활성화 이 상호 작용을 트리거하지 않으려는 경우.

기능성 인텔 - 모션 속도

y축에서 이미지의 위치를 설정하는 동시에 동작 속도도 설정합니다. 그 이유는 세그먼트를 탐색할 때 초기 이미지가 y 위치 1000px에서 y 위치 -1000px(2000px 거리)로 이동하기 때문입니다. 후속 이미지는 y 위치 -352px에서 y 위치 352px로 전환되므로 704px의 더 짧은 거리를 포함합니다. 해당 세그먼트에는 세 가지 평면 또는 깊이 계층이 있는 것으로 보입니다.

• 첫 번째 계층 — 이미지가 더 가까워 보이고 더 빠른 속도로 이동하는 계층
• 두 번째 계층 - 거의 모든 다른 이미지가 표준 속도로 움직이는 것처럼 보입니다.
• 세 번째 계층 — 이미지가 더 멀리 나타나고 눈에 띄게 느린 속도로 움직이는 것처럼 보이는 경우