Scrollport.js
Scrollport.js - not your boring plugin for scrolling animation. See demo for possible uses. README.md also availiable in russian language.
Plug-in can not only animate the scroll, but also to assign references by clicking on which to begin the animation.
Use
$.scrollport( target [, options ] ); $.scrollport( target [, container ] [, options ] ); $.scrollport( top, [, options ] ); $.scrollport( top, [, container ] [, options ] ); $.scrollport( top, left, [, options ] ); $.scrollport( top, left, [, container ] [, options ] ); container.scrollport( target [, options ] ); container.scrollport( top [, options ] ); container.scrollport( top, left [, options ] );
-
target
Either the jQuery object or selector element, which will be scrolling. -
container
default$(window)
jQuery object inside which will be scrolling. -
top
Number of pixels from the top edge of thecontainer
. The specified point will be scrolling. -
left
Number of pixels from the left edge of thecontainer
. The specified point will be scrolling. -
options
Settings responsible for scroll mode, scroll details and callbacks.
Settings
The plugin has four modes depending on the selected mode will be added to the individual settings. The following are options which can be set regardless of the selected mode.
-
mode
defaultusual
Profile name:usual
,roll
,hard
orsoft
. -
interrupt_user
defaulttrue
If during operation the plug the user make a forced scrolling, the movement caused by the plugin will stop. -
interrupt_scrollport
defaulttrue
If during the plugin it will initiate a new movement, the former stops. When set tofalse
caused over the existing movement will not be performed. -
interrupt
Set totrue
orfalse
, setting the same value for the optionsinterrupt_user
andinterrupt_scrollport
-
container
jQuery element inside which will be scrolling. As you can see, the container can be set not only as an argument in a call to the plugin, but the pass option settings. The result will be the same. -
delta
default{top: 0, left: 0}
The value oftop
determines how many pixels from the top should be "do not reach" totarget
. The value ofleft
determines the number of pixels on the left. If you pass the optional number, it will be assumed that you pass `{top: your_number, left: 0} '. -
on_start
The function that will be called at the start of the movement. The argument passed to the function API.this
will contain acontainer
. -
on_interrupt
The function to be called when the plugin is interrupted user scrolls. The argument passed to the function API.this
will contain acontainer
. -
on_finish
The function that will be called upon successful completion of the scroll. That is, if the action was not interrupted by the user. The argument passed to the function API.this
will contain acontainer
. -
on_stop
The function that will be called at the end of the movement, regardless of whether it was from interruption or completing the scroll path. The argument passed to the function API.this
will contain acontainer
.
Usual mode
Scrolls to that location, within a specified period of time.
-
duration
default700
Time in milliseconds the scroll shoud take. -
easing
defaultswing
Roll mode
Scrolls to a specified location at a predetermined speed.
-
speed
default2500
The number of pixels that must be scrolled in 1 second (1000 ms). -
max_duration
default700
Maximum allowed scroll time, if the distance to the target is large. You can define the maximum number of milliseconds that you are willing to wait. To disable restrictions pass the valuefalse
. -
min_duration
default300
Minimum allowed scroll time, if the distance is too short, to avoid feeling too sharp move, you can specify the time, less than that, it is impossible to approach the target. -
easing
defaultswing
Hard mode
Instantly it moves us a few pixels to the target and then gently scrolls to the place.
-
distance
default5
The distance in pixels that remains the goal after a momentary movement. -
duration
default50
Time during which the rest of the way will be passed. -
easing
defaultswing
Soft mode
Slowly begins to move toward the goal, the content appears on top of the white layer is gradually becoming not transparent. When the layer becomes completely opaque, scroll quickly moved close to the target. Then, slowly reach your during the White layer gradually disappears.
To change any settings or CSS, in their style, set the desired properties of the element with the class scrollport-overlay
.
-
distance_before
default200
Distance the scrolling before the layer becomes opaque. -
distance_after
default200
It distances the scroll after layer will begin to disappear. -
distance
It allows you to set the value for both properties at oncedistance_before
anddistance_after
. -
duration_before
default200
Time for which the scroll goes the distance specified in thedistance_before
. -
duration_after
default400
Time for which the scroll goes the distance specified in thedistance_after
. -
duration
It allows you to set the value for both properties at onceduration_before
andduration_after
. -
easing_before
defaultswing
Ising, which scroll goes the distance specified in thedistance_before
. -
easing_after
defaultswing
Ising, which scroll goes the distance specified in thedistance_after
. -
waiting
default100
The time during which the layer will remain opaque. -
easing
It allows you to set the value for both properties at onceeasing_before
andeasing_after
. -
speed
If the target is too close, the scrolling will be carried out with the use of fashionroll
. The optionspeed
can pass the speed with which the scroll gets to the goal.
Changing default settings
$.scrollport( options );
Scrollport Links
Clicking on the link will be created by the plugin. All references to the attribute data-scrollport
will be automatically assigned to be a scrollport anchor. If you do not pass any one of the values ​​target
, top
or left
, then target
will automatically attribute value data-scrollport
or href
, or data-href
.
link.scrollport_link( [ target ] [, options ] ); link.scrollport_link( [ target ] [, container ] [, options ] ); link.scrollport_link( top, [, options ] ); link.scrollport_link( top, [, container ] [, options ] ); link.scrollport_link( top, left, [, options ] ); link.scrollport_link( top, left, [, container ] [, options ] );
link
Object target, which will link to a scrollport anchor.
API
API access can be obtained as follows:
  // When the initialization of the plugin. api = $.scrollport( ... );   // API passed to the function of any callback. $.scrollport( ..., { on_finish: function( api ) { ... } });
-
api.options
Options passed to the initialization, combined with the default settings. -
api.status
At the time of initialization statusinit
. If the failure occurred during initialization or initialization value it will be abolishedcancel
. During the movement ofmotion
. After the interruption ofinterrupt
. Upon successful completion,finish
. -
api.container
jQuery object passed as thecontainer
initialization. -
api.target
If the goal was transferred selector or object jQuery,api.target
will contain targeted element. If the goal were the coordinates, the object will beapi.target
type{top: ..., left: ...}
Examples
  // In the "usual" to move the scroll to top of the page. $.scrollport( 'body' );   // In the "soft" to move the scroll 500 pixels from the top of the page $.scrollport( 500, { mode: 'soft' } );   // In the "hard" to move the scroll element with id "my_container" to a point 100 pixels to the right of the beginning of the container, and 40 pixels below. $( '#my_container' ).scrollport( 100, 100, { mode: 'hard' delta: 60 } );   // In the "usual" to move the scroll to the item page id "my_element". At the end of the motion to withdraw the status skrollporta console. $.scrollport( '#my_element', { on_stop: function( api ) { console.log( api.status ); } } );
Where can I get it?
You can take through the bower: $ bower install scrollport-js
You can through npm: $ npm install scrollport-js
You can even get it via CDN. Link to the latest version. If you will need some other version, change "1.0.4" in reference to the desired value:
https://cdn.rawgit.com/iserdmi/scrollport-js/1.0.4/dist/scrollport.min.js
Only in extreme cases download it directly.