ScreenScroll
One screen scroll Jquery plugin, that lets you create a one page scroll website. The plugin allows you to create beautiful screens for the entire window from one or several sections. You can set the number of sections on the screen, fix the header or footer depending on the width of the window.
Install
This package can be installed with:
npm install --save romenko.screenscroll
bower install --save romenko.screenscroll
Usage
Put the required stylesheet at the top of your markup:
< link rel = " stylesheet " href = " /node_modules/screenScroll/dist/screenScroll.min.css " />
< link rel = " stylesheet " href = " /bower_components/screenScroll/dist/screenScroll.min.css " />
Put the script at the bottom of your markup right after jQuery:
< script src = " /node_modules/jquery/dist/jquery.min.js " > < / script >
< script src = " /node_modules/jquery-mousewheel/jquery.mousewheel.js " > < / script >
< script src = " /node_modules/romenko.screenscroll/dist/screenScroll.min.js " > < / script >
< script src = " /bower_components/jquery/dist/jquery.min.js " > < / script >
< script src = " /bower_components/jquery-mousewheel/jquery.mousewheel.js " > < / script >
< script src = " /bower_components/romenko.screenscroll/dist/screenScroll.min.js " > < / script >
Document structure
< header class = " header " > ... </ header >
< main class = " main " >
< section > 1 </ section >
< section > 2 </ section >
< section > 3 </ section >
</ main >
< footer class = " footer " > ... </ footer >
Call the plugin function
$ ( ' main.main ' ) . screenScroll ( {
header : $ ( header . header ) ,
footer : $ ( footer . footer )
} )
Example
View demo
$ ( ' main.main ' ) . screenScroll ( {
header : $ ( ' header.header ' ) ,
footer : $ ( ' footer.footer ' ) ,
headerFixed : true ,
footerFixed : false ,
responsive : {
960 : {
headerFixed : false ,
footerFixed : false ,
screens : [
{
size : 50 ,
sections : [ 0 , 1 ]
} ,
{
size : 50 ,
sections : [ 3 , 4 ]
} ,
{
size : 50 ,
sections : [ 5 , 6 ]
}
]
}
}
} ) ;
Options
$ ( ' main.main ' ) . screenScroll ( {
header : $ ( header . header ) ,
footer : $ ( footer . footer ) ,
headerFixed : true ,
footerFixed : false ,
startScreen : 0 ,
scrollTimeOut : 800
responsive : [ ]
} )
Events
var screenScroll = $ ( ' main.main ' ) . screenScroll ( ) ;
screenScroll . on ( ' screenScroll.resize ' , function ( e , data ) {
console . log ( data ) ;
} ) ;
screenScroll . on ( ' screenScroll.afterMove ' , function ( e , data ) {
console . log ( data ) ;
} ) ;
screenScroll . on ( ' screenScroll.beforeMove ' , function ( e , data ) {
console . log ( data ) ;
} ) ;
screenScroll . trigger ( ' screenScroll.next ' ) ;
screenScroll . trigger ( ' screenScroll.prev ' ) ;
screenScroll . trigger ( ' screenScroll.moveTo ' , 1 ) ;
screenScroll . trigger ( ' screenScroll.goTo ' , 1 ) ;
screenScroll . trigger ( ' screenScroll.moveToSection ' , 3 ) ;
screenScroll . trigger ( ' screenScroll.goToSection ' , 3 ) ;
screenScroll . trigger ( ' screenScroll.moveToSectionId ' , ' example ' ) ;
screenScroll . trigger ( ' screenScroll.goToSectionId ' , ' example ' ) ;
License
The code and the documentation are released under the MIT License .