TriggerNote Documentation
TriggerNote Documentation
twitter youtube linkedin google-plus

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.


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-position:0 110%;

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.