Scrolling background

Sometimes you want a parallax background but you don’t want to actually move the Camera.

Import all of your background images with the Repeat flag “Enabled” if it already loops seamlessly and “Mirrored” if you want it to flip horizontally every other loop. You can make a parallax effect if you alter the scroll speed. Note that for every different scroll speed you’ll need to make another ShaderMaterial since changing the param on one will change it on all sprites that share the same resource.

The image used for the thumbnail is Glacial Mountains: Parallax Background by vnitti.

Shader code
shader_type canvas_item;


uniform float speed;


void fragment () {
	COLOR = texture(TEXTURE, vec2(UV.x + TIME * speed, UV.y));
}
Tags
background, parallax, scrolling
The shader code and all code snippets in this post are under CC0 license and can be used freely without the author's permission. Images and videos, and assets depicted in those, do not fall under this license. For more info, see our License terms.

More from Exuin

Radial Speedlines

Gaussian Blur

Lines Screen Transition

Related shaders

Scrolling Line Background

Starfield with Parallax Scrolling Effect

Infinite custom texture scrolling with modifiers

Subscribe
Notify of
guest

3 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Studio Adriatic
3 years ago

You can have same effect if you manually update offset on Parallax Background

Mmodream
Mmodream
3 years ago

great shader, ty

TheAimnlessOne
1 year ago

Thank you so much for this. It is perfect for my use case which doesn’t work with the parralax background node.