Snowbridge Parallax

A Simple Parallax Plugin

Responsive Parallax Sections

Snowbridge is a 100% responsive and CSS3 transition driven parallax plugin. Ideal for highlighting key information or full sections.

Resource Files

Snowbridge requires the following resource files:

									<link rel="stylesheet" href="css/snowbridge.css" />
									<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
									<script type="text/javascript" src="js/"></script>

Parallax Image

Snowbridge requires that the parallax image be specified using the data-src attribute on the parallax wrapper. An initial height for the parallax section should be added to the class used for the parallax section. For illustrative purposes only it has been added as an inline style. Optionally use the classes .tmp-content and .tmp-content-inner to center content within a parallax section.

Parallax captions or content can be horizontally aligned using text aligning classes such as .left, .center, .right and vertically aligned by applying vertical align classes such as .v-align-top and .v-align-bottom. These classes should be applied to the .tmp-content-inner wrapper.



Important: If retina is supported (i.e. retinaSupport = true ), two images must be provided, the original and the retina version. For example, if your parallax image is named "parallax-image.jpg", the corresponding retina version should be named "[email protected]" using the @2x suffix. Also ensure that the retina version should is twice the size of the original image.

Initializing Snowbridge

Plugin Parameters

Snowbridge Usage

To call the Snowbridge Plugin on one or multiple elements the following call should be added before the closing body tag on document ready.

									$( document ).ready( function({
										$( '.parallax' ).snowbridge();
Attribute Values Default Description
fullscreen boolean false Forces parallax sections to take width and height of viewport
parallaxFactor integer 0.6 Sets the parallax speed
fadeInOut boolean true Determines whether parallax sections should fade in/out when entering/exiting the viewport
fadeThreshold integer 0.5 Determines the threshold for how long the fade transition should occur i.e. 0.5 represents 50% of the parallax section height
scaleContainer boolean true Determines if the parllax container should scale or not
scaleUnder integer 1140 Width under which parallax section should start scaling
retinaSupport boolean true Whether plugin should serve retina images for retina displays. Affects all images. Alternatively us the data-retina attribute on the wrapper div to serve retina version of that particular image.
retinaSupportMobile boolean false Whether the plugin should swap images on mobile retina enabled devices. Set to false by default to save bandwidth usage on mobile devices.
retinaSuffix string '@2x' The suffix that will be added to the image url.

That's All Folks

Theme Mountain

Current Version