The NEW options include ...
- parallax object position mode - left or right of the window viewport or WB page center abide
- parallax object position offset
- loop outside viewport - includes both parallax modes object and background mode
- parallax object position mode - left or right of the window viewport or WB page center abide
- parallax object position offset
- loop outside viewport - includes both parallax modes object and background mode
EXPLAIN ?
module | parallax properties can be used to create an Illusion of depth by making objects travel at different speed or
direction versus window scroll, or mouse movement
module | parallax combines 3 parallax modes - 01. background image - 02. object - 03. plaxify
parallax occurs on window scroll, plaxify occurs on mouse movement
module | parallax properties can be used to create an Illusion of depth by making objects travel at different speed or
direction versus window scroll, or mouse movement
module | parallax combines 3 parallax modes - 01. background image - 02. object - 03. plaxify
parallax occurs on window scroll, plaxify occurs on mouse movement
CONTROLLING PARALLAX
NEW - in JMPv3.0 b5.3
Settings for module | parallax - mode parallax - can now also be set programmable to gain even more control
Use jQuery data to get and set options ... jQuery data ( ) .data('jorparallax')
example:
$(selector).data('jorparallax').minX = function () {return myValue};
some of the data() set options:
enableVertical
enableHorizontal
staticSpeed
staticSpeedX
pos
offset
NEW - in JMPv3.0 b5.3
Settings for module | parallax - mode parallax - can now also be set programmable to gain even more control
Use jQuery data to get and set options ... jQuery data ( ) .data('jorparallax')
example:
$(selector).data('jorparallax').minX = function () {return myValue};
some of the data() set options:
enableVertical
enableHorizontal
staticSpeed
staticSpeedX
pos
offset
Use module | onscroll for that precise pixel perfect parallax control - (and much much more)
And use module | parallax for a more robust parallax approach
And use module | parallax for a more robust parallax approach
CONTROLLING PLAXIFY
Enabling and Disabling the plaxified objects GLOBAL can be done with the following functions
DISABLE
$.plax.disable() = disable plaxify global
ENABLE (+OPTIONAL ACTIVITY TARGET)
$.plax.enable() = enable plaxify global
$.plax.enable({'activityTarget':$(window)}) = enable plaxify global with activity target
Enabling and Disabling the plaxified objects GLOBAL can be done with the following functions
DISABLE
$.plax.disable() = disable plaxify global
ENABLE (+OPTIONAL ACTIVITY TARGET)
$.plax.enable() = enable plaxify global
$.plax.enable({'activityTarget':$(window)}) = enable plaxify global with activity target
__________________________________________________________________________
more info on module | parallax see here Properties
more info on module | parallax see here Online Tutorials
credits: john raasch + cameron mcefee
more info on module | parallax see here Properties
more info on module | parallax see here Online Tutorials
credits: john raasch + cameron mcefee
advanced!
MODULE PARALLAX - OVERVIEW
b5.3
b5.3
Parallax 3D Illusion
PLUGIN
WHAT IS A PARALLAX ?
Pffff ... what is a parallax ...
How to use module | parallax is as easy as it is as difficult to explain
It is as easy as targeting an object and setting the scroll speed and/or direction (or range for plaxify)
But how to setup a scenario for the objects to create a desired parallax effect can be difficult to grasp
Actually there are no fixed rules for creating a parallax
A parallax is the illusion of depth created by objects traveling at a different pace or direction seen from a fixed angle
That is what is created on a screen anyway, in "real" life a parallax can be quite the opposite, there are many parallaxes
It can be a fixed object that appears to travel by changing the angle of viewport
The reason we experience parallaxes is because what our eye(s) sees the brain constantly adjust to interpret the depth it sees
The easiest way to experience a parallax is to put up a finger, vertical, focus it on an object in your room,
close one eye, move your head from side to side, your finger appears to be moving, traveling, that's a parallax
Now do the same but instead of moving your head, close your left and right eye in turn, the viewpoint changes, your finger jumps
Now do the same but move your finger closer or further from your head, the further away, the smaller the finger jumps
That is a parallax ...
Pffff ... what is a parallax ...
How to use module | parallax is as easy as it is as difficult to explain
It is as easy as targeting an object and setting the scroll speed and/or direction (or range for plaxify)
But how to setup a scenario for the objects to create a desired parallax effect can be difficult to grasp
Actually there are no fixed rules for creating a parallax
A parallax is the illusion of depth created by objects traveling at a different pace or direction seen from a fixed angle
That is what is created on a screen anyway, in "real" life a parallax can be quite the opposite, there are many parallaxes
It can be a fixed object that appears to travel by changing the angle of viewport
The reason we experience parallaxes is because what our eye(s) sees the brain constantly adjust to interpret the depth it sees
The easiest way to experience a parallax is to put up a finger, vertical, focus it on an object in your room,
close one eye, move your head from side to side, your finger appears to be moving, traveling, that's a parallax
Now do the same but instead of moving your head, close your left and right eye in turn, the viewpoint changes, your finger jumps
Now do the same but move your finger closer or further from your head, the further away, the smaller the finger jumps
That is a parallax ...
Some simple examples to get an idea of the concept
••• EXAMPLES
01. Vertical parallax background image on a WB Image1 object
identifier : my parallax notes
selector : #wb_Image1
mode : parallax background image
...
parallax | vertical | enable : true
parallax | vertical | speed : 2
...
parallax | horizontal | enable : false
...
parallax | bg | width : 100
parallax | bg | height : 150
parallax | bg | repeat : false
...
run on load : true
run on call : Call_Parallax_1
...
The WB Image1 is stretched to 100% width, 150% height, set as a background image
And at page scroll will scroll twice as fast as a window scroll
••• EXAMPLES
01. Vertical parallax background image on a WB Image1 object
identifier : my parallax notes
selector : #wb_Image1
mode : parallax background image
...
parallax | vertical | enable : true
parallax | vertical | speed : 2
...
parallax | horizontal | enable : false
...
parallax | bg | width : 100
parallax | bg | height : 150
parallax | bg | repeat : false
...
run on load : true
run on call : Call_Parallax_1
...
The WB Image1 is stretched to 100% width, 150% height, set as a background image
And at page scroll will scroll twice as fast as a window scroll
02. Vertical parallax object on a WB Image1 object
identifier : my parallax notes
selector : #wb_Image1
mode : parallax object
...
parallax | vertical | enable : true
parallax | vertical | speed : 2
...
parallax | horizontal | enable : false
...
parallax | object | offset : 0
parallax | object | z-index : false
parallax | object | position : center
...
run on load : true
run on call : Call_Parallax_1
...
The WB Image1 at page scroll will scroll twice as fast as a window scroll and abides WB page centering
identifier : my parallax notes
selector : #wb_Image1
mode : parallax object
...
parallax | vertical | enable : true
parallax | vertical | speed : 2
...
parallax | horizontal | enable : false
...
parallax | object | offset : 0
parallax | object | z-index : false
parallax | object | position : center
...
run on load : true
run on call : Call_Parallax_1
...
The WB Image1 at page scroll will scroll twice as fast as a window scroll and abides WB page centering
03. Plaxify on a WB Image1 object
identifier : my parallax notes
selector : #wb_Image1
mode : plaxify
...
plaxify | range X : 100
plaxify | range Y : 200
plaxify | reverse : true
plaxify | activity target : document
...
run on load : true
run on call : Call_Parallax_1
...
The WB Image1 will move in opposite direction of the mouse movement in a range of horizontal 100 pixels and vertical 200 pixels
As these examples demonstrates very simple to setup ... just experiment!
More complex structures can be created by combining module | parallax with ie. module | reposition and module | scroll
WARNING: combinations with other modules may create unsuspected behavior
identifier : my parallax notes
selector : #wb_Image1
mode : plaxify
...
plaxify | range X : 100
plaxify | range Y : 200
plaxify | reverse : true
plaxify | activity target : document
...
run on load : true
run on call : Call_Parallax_1
...
The WB Image1 will move in opposite direction of the mouse movement in a range of horizontal 100 pixels and vertical 200 pixels
As these examples demonstrates very simple to setup ... just experiment!
More complex structures can be created by combining module | parallax with ie. module | reposition and module | scroll
WARNING: combinations with other modules may create unsuspected behavior
b5.6
THE PROBLEM
A plaxified object is positioned once at page load, and then uses the top and left attributes to create it's plaxify effect
In a RWD design an object can have a different position or dimension in each breakpoint
This can make it difficult to get a consistent behavior, - in JMPv3.0 b5.6 a new plaxify | rwd mode option is available
This option changes the manner in which a plaxified object is positioned
A plaxified object is positioned once at page load, and then uses the top and left attributes to create it's plaxify effect
In a RWD design an object can have a different position or dimension in each breakpoint
This can make it difficult to get a consistent behavior, - in JMPv3.0 b5.6 a new plaxify | rwd mode option is available
This option changes the manner in which a plaxified object is positioned
b5.6
PLAXIFY RWD MODE ?
LEFT - HORIZONTAL - POSITION
If plaxify | rwd mode is enabled the plaxified object is not positioned horizontal as it is positioned in our WB project
Instead the object is always re-positioned at center - (parent center)
The input can be a positive or negative number value, creating an offset to the right or left of it's center
TOP - VERTICAL - POSITION
The top position of the object does take the top as it is positioned in our WB project
It is therefore IMPORTANT to position the plaxified object at the same position in each breakpoint that is used
" The plaxified object is positioned once at page load, it's point of entry is therefore it's point of reference in each breakpoint " !
TOP VERSUS DIMENSION
An object in a RWD design can also have a different dimension, which changes the position of the object
The plaxify | rwd mode allows a plaxified object to have a different dimension
- It is IMPORTANT to set the position of the object in each breakpoint at the same position
The position we have to abide however is NOT the top of the object but the BOTTOM of the object
LEFT - HORIZONTAL - POSITION
If plaxify | rwd mode is enabled the plaxified object is not positioned horizontal as it is positioned in our WB project
Instead the object is always re-positioned at center - (parent center)
The input can be a positive or negative number value, creating an offset to the right or left of it's center
TOP - VERTICAL - POSITION
The top position of the object does take the top as it is positioned in our WB project
It is therefore IMPORTANT to position the plaxified object at the same position in each breakpoint that is used
" The plaxified object is positioned once at page load, it's point of entry is therefore it's point of reference in each breakpoint " !
TOP VERSUS DIMENSION
An object in a RWD design can also have a different dimension, which changes the position of the object
The plaxify | rwd mode allows a plaxified object to have a different dimension
- It is IMPORTANT to set the position of the object in each breakpoint at the same position
The position we have to abide however is NOT the top of the object but the BOTTOM of the object
320
800
DEFAULT
Diagram plaxify | rwd mode
This Diagram shows how the plaxify | rwd mode functions in a RWD setup
The plaxified object is centered (additional sets an offset) in each breakpoint
The bottom of the object is positioned the same in each break point, rwd mode automatically adjust the object into position
- It is IMPORTANT that the BOTTOM position is the same in each breakpoint
"The plaxified object is positioned once at page load, it's point of entry is therefore it's point of reference in each breakpoint"
The plaxified object is centered (additional sets an offset) in each breakpoint
The bottom of the object is positioned the same in each break point, rwd mode automatically adjust the object into position
- It is IMPORTANT that the BOTTOM position is the same in each breakpoint
"The plaxified object is positioned once at page load, it's point of entry is therefore it's point of reference in each breakpoint"
NEW - in JMPv3.0 b5.6
From JMPv3.0 b5.6 on it is now also possible to disable and enable a single plaxified object, use the following function
TRACK DISABLE
$.plax.track({id:'selector(s)',track:false}) = track disable single plaxify
$.plax.track({id:'selector(s)',track:-1}) = track disable single plaxify + reset position
TRACK ENABLE
$.plax.track({id:'selector(s)',track:true}) = track enable single plaxify
NOTE:
• the above global $.plax.enable/disable fn can be used at the same time
• if global enable/disable is used a track disabled plaxify remains disabled until track enabled
• multiple selectors can be used in a single track fn call - exmp: selector1,selector2,selector3
From JMPv3.0 b5.6 on it is now also possible to disable and enable a single plaxified object, use the following function
TRACK DISABLE
$.plax.track({id:'selector(s)',track:false}) = track disable single plaxify
$.plax.track({id:'selector(s)',track:-1}) = track disable single plaxify + reset position
TRACK ENABLE
$.plax.track({id:'selector(s)',track:true}) = track enable single plaxify
NOTE:
• the above global $.plax.enable/disable fn can be used at the same time
• if global enable/disable is used a track disabled plaxify remains disabled until track enabled
• multiple selectors can be used in a single track fn call - exmp: selector1,selector2,selector3
b5.6
NEW IN BUILD 5.6
01. NEW-ENHANCED
• plaxify rwd mode
02. NEW
• plaxify external fn track disable and enable
02. NEW
• new option - plaxify animate (duration and easing)
01. NEW-ENHANCED
• plaxify rwd mode
02. NEW
• plaxify external fn track disable and enable
02. NEW
• new option - plaxify animate (duration and easing)
5
NEW - in JMPv3.0 build 5.3
Almost a complete rewrite of module | parallax has been made in JMPv3.0 b5.3
The parallax mode now has many of the same functionality as module | onscroll - they now very much complement each other
Almost a complete rewrite of module | parallax has been made in JMPv3.0 b5.3
The parallax mode now has many of the same functionality as module | onscroll - they now very much complement each other
NEW - in JMPv3.0 build 5.6 - PLAXIFY RWD MODE