Create super fast parallax effects using data attributes.
- written in native Javascript for best performance
- uses translate3d to ensure GPU acceleration
- uses single ticking requestAnimationFrame() method
- uses HSV color model for color interpolation
- intuitive default values, no need to type many parameters
yarn add jquery-data-parallax
yarn install<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/jquery.requestAnimationFrame/jquery.requestAnimationFrame.min.js"></script>
<script src="node_modules/jquery-data-parallax/jquery.data-parallax.min.js"></script>Either use data attributes:
<div data-parallax='{"y":"70%","scale":2,"rotate":180,"opacity":0}'></div>or javascript:
$("#selector").parallax({
"y": "70%",
"scale": 2,
"rotate": 180,
"opacity": 0
});All properties can be specified as number or string or object.
Using the object syntax you can explicitly pass in a from value (optional), as well as override global options:
<div data-parallax='{"opacity":{"to":1,"from":0.5,"duration":100},"translateY":"50%","duration":200}'></div>Type: boolean or selector
Make an elements' position fixed during the scene.
Type string
Adds one or more classes to the element during the scene.
Type: number or string (percentage or viewport units)
translateX. Percentages in this case are relative to the duration.
Type: number or string (percentage or viewport units)
translateY. Percentages in this case are relative to the duration.
Type: number or string (percentage or viewport units)
translateZ. Percentages in this case are relative to the duration.
Type: number or string (percentage)
Type: number or string (percentage)
Rotation in degrees.
Type: string (e.g. "#ff0000")
Hex or rgb() color string.
Type: string (e.g. "#ff0000")
Hex or rgb() color string.
Type: number (0 - 1)
Type: number or string (percentage or viewport units)
Better use "y" where possible.
Type: number or string (percentage or viewport units)
Better use "x" where possible.
Type: number or string (percentage or viewport units)
Better use "scaleX" where possible.
Type: number or string (percentage or viewport units)
Better use "scaleY" where possible.
Type: number or string (percentage or viewport units)
Better use "x" where possible.
Type: number or string (percentage or viewport units)
Better use "y" where possible.
Options can be specified for all properties:
<div data-parallax='{"y":"70%","opacity":1,"duration":"150%"}'></div>as well as (overridden) for each individually:
<div data-parallax='{"y":"70%","opacity":{"to":1,"duration":"85%"},"duration":"150%"}'></div>All options are optional.
Type: number or string (percentage or viewport units) or callback function
Default: 0
If you need to start the scene on an absolute offset or after/before "triggerElement"'s offset.
Type: number or string (percentage or viewport units) or callback function
Default: as long as it's needed to scroll past the element
Percentages are calculated against element dimensions rather than viewport: "50%" == 0.5 * $(el).outerWidth(true).
For viewport relative values, use viewport units: vh or vw: "100vh" == $(window).height().
Setting duration to "0" will run it till the end of document.
Type: selector
Default: the element
Use this if you need another element to act as the trigger. It's not recommended to set this to "null" or "false", because working with absolute offsets can become difficult when you need to change things.
Type: number or string (percentage or viewport units) or callback function
Default: "100%" ("0%" for "pin" property)
0% is top of the viewport and 100% is bottom of the viewport.
Type: string or callback function
Default: "linear"
Type: string ("x" or "y")
Default: "y"
Type: boolean
Default: false
This is per element / selector option.
Type: boolean
Default: false
By default [data-parallax] is disabled on touch devices. To make it work add after including the js file:
$.parallax.enableTouchDevices = true;This plugin was inspired from Parallax Done Right and Perfecting Parallax Scrolling