animate | break on
with the animate | break on property we can set the amount of animations to occur for the selected object
module | onscroll allows 4 animations per object per page
see more info on the architecture of module | onscroll here
animate | auto height
setting this property to true enables automatic scroll height
the document will auto adjust it's height to fit the amount of scrolled animation
disabling can be useful if the scrolled object is animated near the bottom of our design ie. a vertical top out animation
NOTE: auto height is set for this object (for all 4 animations)
animate | horizontal scroll
module | onscroll repositions each object into a fixed window position
with this property we can enable the repositioned object to abide the horizontal scrollbar
•••• var: non-string
ANIMATE 1:
1 | scroll start
scroll start sets the position of the top scrollbar that activates the 1st animation
this scroll start is the first and only actual start position of the animated timeline
each subsequent starting point occurs in sequence to this start point
NOTE: the input can be a number value, jQuery object, calculation, function or predefined command
predefined command:
com:mark=Bookmark1/0 = use an absolute positioned object as target (by id)
the TOP START POSITION of the scrolled object becomes the threshold
set an additional offset after the slash (neg/pos)
com:markE=Bookmark1/0 = use an absolute positioned object as target (by id)
the TOP END POSITION of the scrolled object becomes the threshold
set an additional offset after the slash (neg/pos)
com:marklimit=Bookmark1/0 = use an absolute positioned object as target (by id)
an invisible line, limit, becomes the threshold
the limit is set after the slash (neg/pos)
com:markenter=Bookmark1/0 = use an absolute positioned object as target (by id)
the point of viewport entry of the mark becomes the threshold
set an additional offset after the slash (neg/pos)
see more info on the architecture of module | onscroll here
•••• var: function
1 | scroll duration
scroll duration is the amount of pixels the top scrollbar scrolls from start to end of the animation
the speed of the animation is determined by the distance the object travels in relation to the duration
NOTE: the input can be a number value, jQuery object, calculation, function or predefined command
predefined command:
com:staticT=0 or 2% = object scrolls with same speed as page - vertical
set optional offset duration (neg/pos) in pixel or percentage mode
com:staticL=0 or 2% = object scrolls with same speed as page - horizontal
set optional offset duration (neg/pos) in pixel or percentage mode
com:mark=Bookmark1/0 = use an absolute positioned object as target (by id)
the TOP START POSITION of the scrolled object becomes the threshold
set an additional offset after the slash (neg/pos)
com:markE=Bookmark1/0 = use an absolute positioned object as target (by id)
the TOP END POSITION of the scrolled object becomes the threshold
set an additional offset after the slash (neg/pos)
com:marklimit=Bookmark1/0 = use an absolute positioned object as target (by id)
an invisible line, limit, becomes the threshold
the limit is set after the slash (neg/pos)
com:markenter=Bookmark1/0 = use an absolute positioned object as target (by id)
the point of viewport entry of the mark becomes the threshold
set an additional offset after the slash (neg/pos)
see more info on the architecture of module | onscroll here
•••• var: function
1 | position | LEFT start
set the left start position of the object
NOTE: the input can be a number value, jQuery object, calculation, function or predefined command
predefined command:
com:left=100 = start the object on 100px left of the window viewport
com:left=c100 = start the object on 100px left relative to a WB centered page
if page center is enabled
else the object is positioned at 100px left of the window viewport
com:left=C100 = new in JMPv3.0 b5.6 the command capital C
the object is positioned at page center and a pos/neg value can be set to
position the object left/right of center
com:left=out = start the object far left, outside the window viewport
com:left=self = start the object at the left as is positioned in WB
WARNING:
the command self should NOT be used in combination with RWD design
the command self is not dynamic
it's point of entry (breakpoint) becomes it's point of origin
com:right=-50 = start the object minus 50px from the right side of the window viewport
com:right=out = start the object far right, outside the window viewport
see more info on the architecture of module | onscroll here
•••• var: function
1 | position | LEFT end
set the left end position of the object
NOTE: the input can be a number value, jQuery object, calculation, function or predefined command
predefined command:
com:left=100 = end the object on 100px left of the window viewport
com:left=c500 = end the object on 500px left relative to a WB centered page
if page center is enabled
else the object is positioned at 500px of the window viewport
com:left=C100 = new in JMPv3.0 b5.6 the command capital C
the object is positioned at page center and a pos/neg value can be set to
position the object left/right of center
com:left=out = end the object far left, outside the window viewport
com:left=self = end the object at the left as is positioned in WB
WARNING:
the command self should NOT be used in combination with RWD design
the command self is not dynamic
it's point of entry (breakpoint) becomes it's point of origin
com:right=-50 = end the object minus 50px from the right side of the window viewport
com:right=out = end the object far right, outside the window viewport
see more info on the architecture of module | onscroll here
•••• var: function
1 | position | TOP start
set the top start position of the object
NOTE: the input can be a number value, jQuery object, calculation, function or predefined command
predefined command:
com:top=100 = start the object on 100px top of the window viewport
com:top=out = start the object far top, outside the window viewport
com:top=self = start the object at the top as is positioned in WB
WARNING:
the command self should NOT be used in combination with RWD design
the command self is not dynamic
it's point of entry (breakpoint) becomes it's point of origin
com:bottom=-50 = start the object minus 50px from the bottom of the window viewport
com:bottom=out = start the object far bottom, outside the window viewport
see more info on the architecture of module | onscroll here
•••• var: function
1 | position | TOP end
set the top end position of the object
NOTE: the input can be a number value, jQuery object, calculation, function or predefined command
predefined command:
com:top=100 = end the object on 100px top of the window viewport
com:top=out = end the object far top, outside the window viewport
com:top=self = end the object at the top as is positioned in WB
WARNING:
the command self should NOT be used in combination with RWD design
the command self is not dynamic
it's point of entry (breakpoint) becomes it's point of origin
com:bottom=-50 = end the object minus 50px from the bottom of the window viewport
com:bottom=out = end the object far bottom, outside the window viewport
see more info on the architecture of module | onscroll here
•••• var: function
1 | fade mode
set the fade mode of the object or disable
fadein = fade in
fadeout = fade out
none = fade is not used
•••• var: string
1 | callback | on scroll
add a new function on animation scroll
the callback function in full range is beyond the scope of this manual
for an in depth on callback and run on call see here - see also here
• fn: callEnter1: function (id,scroll,duration) { }
id = returns the id/(selector) of the current object - exm. #Layer1
scroll = returns a nullified scrollbar position
duration = returns the duration of the current animation
ANIMATE 2:
2 | scroll delay
scroll delay sets the delay time before the top scroll position activates the next animation
NOTE: the input can be a number value, jQuery object, calculation, function or predefined command
predefined command:
com:mark=Bookmark1/0 = use an absolute positioned object as target (by id)
the TOP START POSITION of the scrolled object becomes the threshold
set an additional offset after the slash (neg/pos)
com:markE=Bookmark1/0 = use an absolute positioned object as target (by id)
the TOP END POSITION of the scrolled object becomes the threshold
set an additional offset after the slash (neg/pos)
com:marklimit=Bookmark1/0 = use an absolute positioned object as target (by id)
an invisible line, limit, becomes the threshold
the limit is set after the slash (neg/pos)
com:markenter=Bookmark1/0 = use an absolute positioned object as target (by id)
the point of viewport entry of the mark becomes the threshold
set an additional offset after the slash (neg/pos)
see more info on the architecture of module | onscroll here
•••• var: function
2 | scroll duration
scroll duration is the amount of pixels the top scrollbar scrolls from start to end of the animation
the speed of the animation is determined by the distance the object travels in relation to the duration
NOTE: the input can be a number value, jQuery object, calculation, function or predefined command
predefined command:
com:staticT=0 or 2% = object scrolls with same speed as page - vertical
set optional offset duration (neg/pos) in pixel or percentage mode
com:staticL=0 or 2% = object scrolls with same speed as page - horizontal
set optional offset duration (neg/pos) in pixel or percentage mode
com:mark=Bookmark1/0 = use an absolute positioned object as target (by id)
the TOP START POSITION of the scrolled object becomes the threshold
set an additional offset after the slash (neg/pos)
com:markE=Bookmark1/0 = use an absolute positioned object as target (by id)
the TOP END POSITION of the scrolled object becomes the threshold
set an additional offset after the slash (neg/pos)
com:marklimit=Bookmark1/0 = use an absolute positioned object as target (by id)
an invisible line, limit, becomes the threshold
the limit is set after the slash (neg/pos)
com:markenter=Bookmark1/0 = use an absolute positioned object as target (by id)
the point of viewport entry of the mark becomes the threshold
set an additional offset after the slash (neg/pos)
see more info on the architecture of module | onscroll here
•••• var: function
2 | position | LEFT end
set the left end position of the object
NOTE: the input can be a number value, jQuery object, calculation, function or predefined command
predefined command:
com:left=100 = end the object on 100px left of the window viewport
com:left=c500 = end the object on 500px left relative to a WB centered page
if page center is enabled
else the object is positioned at 500px of the window viewport
com:left=C100 = new in JMPv3.0 b5.6 the command capital C
the object is positioned at page center and a pos/neg value can be set to
position the object left/right of center
com:left=out = end the object far left, outside the window viewport
com:left=self = end the object at the left as is positioned in WB
WARNING:
the command self should NOT be used in combination with RWD design
the command self is not dynamic
it's point of entry (breakpoint) becomes it's point of origin
com:right=-50 = end the object minus 50px from the right side of the window viewport
com:right=out = end the object far right, outside the window viewport
see more info on the architecture of module | onscroll here
•••• var: function
2 | position | TOP end
set the top end position of the object
NOTE: the input can be a number value, jQuery object, calculation, function or predefined command
predefined command:
com:top=100 = end the object on 100px top of the window viewport
com:top=out = end the object far top, outside the window viewport
com:top=self = end the object at the top as is positioned in WB
WARNING:
the command self should NOT be used in combination with RWD design
the command self is not dynamic
it's point of entry (breakpoint) becomes it's point of origin
com:bottom=-50 = end the object minus 50px from the bottom of the window viewport
com:bottom=out = end the object far bottom, outside the window viewport
see more info on the architecture of module | onscroll here
•••• var: function
2 | fade mode
set the fade mode of the object or disable
fadein = fade in
fadeout = fade out
none = fade is not used
•••• var: string
2 | callback | on scroll
add a new function on animation scroll
the callback function in full range is beyond the scope of this manual
for an in depth on callback and run on call see here - see also here
• fn: callEnter2: function (id,scroll,duration) { }
id = returns the id/(selector) of the current object - exm. #Layer1
scroll = returns a nullified scrollbar position
duration = returns the duration of the current animation
ANIMATE 3 + 4:
NOTE animate 3 and 4 are a repeat of animate 2
-----
run on load
run on load enables or disables this module to run on page load
run on call
run on call is the function name we can give this current function
we can call this function to occur ie. by using a callback | function
for an in depth on callback and run on call see here
code modification | variable
add function variables ie. Call_OnScroll_1(myVariable)
this function is beyond the scope of this manual see here
code modification | javascript | after
add javascript, further enhancing this function by adding custom code
this function is beyond the scope of this manual see here
code modification | javascript | before
add javascript, further enhancing this function by adding custom code
this function is beyond the scope of this manual see here
__________________________________________________________________________
more info on module | onscroll see here Overview Enter
more info on module | onscroll see here Overview Animator
more info on module | onscroll see here Global Disable
more info on module | onscroll see here Custom Fx
more info on module | onscroll see here Online Tutorials
MODULE ONSCROLL - PROPERTIES
b5.1
identifier
1. identifier is used to write down notes of animations, actions and anything we find important to make note of
identifier is a visual reference
2. identifier also provides a quick overview of the function structure flow
STRUCTURE: function (e) { javascript before - init - callback - javascript after }
selector
target an object by id (#) or class (.) or element
the full range on selectors is beyond the scope of this manual
for an in depth on selectors simplified see here
•••• var: string
onscroll | mode
set module | onscroll mode to operate in, 2 modes are available - 01. ANIMATOR and 02. ENTER
from JMPv3.0 b5.4 on module | onscroll consists of 2 modes
ANIMATOR = object is repositioned in fixed position then animates along setup of rules/commands
ENTER = object retains absolute position and animates into the window viewport, target execute
(jquery fade or CSS3 animation)
global disable | ignore
from JMPv3.0 b5.4 on module | onscroll functions can global be disabled for touch devices
each onscroll function however can also be set to ignore the onscroll global disable function
true = ignore global disable
false = abide global disable and the object remains visible
-1 = abide global disable and the object is removed
see more info here
•••• var: non-string
enter | mode
set the effect mode for the object to enter the window viewport by, - 3 modes are available
JQUERY FADE = object animates into the window viewport by - jquery animation (fadein)
ANIMATE.CSS = object animates into the window viewport by - animate.css CSS3 animation
WB CSS3 ANIMATION = object animates into the window viewport by - WB CSS3 animation setup
•••• var: string
enter | once
set the amount of times the animation will execute, once (true), always (false) or a number for the amount of times to execute
•••• var: non-string
enter | offset
set position enter offset in percentage
offset the moment (delay) on which an animation activates inside the window viewport
•••• var: non-string
enter | duration
set the effect duration
NOTE: from JMPv3.0 b5.6 on the duration applies to all effect modes jquery fade, animate.css and WB CSS3 animation
•••• var: non-string
enter | easing
easing effect will add non-linear movement to animation, movement like acceleration, deceleration etc
the full list of easing effects is:
ease, ease-in, ease-out, ease-in-out
circ-in, circ-out, circ-in-out
cubic-in, cubic-out, cubic-in-out
elas-in, elas-out, elas-in-out
expo-in, expo-out, expo-in-out
quad-in, quad-out, quad-in-out
quart-in, quart-out, quart-in-out
quint-in, quint-out, quint-in-out
sine-in, sine-out, sine-in-out
linear
NOTE: for a reference on easing effect see here
NOTE: this setting applies to CSS3 animation only
•••• var: string
enter | visibility
set the visibility state of the object entering the viewport hidden or visible or visible static
this important property is used in combination with the enter | mode and the enter | offset property
see more info into this property here
•••• var: string
enter | brake
enable a forced animation brake when the object exits the window viewport
this is an important property when using WB CSS3 animation
the enter | brake property changes the method in which module | onscroll ENTER mode functions
false = no brake occurs on window viewport exit (ideal)
1 = brake at window viewport exit - add a full object height to the activation point
2 = brake at window viewport exit - add halve the object height to the activation point
3 = brake at window viewport exit - add a 3th of the object height to the activation point
etc
see more info into this property here
•••• var: non-string
enter | callback | before & enter | callback | after
add a new function before and after the animation executes
the callback function in full range is beyond the scope of this manual
for an in depth on callback and run on call see here - see also here
• fn: before/after: function (object) { }
object = returns current object
enter | callback | while
add a new function while the object scrolls
the callback function in full range is beyond the scope of this manual
for an in depth on callback and run on call see here - see also here
• fn: while: function (object,top,topEnd,inview,dir) { }
object = returns current object
top = returns current object top position - 0=object top has past viewport top
topEnd = returns current object top + height - 0=object bottom has past viewport top
inview = returns true if current object is in the viewport
dir = returns current object direction
1 = is coming from the bottom
2 = is coming from the top
b5.4
b5.4
MODE ENTER
b5.4
MODE ANIMATOR
b5.5
b5.5
b5.6
b5.6
b5.6
PLUGIN
b5.6
b5.62
b5.62