Support for Parallax

0 votes
asked Sep 2, 2016 in Feature request by Edward
I'm working on a splash streen/tutorial for an app, using the tab/screen view.

Would love to have support for parallax elements that move as the user scrolls the tabs/screens.

Any suggestions in the meantime how to best achieve this?
commented Sep 5, 2016 by admin (31,720 points)
Hi Edward,

The implementation would likely depend on whether you're using tabs or screens. Which one were you planning on using?

~ Declan.
commented Sep 5, 2016 by anonymous
I'm currently using tabs as they are initially set up to accept swiping between the different panels.
commented Sep 6, 2016 by admin (31,720 points)
I've taken a quick look and it looks like it shouldn't be too hard to implement. I'm out for a few hours, but when I get home I'll put an example together and get back to you :) ~ Declan.

1 Answer

0 votes
answered Sep 6, 2016 by admin (31,720 points)

Okay, I've written a script that will resize and position of the parallax background automatically, regardless of the screen's and sprite's resolutions and orientations. You can get it here.

1. Create a TabView.
2. Make the alpha on the Image on the TabView object 0.
3. Set 'Show Graphic' on the Mask on the Tab Bar to true, and set the Image color to the desired color.
4. Set the alpha on each tab's background image to 0 (It's important to keep the images there or the container will not scroll).
5. Add an Image under the Pages object, but above the Container object in the hierarchy (so it is drawn behind the Container). This will be the parallax background, so set its sprite to your desired background sprite.
6. Add the attached script to this new Image, and set the Container Rect Transform value to the Container object's RectTransform.
8. The parallax image should now resize and position itself accordinly in both edit and play modes :)

Let me know if that helps!

~ Declan.

commented Sep 6, 2016 by anonymous
This is the bomb.

Thank you!
commented Sep 6, 2016 by admin (31,720 points)
Good to hear :)
Welcome to MaterialUI support! Ask us anything :)
...