Recently, there has been a rekindled interest in the parallax effect, especially for CSS backgrounds. Rather than a main feature (like it was in the old scrolling videogames), it's meant to be a subtle effect for pages. As the user resizes their browser, the different layers will shift at different rates, giving the banner a simulated depth of field.
To get a parallax effect in SVG, simply create the images for each layer in the <defs> element, then reference them with <use> elements, positioning the graphics with transform translations and percentages of the total width, where the foreground elements have a larger percentage than those in the layers behind or the background. Make the original graphics wider and taller than the area you want viewable, so that you can position them relative to your desired area without the edges showing when the scene shifts. To achieve the horizontal parallax effect, make the 'width' of the root SVG element a percentage as well (100% works fine) and omit the 'viewBox' attribute (note that the graphics are then no longer scalable when used in HTML, so size them the desired size to begin with). To complete the image, make a clipping path that trims out the edges of the graphics that should be hidden.
To use this in HTML, use an <object> element that also uses a percentage for the width. As usual, for browsers that don't support SVG (only Internet Explorer at this point, and older versions of other browsers), I've provided a fallback PNG image inside the <object> element, so that the page degrades gracefully.
In the simple example image above, I used a fixed (absolute) position for the sun and sky in the background, then increasing percentage offsets for the mountain layer, the ground and forest layer, and the town layer.