With the offset we can create parallax motion ... controlled parallax motion
The new percentage mode offers a simpler method of creating controlled parallax motion, less precise but more relevant
- The pixel mode is more precise but requires more knowledge of the relevance between duration vs distance traveled
As a result it is very easy to insert the wrong pixel value, running a positive into a negative value and vice versa
- The percentage mode is less precise, but no incorrect input can be made in this mode
And, in a parallax motion, the effect has more relevance then the exact pixel motion in most cases anyway
The new percentage mode offers a simpler method of creating controlled parallax motion, less precise but more relevant
- The pixel mode is more precise but requires more knowledge of the relevance between duration vs distance traveled
As a result it is very easy to insert the wrong pixel value, running a positive into a negative value and vice versa
- The percentage mode is less precise, but no incorrect input can be made in this mode
And, in a parallax motion, the effect has more relevance then the exact pixel motion in most cases anyway
Diagram-2
Diagram-3
Diagram-5
CALLBACKS ?
Each of the 4 animations has it's own callback | on scroll property
The callback | on scroll property allows us to create a new function on the scrolled animation
By using the callback function arguments it is possible to assign virtually any css (number) value to the animation
We could animate width, height, margin, border-width etc etc
This however requires scripting knowledge beyond the scope of this manual
The callback has the following arguments
id = returns the id/(selector) of the scrolled object
scroll = returns a nullified scrollbar position
duration = returns the duration of the animation
Each of the 4 animations has it's own callback | on scroll property
The callback | on scroll property allows us to create a new function on the scrolled animation
By using the callback function arguments it is possible to assign virtually any css (number) value to the animation
We could animate width, height, margin, border-width etc etc
This however requires scripting knowledge beyond the scope of this manual
The callback has the following arguments
id = returns the id/(selector) of the scrolled object
scroll = returns a nullified scrollbar position
duration = returns the duration of the animation
EXPLAIN ?
module | onscroll ANIMATOR mode properties can be used to create animated control over WB objects by the top scrollbar
- It allows the control over the attributes - left, top and fade
- It allows 4 animations per object per page
- it can be used on centered and non-centered pages
- it allows fullscreen design
module | onscroll ANIMATOR mode properties can be used to create animated control over WB objects by the top scrollbar
- It allows the control over the attributes - left, top and fade
- It allows 4 animations per object per page
- it can be used on centered and non-centered pages
- it allows fullscreen design
__________________________________________________________________________
more info on module | onscroll see here Properties
more info on module | onscroll see here Overview Enter
more info on module | onscroll see here Global Disable
more info on module | onscroll see here Online Tutorials
more info on module | onscroll see here Properties
more info on module | onscroll see here Overview Enter
more info on module | onscroll see here Global Disable
more info on module | onscroll see here Online Tutorials
Module | onscroll allows to assign left, top and fade motion to the window top scrollbar
It creates a timeline of 4 animations per selected object per page
With it we can animate horizontal, vertical, diagonal, fadein, fadeout, pin, unpin and parallax - motion
4 animations per object may seem a restriction, it's not ...
ie.
1. an object scrolls from left out to right out of the window viewport = 1 animation
2. an object scrolls upward, pins, unpins, scrolls upward out = 2 animations
3. an object scrolls in from the right to center, pins, unpins, scrolls out left = 2 animations
4. an object scrolls upward slower then the rest of the page (parallax) = 1 animation
4 animations per object is not a restriction, it's excessive ... (see also remarks and notes below)
THE ARCHITECTURE ?
Module | onscroll internally uses module | reposition to reposition each selected object into a fixed window position
A start point is set for the top scrollbar to activate a FIRST animation
A start and end position is set for the object left and top attributes
A duration is set that determines the speed in which the object travels, as well sets the end position of the top scrollbar
It then allows to continue into a SECOND animation (optional)
The SECOND animation starts from the position the FIRST animation ends
The SECOND animation does not set a start position for the top scrollbar but instead has a delay property
The THIRD and FOURTH animation follow in the same manner as the SECOND animation
It creates a timeline of 4 animations per selected object per page
With it we can animate horizontal, vertical, diagonal, fadein, fadeout, pin, unpin and parallax - motion
4 animations per object may seem a restriction, it's not ...
ie.
1. an object scrolls from left out to right out of the window viewport = 1 animation
2. an object scrolls upward, pins, unpins, scrolls upward out = 2 animations
3. an object scrolls in from the right to center, pins, unpins, scrolls out left = 2 animations
4. an object scrolls upward slower then the rest of the page (parallax) = 1 animation
4 animations per object is not a restriction, it's excessive ... (see also remarks and notes below)
THE ARCHITECTURE ?
Module | onscroll internally uses module | reposition to reposition each selected object into a fixed window position
A start point is set for the top scrollbar to activate a FIRST animation
A start and end position is set for the object left and top attributes
A duration is set that determines the speed in which the object travels, as well sets the end position of the top scrollbar
It then allows to continue into a SECOND animation (optional)
The SECOND animation starts from the position the FIRST animation ends
The SECOND animation does not set a start position for the top scrollbar but instead has a delay property
The THIRD and FOURTH animation follow in the same manner as the SECOND animation
POSITION START AND END
The above Diagram-1 shows how module | onscroll sets the start and end position of the scrolled object
Only the FIRST animation sets a true start and end position (blue dots)
Each subsequent animation (2 to 4) will start where the previous has ended (white arrow), only a new end position is set
DURATION
A duration is set for each of the 4 animations, the duration sets the speed in which the object will travel
It's very important to understand this property to produce a balanced scroll motion that behaves in sync with our document
SCROLL START AND DELAY
Only the FIRST animation has a true scroll start position
Just as the above described position follows in sequence, so will of course follow the scroll order in sequence
Each subsequent animation (2 to 4) has a delay property instead
The above Diagram-1 shows how module | onscroll sets the start and end position of the scrolled object
Only the FIRST animation sets a true start and end position (blue dots)
Each subsequent animation (2 to 4) will start where the previous has ended (white arrow), only a new end position is set
DURATION
A duration is set for each of the 4 animations, the duration sets the speed in which the object will travel
It's very important to understand this property to produce a balanced scroll motion that behaves in sync with our document
SCROLL START AND DELAY
Only the FIRST animation has a true scroll start position
Just as the above described position follows in sequence, so will of course follow the scroll order in sequence
Each subsequent animation (2 to 4) has a delay property instead
start
end
scroll start
delay
delay
duration
duration
duration
ANIMATION 1
ANIMATION 2
ANIMATION 3
It is important to understand the structure of sequence that is created in this timeline
For example ..
If the duration sets the speed in which an object travels, then how do we calculate it's speed vs the speed of the document ?
If we have no reference to our scrolling document which holds absolute positioned objects
then our scrolled objects would move all over the place out of sync with each other - (fixed vs absolute?)
ADVANCED INPUTS
It is perfectly possible to just punch in some values into module | onscroll until our design seems to function correct(ish)
But the more complex the animation, the more control we want, the more we would have to plan, form, calculate etc
The only way to get a pixel perfect, balanced, controlled animation is to calculate (duration, delay, start, end etc)
Module | onscroll has advanced inputs, the input can be a number value, jQuery object, calculation, function ...
These advanced inputs allow to mold our design anyway we want, module | onscroll is a tool first and foremost!
But that would mean we would always need an advanced knowledge, calculate, form etc to create a balanced design ?
Fortunately ... module | onscroll has one more powerful input ... predefined commands ...
For example ..
If the duration sets the speed in which an object travels, then how do we calculate it's speed vs the speed of the document ?
If we have no reference to our scrolling document which holds absolute positioned objects
then our scrolled objects would move all over the place out of sync with each other - (fixed vs absolute?)
ADVANCED INPUTS
It is perfectly possible to just punch in some values into module | onscroll until our design seems to function correct(ish)
But the more complex the animation, the more control we want, the more we would have to plan, form, calculate etc
The only way to get a pixel perfect, balanced, controlled animation is to calculate (duration, delay, start, end etc)
Module | onscroll has advanced inputs, the input can be a number value, jQuery object, calculation, function ...
These advanced inputs allow to mold our design anyway we want, module | onscroll is a tool first and foremost!
But that would mean we would always need an advanced knowledge, calculate, form etc to create a balanced design ?
Fortunately ... module | onscroll has one more powerful input ... predefined commands ...
PREDEFINED COMMANDS ?
The predefined commands gives use easy access to complicated actions, much of the calculation is done for us
The predefined commands gives use easy access to complicated actions, much of the calculation is done for us
In this Diagram-3 the MY MARK TEXT becomes the marked object, it's top position determines the duration of the scroll animation
When the top of the marked object reaches the top of the scrolled object the end of the animation IS reached
The setting for this Diagram-3 could look something like this, say the id of the Text object is Text1 ...
...
1 | scroll duration = com:mark=Text1/0 <--- Text1 sets the duration
1 | position | LEFT start = com:left=0
1 | position | LEFT end = com:right=0
1 | position | TOP start = com:top=200
1 | position | TOP end = com:top=200
...
We can set an additional offset after the slash ie. if we add a value of -100 after the slash in the above Diagram-3
ie.
1 | scroll duration = com:mark=Text1/-100 <--- the animation ends at 300px instead
pos/neg values can be used
0 = top of scrolled object (start)
When the top of the marked object reaches the top of the scrolled object the end of the animation IS reached
The setting for this Diagram-3 could look something like this, say the id of the Text object is Text1 ...
...
1 | scroll duration = com:mark=Text1/0 <--- Text1 sets the duration
1 | position | LEFT start = com:left=0
1 | position | LEFT end = com:right=0
1 | position | TOP start = com:top=200
1 | position | TOP end = com:top=200
...
We can set an additional offset after the slash ie. if we add a value of -100 after the slash in the above Diagram-3
ie.
1 | scroll duration = com:mark=Text1/-100 <--- the animation ends at 300px instead
pos/neg values can be used
0 = top of scrolled object (start)
200px
700px
advanced!
REMARKS AND NOTES:
• document height
make sure the document has enough height to address the amount of scrolled animations
module | onscroll will automatically increase the document height to fit the scrolled animations
this may cause a gap at the bottom of our design, if we are not aware of this function
it is better to enforce the height ourself then to let module | onscroll resolve this issue
note: auto height can also be disabled per object
recommended: enable auto height as a failsafe, but enforce the design
• position left input
the left input is always relative to a WB centered page if applicable, be aware on calculations!
- the command com:left=c0 is equal to 0
• command mark by id
the command mark works on most WB objects (Text,Shape,Image,Layer,NavigationBar etc)
recommended use: Text,Shape,Image or a Bookmark
but always target the id of an object - ie. a bookmark, target the id, not the name id=Bookmark1
• selector
the selector input works on most WB objects (Text,Shape,Image,Layer,NavigationBar etc)
module | onscroll repositions objects into a new fixed window position
always target the element that controls the position of the object
see selectors simplified and a quick reference
• property animate | break on
set the correct amount of animations used with the property animate | break on !!!
• 4 animations per object
note that 4 animations per object is only restricted to a single function
if multiple functions are created for a single object - there is no limit ...
each function would simply generates 4 animations
use ie. the callback | on scroll property to loop between functions
• onscroll on touch devices
from JMPv3.0 b5.4 on onscroll functions can be disabled for touch devices see more info here
• the predefined command self vs RWD
WARNING:
the predefined 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
recommended: build onscroll animator animation from the center with RWD design
use ie. the new predefined command capital C
• document height
make sure the document has enough height to address the amount of scrolled animations
module | onscroll will automatically increase the document height to fit the scrolled animations
this may cause a gap at the bottom of our design, if we are not aware of this function
it is better to enforce the height ourself then to let module | onscroll resolve this issue
note: auto height can also be disabled per object
recommended: enable auto height as a failsafe, but enforce the design
• position left input
the left input is always relative to a WB centered page if applicable, be aware on calculations!
- the command com:left=c0 is equal to 0
• command mark by id
the command mark works on most WB objects (Text,Shape,Image,Layer,NavigationBar etc)
recommended use: Text,Shape,Image or a Bookmark
but always target the id of an object - ie. a bookmark, target the id, not the name id=Bookmark1
• selector
the selector input works on most WB objects (Text,Shape,Image,Layer,NavigationBar etc)
module | onscroll repositions objects into a new fixed window position
always target the element that controls the position of the object
see selectors simplified and a quick reference
• property animate | break on
set the correct amount of animations used with the property animate | break on !!!
• 4 animations per object
note that 4 animations per object is only restricted to a single function
if multiple functions are created for a single object - there is no limit ...
each function would simply generates 4 animations
use ie. the callback | on scroll property to loop between functions
• onscroll on touch devices
from JMPv3.0 b5.4 on onscroll functions can be disabled for touch devices see more info here
• the predefined command self vs RWD
WARNING:
the predefined 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
recommended: build onscroll animator animation from the center with RWD design
use ie. the new predefined command capital C
limit
Diagram-4
400px
700px
In this Diagram-4 the MY MARK TEXT sets the duration by crossing an invisible line, the limit
When the top of the marked object reaches the top of the limit the end of the animation IS reached
The marklimit command does not have an offset input, the input after the slash instead sets the limit
ie.
1 | scroll duration = com:marklimit=Text1/400 <--- the limit is set at 400px
pos/neg values can be used
0 = top of the viewport
When the top of the marked object reaches the top of the limit the end of the animation IS reached
The marklimit command does not have an offset input, the input after the slash instead sets the limit
ie.
1 | scroll duration = com:marklimit=Text1/400 <--- the limit is set at 400px
pos/neg values can be used
0 = top of the viewport
start
threshold
Markenter
The 4th mark command, the markenter command works in a similar manner as the above marklimit command
But instead of setting an invisible line as limit, the limit instead is fixed at the bottom of the viewport
Whenever the mark enters the viewport is the limit, the duration is calculated from the top position of the mark to the point of entry
The 4th mark command, the markenter command works in a similar manner as the above marklimit command
But instead of setting an invisible line as limit, the limit instead is fixed at the bottom of the viewport
Whenever the mark enters the viewport is the limit, the duration is calculated from the top position of the mark to the point of entry
limit
In this Diagram-5 the MY MARK TEXT sets the duration by entering the viewport, the limit
When the top of the marked object enters the viewport the end of the animation IS reached
The markenter command has an additional offset input which can be set after the slash
ie.
1 | scroll duration = com:markenter=Text1/-200 <--- the limit is set at viewport minus 200px
pos/neg values can be used
0 = bottom of viewport
When the top of the marked object enters the viewport the end of the animation IS reached
The markenter command has an additional offset input which can be set after the slash
ie.
1 | scroll duration = com:markenter=Text1/-200 <--- the limit is set at viewport minus 200px
pos/neg values can be used
0 = bottom of viewport
The markenter command is an important command for animations that occur close to the bottom of our design
Module | onscroll will automatically increase the document height to fit the amount of scrolled animations
Any animation near the bottom of our design can therefore easily create a gap at the bottom of our design
The markenter command is a powerful tool to control the duration, the speed, of the animation to conform to the page height
If we mark an object near the bottom of our page, we can control the animation to end before the page ends
Module | onscroll will automatically increase the document height to fit the amount of scrolled animations
Any animation near the bottom of our design can therefore easily create a gap at the bottom of our design
The markenter command is a powerful tool to control the duration, the speed, of the animation to conform to the page height
If we mark an object near the bottom of our page, we can control the animation to end before the page ends
enter
02. MARK
The mark command has 4 variations ...
com:mark=Bookmark1/0 = mark an absolute positioned object as target - reference top start
com:markE=Bookmark1/0 = mark an absolute positioned object as target - reference top end
com:marklimit=Bookmark1/0 = mark an absolute positioned object as target - reference limit
com:markenter=Bookmark1/0 = mark an absolute positioned object as target - reference enter viewport
The mark command has 4 variations ...
com:mark=Bookmark1/0 = mark an absolute positioned object as target - reference top start
com:markE=Bookmark1/0 = mark an absolute positioned object as target - reference top end
com:marklimit=Bookmark1/0 = mark an absolute positioned object as target - reference limit
com:markenter=Bookmark1/0 = mark an absolute positioned object as target - reference enter viewport
com:staticT=0 = vertical
com:staticL=0 = horizontal
StaticT
The static command gives us a balanced control over the duration of an animation
If we have no reference to the duration of an animation each object would simply scroll out of sync with the rest of the page
Each object would behave as a parallax, the object would move faster or slower then the rest of the page
Which is great if we want to create a parallax effect, but even in a parallax motion we want to create a controlled parallax motion
Without the static command we would have to calculate many different things, start - end position, height of the object etc
If we want an object to scroll vertical equal to the speed of the page we simply use the staticT command on the duration input
The command has an optional pixel or percentage mode value which can be used to create an offset
ie.
com:staticT=500 = the object scrolls vertical equal to the page plus 500 pixels
the duration is increased - the object will scroll slower then the page
com:staticT=-300 = the object scrolls vertical equal to the page minus 300 pixels
the duration is decreased - the object will scroll faster then the page
NEW in JMPv3.0 b5.3 - (percentage mode)
com:staticT=2% = the object scrolls vertical twice as fast
com:staticT=-3% = the object scrolls vertical 3 times as slow
com:staticT=1.5% = the object scrolls vertical 1 and a half time as fast
com:staticL=0 = horizontal
StaticT
The static command gives us a balanced control over the duration of an animation
If we have no reference to the duration of an animation each object would simply scroll out of sync with the rest of the page
Each object would behave as a parallax, the object would move faster or slower then the rest of the page
Which is great if we want to create a parallax effect, but even in a parallax motion we want to create a controlled parallax motion
Without the static command we would have to calculate many different things, start - end position, height of the object etc
If we want an object to scroll vertical equal to the speed of the page we simply use the staticT command on the duration input
The command has an optional pixel or percentage mode value which can be used to create an offset
ie.
com:staticT=500 = the object scrolls vertical equal to the page plus 500 pixels
the duration is increased - the object will scroll slower then the page
com:staticT=-300 = the object scrolls vertical equal to the page minus 300 pixels
the duration is decreased - the object will scroll faster then the page
NEW in JMPv3.0 b5.3 - (percentage mode)
com:staticT=2% = the object scrolls vertical twice as fast
com:staticT=-3% = the object scrolls vertical 3 times as slow
com:staticT=1.5% = the object scrolls vertical 1 and a half time as fast
INPUT POSITION
Module | onscroll has the following predefined position commands
com:left=0 = position object left 0px from window viewport
com:left=c0 = position object left 0px relative to a WB centered page/if applicable
com:left=out = position object left out of the window viewport
com:left=self = position object left as is positioned in WB (runtime)
com:right=0 = position object right 0px from window viewport
com:right=out = position object right out of the window viewport
com:top=0 = position object top 0px from window viewport
com:top=out = position object top out of window viewport
com:top=self = position object top as is positioned in WB (runtime)
com:bottom=0 = position object bottom 0px from window viewport
com:bottom=out = position object bottom out of window viewport
Setting the position for the 1st animation in the above Diagram 1 could look something like this ...
...
1 | position | LEFT start = com:left=out <--- start out of the window viewport
1 | position | LEFT end = com:left=c10 <--- end animation at 10px from page center
1 | position | TOP start = com:top=50 <--- start 50px from the top
1 | position | TOP end = com:top=50 <--- end 50px from the top
...
Module | onscroll has the following predefined position commands
com:left=0 = position object left 0px from window viewport
com:left=c0 = position object left 0px relative to a WB centered page/if applicable
com:left=out = position object left out of the window viewport
com:left=self = position object left as is positioned in WB (runtime)
com:right=0 = position object right 0px from window viewport
com:right=out = position object right out of the window viewport
com:top=0 = position object top 0px from window viewport
com:top=out = position object top out of window viewport
com:top=self = position object top as is positioned in WB (runtime)
com:bottom=0 = position object bottom 0px from window viewport
com:bottom=out = position object bottom out of window viewport
Setting the position for the 1st animation in the above Diagram 1 could look something like this ...
...
1 | position | LEFT start = com:left=out <--- start out of the window viewport
1 | position | LEFT end = com:left=c10 <--- end animation at 10px from page center
1 | position | TOP start = com:top=50 <--- start 50px from the top
1 | position | TOP end = com:top=50 <--- end 50px from the top
...
INPUT SCROLL START AND DELAY
The scroll start (1) and the delay (2 to 4) inputs also allow the use of the command mark (4 variations)
The mark command functions in a slightly different manner
Mark
The (start) top position of the mark instead now becomes the activation point of the animation
Whenever the top of the mark reaches the top of the scrolled object the animation activates
MarkE
The (end) top position of the mark instead now becomes the activation point of the animation
Whenever the top of the mark reaches the top of the scrolled object the animation activates
Marklimit
The limit instead now becomes the activation point of the animation
Whenever the top of the mark reaches the invisible line, the limit, the animation activates
Markenter
The limit instead now becomes the activation point of the animation
Whenever the top of the mark reaches the bottom of the viewport, enters the viewport, the animation activates
The scroll start (1) and the delay (2 to 4) inputs also allow the use of the command mark (4 variations)
The mark command functions in a slightly different manner
Mark
The (start) top position of the mark instead now becomes the activation point of the animation
Whenever the top of the mark reaches the top of the scrolled object the animation activates
MarkE
The (end) top position of the mark instead now becomes the activation point of the animation
Whenever the top of the mark reaches the top of the scrolled object the animation activates
Marklimit
The limit instead now becomes the activation point of the animation
Whenever the top of the mark reaches the invisible line, the limit, the animation activates
Markenter
The limit instead now becomes the activation point of the animation
Whenever the top of the mark reaches the bottom of the viewport, enters the viewport, the animation activates
The different mark commands have there value in different situations
ie. the marklimit command can be very useful when multiple scrolled object need to respond to the same mark
If the mark command would be used here, the different vertical plains of each object would require calculated offsets
With the marklimit command all objects respond at the same time, at the same limit
One way of looking at the marklimit and the markenter commands in default state, offset 0 is ...
The marklimit targets the top of the viewport, the markenter targets the bottom of the viewport
IMPORTANT:
Always maintain a logic in positioning and using the mark command
The returned value in goal should always be a practicable value, a positive value
ie. be aware, the markenter command by format is always a dynamic value
The mark command is a powerful visual tool to aid in working with module | onscroll if used to our advantage
All commands are powerful tools to aid in working with module | onscroll if used to our advantage
module | onscroll is a tool first and foremost!
ie. the marklimit command can be very useful when multiple scrolled object need to respond to the same mark
If the mark command would be used here, the different vertical plains of each object would require calculated offsets
With the marklimit command all objects respond at the same time, at the same limit
One way of looking at the marklimit and the markenter commands in default state, offset 0 is ...
The marklimit targets the top of the viewport, the markenter targets the bottom of the viewport
IMPORTANT:
Always maintain a logic in positioning and using the mark command
The returned value in goal should always be a practicable value, a positive value
ie. be aware, the markenter command by format is always a dynamic value
The mark command is a powerful visual tool to aid in working with module | onscroll if used to our advantage
All commands are powerful tools to aid in working with module | onscroll if used to our advantage
module | onscroll is a tool first and foremost!
0 = top of scrolled object (start)
100
-100
Marklimit
The 3th mark command, the marklimit command works in a similar manner as the above mark commands
But instead of using the top position of the scrolled object, it sets an invisible line, a limit that the mark crosses as threshold
The 3th mark command, the marklimit command works in a similar manner as the above mark commands
But instead of using the top position of the scrolled object, it sets an invisible line, a limit that the mark crosses as threshold
0 = top of viewport
-100
100
0 = bottom of viewport
100
-100
MarkE
The 2nd mark command, the markE command works exactly the same as the above mark command, the E stands for END
Instead of targeting the start top position of the scrolled object it targets the END top position of the scrolled object
This command of course is only of use in a vertical motion where the top start and the top end position differ
The 2nd mark command, the markE command works exactly the same as the above mark command, the E stands for END
Instead of targeting the start top position of the scrolled object it targets the END top position of the scrolled object
This command of course is only of use in a vertical motion where the top start and the top end position differ
Mark
The first mark command, the mark command is another powerful command which gives us a direct visual feedback
We can target an absolute positioned object (by id) which becomes the threshold for the duration of the animation
The top position of the mark and the (start) top position of the scrolled object becomes the duration
The first mark command, the mark command is another powerful command which gives us a direct visual feedback
We can target an absolute positioned object (by id) which becomes the threshold for the duration of the animation
The top position of the mark and the (start) top position of the scrolled object becomes the duration
NOTE: positive values increases the duration
StaticL
Aside the staticT command we can also use staticL L for LEFT (Horizontal)
The staticL command can be used with horizontal animation, the horizontal motion becomes equal to the speed of the page
The staticL command also has an optional pixel or percentage mode value which can be used to create an offset
Aside the staticT command we can also use staticL L for LEFT (Horizontal)
The staticL command can be used with horizontal animation, the horizontal motion becomes equal to the speed of the page
The staticL command also has an optional pixel or percentage mode value which can be used to create an offset
MODULE ONSCROLL MODE ANIMATOR - OVERVIEW
PLUGIN
Top ScrollBar Animation
Horizontal, Vertical
Fadein, Fadeout
Pin, Unpin
Parallax
Horizontal, Vertical
Fadein, Fadeout
Pin, Unpin
Parallax
Diagram-1
b5.3
From JMPv3.0 b5.4 on module | onscroll now consists of 2 modes
01. ANIMATOR and the new 02. ENTER mode
This section will explain the ANIMATOR mode - information on the ENTER mode can be found here
01. ANIMATOR and the new 02. ENTER mode
This section will explain the ANIMATOR mode - information on the ENTER mode can be found here
ONSCROLL MODE ANIMATOR
b5.4
GLOBAL DISABLE IGNORE
Module | onscroll functions can global be disabled for a Template from JMP3.0 b5.4 on
Read more about this useful new easy tools function here
Module | onscroll functions can global be disabled for a Template from JMP3.0 b5.4 on
Read more about this useful new easy tools function here
b5.4
INPUT DURATION
The duration of the animation is they most important and difficult input to get right to create a balanced design
Module | onscroll has two predefined commands for the duration input, the command 01. static and 02. mark
Module | onscroll has two predefined commands for the duration input, the command 01. static and 02. mark
01. STATIC
The static command has 2 variations ...
The static command has 2 variations ...
DISABLE BY CLASS
NEW - in JMPv3.0 b5.63
Module onscroll mode animator animation can now be filtered out by adding a specified class to the object
The specified class is joronpass
example:
$(onscrolled-object).addClass('joronpass'); <----- filter from onscroll animation
NEW - in JMPv3.0 b5.63
Module onscroll mode animator animation can now be filtered out by adding a specified class to the object
The specified class is joronpass
example:
$(onscrolled-object).addClass('joronpass'); <----- filter from onscroll animation
b5.63