jorextensions.com free extensions for WYSIWYG Webbuilder
jordan (6j6)
tutorial for module | scroll
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
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
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
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
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
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
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
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)
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
Online Manual
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
Back To Top
TUTI FRUTI
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
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
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
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)
This can't be stressed out enough ...
"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 ?
Level: Easy to Moderate
Goto Live Demo 2
TUTORIAL
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
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)
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"!
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
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)
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