- Home /
2 Scrollrects and Parallax effect
Having set the Canvas render mode to Screen space-Overlay, I want to make a vertical scroll rect of images and an another scroll rect with descriptions of these images, so that when the user scrolls, the description scroll rect would move slower than the image scroll rect to imply parallax effect.
Is this achievable at all using the new Unity UI system?
Answer by sumeeton · Mar 29, 2015 at 10:52 AM
Yes, it should be possible. You'll have to write a script to move the image scroll rect slowly by some factor say 0.8 when the user scrolls the description scroll rect. Move the image scroll rect with the help of the OnValueChanged event in the inspector. Should be easy.
OnValueChanged did the trick! it passes a Vector2 consisting of values between -1 and 1, when it's multiplied by a factor it can mimic the effect. Thanks a ton!
Answer by Fatamos · Apr 29 at 08:50 AM
Hi, I know this was posted years ago but here's how I made it:
[SerializeField] private Transform _timelineContentTR;
[SerializeField] private Transform _parallaxCOntentTR;
[SerializeField] private GameObject _parallaxGO;
[SerializeField, Range(0, 2f)] float _followFactor;
private void Update()
{
_parallaxCOntentTR.transform.position = Vector3.right * _timelineContentTR.transform.position.x * _followFactor;
}
public void TurnParallaxOn(bool active)
{
_parallaxGO.SetActive(active);
}
Basically taking the position of the first scroll rect and the second one and multiplying it by some "follow factor". And also the public method that activates/deactivates script.