Class: Parallax

Responsiville. Parallax

A parallax behaviour is materialised when an element is watched as the browser window scrolls by it and, either some property of the element itself or some other element is changed, in relation to the browser scroll events. Usually this behaviour starts to take effect when the watched element becomes visible in the browser viewport and is completed when the element leaves the browser viewport.

new Responsiville.Parallax(options)

Creates and initialises the parallax behaviour.
Name Type Description
options Object The initialisation options of the module.
Properties:
Name Type Description
options Object The options that define the object behaviour.
Properties
Name Type Description
debug boolean Whether to print debug messages in the browser console.
slug boolean A special codename for the instance of the element, to be used as a class on its container and as a key in arrays where it is grouped with other elements of its kind.
watch string The element to watch. This is the element which is watched by the module as it enters, crosses and eventually leaves the viewport. The parallax effect starts when the watched element enters the viewport and finishes when the watched element leaves the viewport.
properties Object In the case where the parallaxed element is the watched element itself this associative array represents the CSS properties of it that will be affected by the parallax effect and their initial and final values.
elements Object In the case where the parallaxed element(s) are different from the watched element this associative array represents these elements along with their CSS properties which are to be affected by the parallax effect. It may be either a single element or an array of elements.
throttle integer Duration in milliseconds to throttle the scroll event, so that the modulescroll callbacks are not called on each and every browser scroll event.
duration integer The duration of the animation of the transition of the CSS properties that are to be parallaxed.
offsetTop integer How much to delay the parallax effect in terms of space, after the watched element has appeared in the browser viewport.
offsetBottom integer How much to make completion faster in terms of space for the parallax effect.
onAppear mixed Function callback to trigger or class to add when the watched element appears in the browser viewport.
onDisappear mixed Function callback to trigger or class to add when the watched element disappears from the browser viewport.
runOnce boolean If true, then the what the parallax functionality will only run once as the user scrolls up and down the and will not be reversed or run again after it has completed. Defaults to false.
enter string Comma separated list of breakpoints in which the parallax enters, which means it is enabled.
leave string Comma separated list of breakpoints in which the parallax leaves, which means it is disabled.
Author:
  • Nevma, info@nevma.gr
License:
  • Nevma Copyright (c) http://www.nevma.gr
Fires:

Extends

Members

staticResponsiville.Parallax.AUTO_RUN

Properties:
Name Type Description
AUTO_RUN boolean Controls whether this module should run by default, without the developer calling it, using its default settings. Defaults to true.

staticResponsiville.Parallax.defaults

Properties:
Name Type Description
defaults Object Default values for this module settings.

Methods

staticResponsiville.Parallax.autoRun(){void}

Runs through the page and searches for elements that apply to the current module in order to apply it to them automatically. Useful for automatically creating elements with this module's behaviour just by setting up the predefined classes and data attributes in HTML elements of the page.
Returns:
Type Description
void

calculate(){void}

Calculates viewport and watched element dimensions and whereabouts so it is prepared to do calculations for the parallax effects.
Returns:
Type Description
void
Disables the parallax. It does not deactivate it. It simply disables it, so it does not function any more when the necessary trigger is fired. Useful in responsive design where the parallax might be a required feature in desktops but useless in mobile devices.
Fires:
Returns:
Type Description
void
Enables the parallax. It does not activate it. It simply enables it, so when the necessary trigger is fired then the parallax behaviour begins. Useful in responsive design where the parallax might be a required feature in desktops but useless in mobile devices .
Fires:
Returns:
Type Description
void

offsetTopTotal(The){int}

Calculates an element's total offsetTop distance, by recursively ascending to all its posistioned parents up to the root element. This is specifically not equivalent to jQuery's offset() function because that function takes into account any CSS transforms that might have been set on the element.
Name Type Description
The Element element whose total offsetTop to calculate.
Returns:
Type Description
int The total offsetTop of the given element.
Runs on window scroll, when the parallax behaviour is enabled, and makes sure that the parallax behaviour is materialised as dictated in the given initialisation settings.
Fires:
Returns:
Type Description
void

setupEvents(){void}

Sets up event handlers necessary for the object to function properly.
Returns:
Type Description
void

Events

Called after the parallax scroll has been disabled.
Called after the parallax scroll has been enabled.
Called after the parallax has been created.
Called after the parallax scroll has run.
Called before the parallax scroll runs.