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. In a UWP app, we can use the ParallaxView control to create a parallax effect.
-->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. In a UWP app, you can use the ParallaxView control to create a parallax effect.
Windows UI Library APIs:ParallaxView class, VerticalShift property, HorizontalShift property
For example, achievement images in Game Center are parallax images. Create and export.lsr files using Xcode or the Parallax Previewer app. Creating LSR Images with the Parallax Previewer App. Download the previewer app to create and preview.lsr images. Figure 7-1 shows the Parallax Previewer app. It has the following sections. Parallax scrolling is a web design technique in which the website background moves at a slower pace than the foreground. This results in a 3D effect as visitors scroll down the site, adding a sense of depth and creating a more immersive browsing experience.
Platform APIs: ParallaxView class, VerticalShift property, HorizontalShift property
Examples
| XAML Controls Gallery |
|---|
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
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. To learn more, see the Fluent Design overview.
How it works in a user interface
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.
Using the ParallaxView control to create a parallax effect
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.
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.
The Source property takes a reference to the foreground element. 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.
To set the background element, you add that element as a child of the ParallaxView control. The background element can be any UIElement, such as an Image or a panel that contains additional UI elements.
To create a parallax effect, the ParallaxView must be behind the foreground element. 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:
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.
Parallax Previewer App Download
Customizing the parallax effect
The VerticalShift and HorizontalShift properties let you control degree of the parallax effect.
- The VerticalShift property specifies how far we want the background to vertically shift during the entire parallax operation. A value of 0 means the background doesn't move at all.
- The HorizontalShift property specifies how far we want the background to horizontally shift during the entire parallax operation. A value of 0 means the background doesn't move at all.
Larger values create a more dramatic effect.
For the complete list of ways to customize parallax, see the ParallaxView class.
Do's and don'ts
Parallax Previewer Apps
- Use parallax in lists with a background image
- Consider using parallax in ListViewItems when ListViewItems contain an image
- Don't use it everywhere, overuse can diminish its impact
Related articles
Parallax Scroll is a fancy design concept in modern app design to create an interactive ‘Parallax’ effect on mobile or desktop apps.
Here is a list of 10 best Parallax Scroll components for React and React Native apps that let you make an element (typically background images) scroll at a different speed than the document as you scroll the web app or swipe through the mobile app. Have fun with it.
Originally Published Dec 19 2017, updated Jan 22 2021
Table Of Contents:
Best React Parallax Components:
1. react-simple-parallax
A simple React Component for the parallax effect on the front layer.
2. React Scroll Parallax Component
React components to create parallax scroll effects for banners, images or any other DOM elements.
3. Parallax Scroll Effect For Images & Backgrounds – react-parallax
A highly customizable React parallax library to apply smooth parallax scroll effects on images or backgrounds.
4. React Parallax Component – PLX
Lightweight and powerful React component, for creating on scroll effects aka. parallax.
5. React Springy Parallax Component
A springy, composable parallax-scroller for React.
Best React Native Parallax Components:
1. Sticky Parallax Header For React Native
A simple React Native library to create a sticky, parallax scrolling, fully customizable header for your iOS and Android apps.
2. React Native Parallax FlatList Component
A drop in replacement for FlatList that allows for a Parallax effect on images.
3. react-native-parallax-scrollview
A ScrollView Component For React Native that comes with a parallax scrolling effect when swiping.
4. React Native Parallax Scroll Component
A ScrollView-like component that has a parallax background, a parallax foreground and a fixed or sticky header. Can be nested within other views. Works on iOS and Android.
5. ScrollView-Like React Native Component With Parallax Support
A ScrollView-like component with parallax and sticky header support.
Apple Parallax Previewer
More Resources:
There’re lots of parallax scroll libraries out there and you can find more React & React Native resources about date picker on our Parallax category.
Parallax Previewer Application
To learn more about parallax scroll on modern web & mobile development, here are a few resources available online: