시차Parallax

시차는 뷰어에 가까운 항목이 배경의 항목 보다 빠르게 이동 하는 시각적 효과입니다.Parallax is a visual effect where items closer to the viewer move faster than items in the background. 시차는 깊이, 원근 및 이동의 느낌을 만듭니다.Parallax creates a feeling of depth, perspective, and movement. UWP 앱에서 ParallaxView 컨트롤을 사용 하 여 시차 효과를 만들 수 있습니다.In a UWP app, you can use the ParallaxView control to create a parallax effect.

WINDOWS UI 라이브러리 api: ParallaxView 클래스, VerticalShift 속성, HorizontalShift 속성Windows UI Library APIs: ParallaxView class, VerticalShift property, HorizontalShift property

플랫폼 api: ParallaxView 클래스, VerticalShift 속성, HorizontalShift 속성Platform APIs: ParallaxView class, VerticalShift property, HorizontalShift property

Examples

XAML Controls GalleryXAML Controls Gallery
XAML controls gallery

XAML 컨트롤 갤러리 앱이 설치 되어 있는 경우 여기를 클릭 하 여 앱을 열고 ParallaxView in 작업을 참조하세요.If you have the XAML Controls Gallery app installed, click here to open the app and see the ParallaxView in action.

시차 및 흐름 디자인 시스템Parallax and the Fluent Design System

Fluent 디자인 시스템을 사용하면 조명, 깊이, 움직임, 재질 및 배율이 통합된 선명한 현대식 UI를 만들 수 있습니다.The Fluent Design System helps you create modern, bold UI that incorporates light, depth, motion, material, and scale. 시차는 응용 프로그램에 동작, 깊이 및 크기 조정을 추가 하는 흐름 디자인 시스템 구성 요소입니다.Parallax is a Fluent Design System component that adds motion, depth, and scale to your app. 자세한 내용은 Fluent Design 개요를 참조하세요.To learn more, see the Fluent Design overview.

사용자 인터페이스에서 작동 방식How it works in a user interface

Ui에서 UI를 스크롤하거나 계획 때 다른 개체를 다른 속도로 이동 하 여 시차 효과를 만들 수 있습니다.In a UI, you can create a parallax effect by moving different objects at different rates when the UI scrolls or pans. 이를 설명 하기 위해 두 계층의 콘텐츠, 목록 및 배경 이미지를 살펴보겠습니다.To demonstrate, let's look at two layers of content, a list and a background image. 목록은 배경 이미지의 맨 위에 배치 되며,이는 목록이 뷰어에 가까이 있을 수 있음을 보여 주는 효과를 이미 제공 합니다.The list is placed on top of the background image which already gives the illusion that the list might be closer to the viewer. 이제 시차 효과를 얻기 위해 더 멀리 떨어져 있는 개체 보다 "빠르게" 이동 하기 위해 가장 가까운 개체를 원합니다.Now, to achieve the parallax effect, we want the object closest to us to travel "faster" than the object that is farther away. 사용자가 인터페이스를 스크롤하면 목록이 배경 이미지 보다 빠른 속도로 이동 하 여 깊이의 환상 효과를 만듭니다.As the user scrolls the interface, the list moves at a faster rate than the background image, which creates the illusion of depth.

목록 및 배경 이미지를 사용한 시차의 예

ParallaxView 컨트롤을 사용 하 여 시차 효과 만들기Using the ParallaxView control to create a parallax effect

시차 효과를 만들려면 ParallaxView 컨트롤을 사용 합니다.To create a parallax effect, you use the ParallaxView control. 이 컨트롤은 목록과 같은 전경 요소의 스크롤 위치를 이미지와 같은 배경 요소에 연결 합니다.This control ties the scroll position of a foreground element, such as a list, to a background element, such as an image. 전경 요소를 스크롤하면 배경 요소에 애니메이션 효과를 적용 하 여 시차 효과를 만듭니다.As you scroll through the foreground element, it animates the background element to create a parallax effect.

ParallaxView 컨트롤을 사용 하려면 소스 요소, 배경 요소를 제공 하 고 VerticalShift (세로 스크롤의 경우) 및/또는 HorizontalShift (가로 스크롤) 속성을 0 보다 큰 값으로 설정 합니다.To use the ParallaxView control, you provide a Source element, a background element, and set the VerticalShift (for vertical scrolling) and/or HorizontalShift (for horizontal scrolling) properties to a value greater than zero.

  • Source 속성은 전경 요소에 대 한 참조를 사용 합니다.The Source property takes a reference to the foreground element. 시차 효과가 발생 하려면 전경을 ScrollViewer 또는 ListViewRichTextBox와 같은 ScrollViewer를 포함 하는 요소 여야 합니다.For the parallax effect to occur, the foreground should be a ScrollViewer or an element that contains a ScrollViewer, such as a ListView or a RichTextBox.

  • 배경 요소를 설정 하려면 해당 요소를 ParallaxView 컨트롤의 자식으로 추가 합니다.To set the background element, you add that element as a child of the ParallaxView control. 배경 요소는 이미지 또는 패널 등의 추가 UI 요소를 포함 하는 모든 UIElement일 수 있습니다.The background element can be any UIElement, such as an Image or a panel that contains additional UI elements.

시차 효과를 만들려면 ParallaxView가 전경 요소 뒤에 있어야 합니다.To create a parallax effect, the ParallaxView must be behind the foreground element. GridCanvas 패널을 사용 하면 항목을 서로 계층화 하 여 ParallaxView 컨트롤에서 잘 작동 합니다.The Grid and Canvas panels let you layer items on top of each other, so they work well with the ParallaxView control.

이 예에서는 목록에 대해 시차 효과를 만듭니다.This example creates a parallax effect for a list:

<Grid>
    <ParallaxView Source="{x:Bind ForegroundElement}" VerticalShift="50"> 
    
        <!-- Background element --> 
        <Image x:Name="BackgroundImage" Source="Assets/turntable.png"
               Stretch="UniformToFill"/>
    </ParallaxView>
    
    <!-- Foreground element -->
    <ListView x:Name="ForegroundElement">
       <x:String>Item 1</x:String> 
       <x:String>Item 2</x:String> 
       <x:String>Item 3</x:String> 
       <x:String>Item 4</x:String> 
       <x:String>Item 5</x:String>     
       <x:String>Item 6</x:String> 
       <x:String>Item 7</x:String> 
       <x:String>Item 8</x:String> 
       <x:String>Item 9</x:String> 
       <x:String>Item 10</x:String>     
       <x:String>Item 11</x:String> 
       <x:String>Item 13</x:String> 
       <x:String>Item 14</x:String> 
       <x:String>Item 15</x:String> 
       <x:String>Item 16</x:String>     
       <x:String>Item 17</x:String> 
       <x:String>Item 18</x:String> 
       <x:String>Item 19</x:String> 
       <x:String>Item 20</x:String> 
       <x:String>Item 21</x:String>        
    </ListView>
</Grid>

ParallaxView는 이미지의 크기를 자동으로 조정 하 여 시차 작업에 사용할 수 있도록 합니다. 따라서 뷰에서 이미지 스크롤을 걱정할 필요가 없습니다.The ParallaxView automatically adjusts the size of the image so it works for the parallax operation so you don't have to worry about the image scrolling out of view.

시차 효과 사용자 지정Customizing the parallax effect

VerticalShift 및 HorizontalShift 속성을 사용 하 여 시차 효과의 정도를 제어할 수 있습니다.The VerticalShift and HorizontalShift properties let you control degree of the parallax effect.

  • VerticalShift 속성은 전체 시차 작업 중 배경을 세로 방향으로 이동 하는 정도를 지정 합니다.The VerticalShift property specifies how far we want the background to vertically shift during the entire parallax operation. 값이 0 이면 배경이 전혀 이동 하지 않음을 의미 합니다.A value of 0 means the background doesn't move at all.
  • HorizontalShift 속성은 전체 시차 작업 중에 배경을 가로로 이동 하는 정도를 지정 합니다.The HorizontalShift property specifies how far we want the background to horizontally shift during the entire parallax operation. 값이 0 이면 배경이 전혀 이동 하지 않음을 의미 합니다.A value of 0 means the background doesn't move at all.

값이 클수록 더 극적으로 효과를 만듭니다.Larger values create a more dramatic effect.

시차를 사용자 지정 하는 방법의 전체 목록은 ParallaxView 클래스를 참조 하세요.For the complete list of ways to customize parallax, see the ParallaxView class.

권장 사항 및 금지 사항Do's and don'ts

  • 배경 이미지가 있는 목록에서 시차 사용Use parallax in lists with a background image
  • ListViewItems에 이미지가 포함 된 경우 ListViewItems에서 시차를 사용 하는 것이 좋습니다.Consider using parallax in ListViewItems when ListViewItems contain an image
  • 어디에서 나 사용 하지 마세요. 과도 하 게 영향을 줄 수 있습니다.Don't use it everywhere, overuse can diminish its impact