jorextensions.com free extensions for WYSIWYG Webbuilder
jordan (6j6)
jordan (6j6)
tutorial for module | scroll
jor_aniMateMASTERPACKv3.0 build 5
jordan (6j6) - jorextensions.com
jor_aniMateMASTERPACKv3.0 build 5
jordan (6j6) - jorextensions.com
TUTORIAL module | scroll - basic
Welcome to this tutorial for jor_aniMateMASTERPACKv3.0 ...
In this tutorial we will use module | scroll to create a basic page scroll animation
Module | scroll can be found under the section 04. MODULES SECONDARY 2 in the extension
Module | scroll can be found under the section 04. MODULES SECONDARY 2 in the extension
In this tutorial we are going to create a basic window page scroll animation
Let's go ...
the target window
We first need to select the target window on which we want to receive the scroll animation
In this tutorial we want the main window to receive the scroll animation
For this we set the selector | target window property to window - which is the default setup
In this tutorial we want the main window to receive the scroll animation
For this we set the selector | target window property to window - which is the default setup
selector | target window = window
That's all that's needed to activate a basic window page scroll animation with module | scroll
All other properties are for styling purposes and/or selecting different modes
All other properties are for styling purposes and/or selecting different modes
scroll offset
In this tutorial we will setup an additional offset for the scroll position
In default setup the anchor, the link, will always scroll to a 0px top and left position
ie. For the top position this would base the scroll target always at 0px from the top
This may not always be the position we want our scroll to end
Say we have a fixed header which is 60px in height, like Demo 1 of this tutorial has
We want our anchor to end it's scroll beneath that position, we want a top position scroll offset of -70px
In default setup the anchor, the link, will always scroll to a 0px top and left position
ie. For the top position this would base the scroll target always at 0px from the top
This may not always be the position we want our scroll to end
Say we have a fixed header which is 60px in height, like Demo 1 of this tutorial has
We want our anchor to end it's scroll beneath that position, we want a top position scroll offset of -70px
offset = {left:0,top:-70}
That's all the inputs we have to set and actions we have to take
All other properties are for styling purposes and/or selecting different modes
All other properties are for styling purposes and/or selecting different modes
We can also set module | scroll up into another mode
Instead of targeting the whole main window we can target a specific object
The use of module | scroll as setup in Tutorial 1 is probably the first and most used method
that comes to mind when using module | scroll
But it is the following object level mode in which module | scroll really becomes a powerful creative tool
Instead of targeting the whole main window we can target a specific object
The use of module | scroll as setup in Tutorial 1 is probably the first and most used method
that comes to mind when using module | scroll
But it is the following object level mode in which module | scroll really becomes a powerful creative tool
selector | target window = #Layer1
That's the full basic object page scroll animation tutorial completed
What is jor_aniMateMASTERPACKv3.0 ?
jor_aniMateMASTERPACKv3.0 is a collection of 15+ modules and 8+ tools combined in one extension
They can work together as a pack to create a complete new extension or modules can be used freestanding
jor_aniMateMASTERPACKv3.0 is a tool first and foremost - combined with creativity the possibilities are endless
jor_aniMateMASTERPACKv3.0 is a collection of 15+ modules and 8+ tools combined in one extension
They can work together as a pack to create a complete new extension or modules can be used freestanding
jor_aniMateMASTERPACKv3.0 is a tool first and foremost - combined with creativity the possibilities are endless
Download the demo's of the above tutorials here as WB project ...
module | scroll is a module of jor_aniMateMASTERPACKv3.0 build 5 • 2009 - 2015
more demo's, info, online manual, etc for jor_aniMateMASTERPACKv3.0 visit jorextensions.com
jor_aniMateMASTERPACKv3.0 free extension for WYSIWYG Webbuilder
extension and code: jordan (6j6)
more demo's, info, online manual, etc for jor_aniMateMASTERPACKv3.0 visit jorextensions.com
jor_aniMateMASTERPACKv3.0 free extension for WYSIWYG Webbuilder
extension and code: jordan (6j6)
Hope you found these tutorials informative and useful ...
Module | scroll can be setup and styled in many other ways
These demo's should be a good start point to experiment with
Module | scroll can be setup and styled in many other ways
These demo's should be a good start point to experiment with
Online Manual
Online Manual - module | scroll
Online Manual - Selectors Simplified..
Online Manual - When do we animate what ?
Online Manual - module | scroll
Online Manual - Selectors Simplified..
Online Manual - When do we animate what ?
WYSIWYG Webbuilder Forum Topic JMPv3.0
More tutorials for JMPv3.0 see Online Tutorials
More free WB extensions visit jorextensions.com
Back To Top
More tutorials for JMPv3.0 see Online Tutorials
More free WB extensions visit jorextensions.com
Back To Top
We do this by setting an offset in the offset property, here the top offset is set to -70
The anchor will now end it's scroll beneath our fixed header, 70px from the top
That's the full basic window page scroll animation tutorial completed
The Layer1 object will now receive the scroll animation
the anchor target
the target window
The simplest WB object to use in this scenario would be a WB Layer
Many other advanced setups can be created, but in this tutorial we'll stick with a WB Layer
Here we want a Layer1 object to receive the scroll animation
For this we need to set the selector | target window property to #Layer1
Many other advanced setups can be created, but in this tutorial we'll stick with a WB Layer
Here we want a Layer1 object to receive the scroll animation
For this we need to set the selector | target window property to #Layer1
the target link
Next we need to setup an important property, the selector | target link property
In Tutorial 1 we used the default setting of the selector | target link property, which is document
The use of document allows all anchors on the page to activate the window page scroll animation
However, when we use an object as target window
We do not want all the links on the page to affect the target window
We want, need, to limit the target link to a specific target window
If we do not set this up correct external links will affect the scroll behavior of the target window
More on this in Tutorial 3 below
For now we are just going to set up the selector | target link property
In Tutorial 1 we used the default setting of the selector | target link property, which is document
The use of document allows all anchors on the page to activate the window page scroll animation
However, when we use an object as target window
We do not want all the links on the page to affect the target window
We want, need, to limit the target link to a specific target window
If we do not set this up correct external links will affect the scroll behavior of the target window
More on this in Tutorial 3 below
For now we are just going to set up the selector | target link property
selector | target link = #NavigationBar1
In they above we covered the setup of a basic window page scroll animation inside module | scroll
But we also have to create the actual anchor and it's target of course
The anchor is simply created by adding a hyperlink to our page
The anchor target can be set in 2 ways ...
• We can use a WB Bookmark as target, in WB it would be setup like ...
BOOKMARK
Link to : Page in this Project
Bookmark : bookmark1
• Or we can use a WB Object as target, in WB it would be setup like ...
OBJECT
Link to : External Web Address
URL : #Shape1
Tutorial 1
Window page scroll animation
Tutorial 2
Object page scroll animation
module | scroll - basic - tutorial
The scroll offset and the anchors are setup in the same manner as in Tutorial 1
That's all the inputs we have to set and actions we have to take
All other properties are for styling purposes and/or selecting different modes
That's all the inputs we have to set and actions we have to take
All other properties are for styling purposes and/or selecting different modes
In this tutorial we are using a WB NavigationBar object that serves as the holder of our anchors
The selector | target link therefore is set to #NavigationBar1 (=the object ID)
This action limits the target window to only act upon the anchors of our target link
Thus ...
Only the anchors inside NavigationBar1 (target link) will affect the scroll behavior of Layer1 (target window)
The selector | target link therefore is set to #NavigationBar1 (=the object ID)
This action limits the target window to only act upon the anchors of our target link
Thus ...
Only the anchors inside NavigationBar1 (target link) will affect the scroll behavior of Layer1 (target window)
This can't be stressed out enough ...
"The better understanding of the selector the more we can get out of jor_aniMateMASTERPACKv3.0"!
"The better understanding of the selector the more we can get out of jor_aniMateMASTERPACKv3.0"!
THE SELECTOR ?
.
To work with jor_aniMateMASTERPACKv3.0 it is crucial to understand the selector input
"The better understanding of the selector the more we can get out of jor_aniMateMASTERPACKv3.0"!
To gain an understanding of the selector input see the jor_aniMateMASTERPACKv3.0 online manual first
see here ...
• Selectors Simplified
• When do we animate what ?
.
To work with jor_aniMateMASTERPACKv3.0 it is crucial to understand the selector input
"The better understanding of the selector the more we can get out of jor_aniMateMASTERPACKv3.0"!
To gain an understanding of the selector input see the jor_aniMateMASTERPACKv3.0 online manual first
see here ...
• Selectors Simplified
• When do we animate what ?
Level: Easy to Moderate
TUTORIAL
jor_aniMateMASTERPACKv3.0 b5
module | scroll
jor_aniMateMASTERPACKv3.0 b5
module | scroll
SEE LIVE DEMO 1
SEE LIVE DEMO 1
SEE LIVE DEMO 2
DOWNLOAD DEMOS
Tutorial 3
Multiple page scroll animations
This Tutorial 3 does not cover another mode or style setup of module | scroll
Here we want to combine Tutorial 1 and Tutorial 2 and create multiple scroll targets for a single page
Tutorial 2 already touched on the importance of the selector | target link property
If we want to create multiple scroll targets, be it on window or object level
We always have to limit the target link to a specific target window
In Tutorial 1 we used the default setting of the selector | target link property, which is document
In this Tutorial 3 we can not do this, we also need to limit the target link to a specific target window
Here we want to combine Tutorial 1 and Tutorial 2 and create multiple scroll targets for a single page
Tutorial 2 already touched on the importance of the selector | target link property
If we want to create multiple scroll targets, be it on window or object level
We always have to limit the target link to a specific target window
In Tutorial 1 we used the default setting of the selector | target link property, which is document
In this Tutorial 3 we can not do this, we also need to limit the target link to a specific target window
the target link - window level
Just as we did in Tutorial 2 we limit the selector | target link property on window level
In this tutorial we are using a WB Text object that serves as the holder of our anchors
The selector | target link therefore is set to #wb_TextNav (=the object ID)
This action limits the target window to only act upon the anchors of our target link
Thus ...
Only the anchors inside wb_TextNav (target link) will affect the scroll behavior of window (target window)
In this tutorial we are using a WB Text object that serves as the holder of our anchors
The selector | target link therefore is set to #wb_TextNav (=the object ID)
This action limits the target window to only act upon the anchors of our target link
Thus ...
Only the anchors inside wb_TextNav (target link) will affect the scroll behavior of window (target window)
selector | target link = #wb_TextNav
This can't be stressed out enough ...
"The better understanding of the selector the more we can get out of jor_aniMateMASTERPACKv3.0"!
"The better understanding of the selector the more we can get out of jor_aniMateMASTERPACKv3.0"!
By doing so we can now have multiple scroll targets on a single page without each affecting the other!
compare with - global - selector | target link
global - selector | target link
target link = document
target link = document
SEE LIVE DEMO 3
SEE LIVE DEMO 4
CORRECT
INCORRECT
That's the full multiple page scroll animations per page tutorial completed
limited - selector | target link
Comments, feedback etc regarding this tutorial please post them at the WB Forum Topic JMPv3.0 ...
jordan (6j6)
jordan (6j6)
UPDATE: jor_aniMateMASTERPACKv3.0 build 5.1 update **NEW** - mouse-wheel function
Test module | scroll and it's new mouse-wheel function in the module | reposition demo
Also other improvement where made to module | scroll delivering an even better smooth scroll experience!
Test it here at the module | reposition playground
Test module | scroll and it's new mouse-wheel function in the module | reposition demo
Also other improvement where made to module | scroll delivering an even better smooth scroll experience!
Test it here at the module | reposition playground
