Parallax Scrolling (Element Relative) Recipe

This Recipe creates the settings needed for parallax scrolling -- scrolling a background image at a different speed than the rest of the page.

Unlike the Parallax Scrolling (Page Relative) Recipe, calculations are performed based on the scroll position of an element within webpage, rather than the scroll position of the webpage itself.

Options

Animated Element ID: the ID of the element whose CSS properties are going to be controlled to create the parallax effect. If you are going ot use this Recipe in the usual way, this will be the ID of a DIV which uses the image to be scrolled as its background.
Reference Element ID: the ID of the element whose scroll position you wish to key off of to control the scroll position of the image. This will often be the same as the Animated Element ID.
Tweening Stops: the numbers used to control how fast the background image will scroll. See the documentation of the Tweening Action for a detailed explanation.

CSS Code

In addition to the JavaScript code generated by TriggerNote, parallax scrolling requires some CSS. If you are going to use this Recipe as originally designed, you'll need something similar to the following in the <head> section of your webpage, or in your stylesheet file.

<style type="text/css">
#ParallaxImageContainer {
	background-image:url(your-background-image.jpeg);
	background-position:0 110%;
	background-size:cover;
	height:30vw;
}
</style>

The second number in the "background-position" setting ("110%" in this example), should match the value in your first Tweening Stop.

The purpose of "height:30vw;" is to keep the aspect ratio of the container element constant, regardless of the browser window width. "30vw" means "30% of the viewport (browser) width." If the container element on your page does not span the full width of the browser window, you'll want to remove this line or specify the height in some other way.