Compartir a través de

Parallax

  • Artículo

Parallax es un efecto visual en el que los elementos más cercanos al visor se mueven más rápido que los elementos en segundo plano. Parallax crea una sensación de profundidad, perspectiva y movimiento. En una aplicación para UWP, puede usar el control ParallaxView para crear un efecto parallax.

API de WinUI: clase ParallaxView, propiedad VerticalShift, propiedad HorizontalShift

API de Platform: clase ParallaxView, propiedad VerticalShift, propiedad HorizontalShift

Ejemplos

WinUI 2 Gallery
WinUI Gallery

Si tiene instalada la aplicación WinUI 2 Gallery, haga clic aquí para abrir la aplicación y ver ParallaxView en acción.

Parallax y Fluent Design System

Fluent Design System te ayuda a crear interfaces de usuario modernas y claras que incorporan luz, profundidad, movimiento, materiales y escala. Parallax es un componente de Fluent Design System que agrega movimiento, profundidad y escala a la aplicación. Para más información, consulta la Introducción a Fluent Design.

Cómo funciona en una interfaz de usuario

En una interfaz de usuario, puede crear un efecto parallax moviendo diferentes objetos a diferentes velocidades cuando la interfaz de usuario se desplaza o hace una panorámica. Para demostrarlo, echemos un vistazo a dos capas de contenido, una lista y una imagen de fondo. La lista se coloca sobre la imagen de fondo dando la impresión de que la lista podría estar más cerca del visor. Ahora, para lograr el efecto parallax, queremos que el objeto más cercano a nosotros se mueva "más rápido" que el objeto que está más lejos. A medida que el usuario desplaza la interfaz, la lista se mueve a una velocidad más rápida que la imagen de fondo, lo que crea la impresión de profundidad.

Ejemplo de efecto de paralaje con una lista y una imagen en segundo plano

Uso del control ParallaxView para crear un efecto parallax

Para crear un efecto parallax, use el control ParallaxView. Este control representa un contenedor que vincula la posición de desplazamiento de un elemento en primer plano, como una lista, a un elemento en el fondo, como una imagen. Al desplazarte por el elemento en primer plano, se anima el elemento en el fondo para crear un efecto parallax.

Para usar el control ParallaxView, proporcione un elemento Source, un elemento de fondo y establezca las propiedades VerticalShift (para desplazamiento vertical) o HorizontalShift (para desplazamiento horizontal) en un valor mayor que cero.

  • La propiedad Source hace referencia al elemento de primer plano. Para que se produzca el efecto parallax, el primer plano debe ser ScrollViewer o un elemento que contenga un ScrollViewer, como ListView o RichTextBox.

  • Para establecer el elemento de fondo, agregue ese elemento como elemento secundario del control ParallaxView. El elemento de fondo puede ser cualquier UIElement, como una imagen o un panel que contenga elementos adicionales de la interfaz de usuario.

Para crear un efecto parallax, ParallaxView debe estar detrás del elemento de primer plano. Los paneles Grid y Canvas permiten colocar los elementos uno encima de otro, por lo que funcionan bien con el control ParallaxView.

En este ejemplo se crea un efecto parallax para una lista:

<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 ajusta automáticamente el tamaño de la imagen de manera que funciona para la operación parallax, por lo que no tiene que preocuparse por el desplazamiento de la imagen fuera de la vista.

Personalización del efecto parallax

Las propiedades VerticalShift y HorizontalShift permiten controlar el grado del efecto parallax.

  • La propiedad VerticalShift especifica hasta qué punto queremos que el fondo cambie verticalmente durante toda la operación de parallax. Un valor de 0 significa que el fondo no se mueve en absoluto.
  • La propiedad HorizontalShift especifica hasta qué punto queremos que el fondo cambie horizontalmente durante toda la operación de parallax. Un valor de 0 significa que el fondo no se mueve en absoluto.

Los valores más grandes crean un efecto más espectacular.

Para obtener la lista completa de formas de personalizar parallax, consulte la clase ParallaxView.

Cosas que hacer y cosas que evitar

  • Usar parallax en listas con una imagen de fondo
  • Considerar la posibilidad de usar parallax en ListViewItems cuando ListViewItems contenga una imagen
  • No usarl el efecto parallax en todas partes, el uso excesivo puede disminuir su impacto