This time I will share jQuery Plugin and tutorial about Basic Full Window Page Scoll Plugin with jQuery – PageScroll, hope it will help you in programming stack.
| File Size: | 49.2 KB |
|---|---|
| Views Total: | 4713 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
PageScroll is a really simple jQuery one page scroll plugin that allows the visitor to scroll vertically or horizontally through sectioned content of your single page website/application with mouse wheel, keyboard or side naivigation. Scroll snapping behavior is supported as well.
How to use it:
1. Import jQuery library and the jQuery pagescroll plugin into the html page.
1 |
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> |
2 |
<script src="js/PageScrollfb.js"></script> |
2. Add content sections to your single page website / web application.
1 |
<div id="container"> |
2 |
<div class="sections"> |
3 |
<div class="section section-1">Section One</div> |
4 |
<div class="section section-2">Section Two</div> |
5 |
<div class="section section-3">Section Three</div> |
6 |
<div class="section section-4">Section Four</div> |
7 |
</div> |
8 |
</div> |
3. The core CSS styles.
01 |
* { |
02 |
margin: 0; |
03 |
padding: 0; |
04 |
} |
05 |
06 |
html, body { |
07 |
height: 100%; |
08 |
width: 100%; |
09 |
overflow: hidden; |
10 |
} |
11 |
12 |
#container, .sections { |
13 |
height: 100%; |
14 |
width: 100%; |
15 |
position: relative; |
16 |
} |
17 |
18 |
.section { |
19 |
width: 100%; |
20 |
height: 100%; |
21 |
text-align: center; |
22 |
color: white; |
23 |
font-size: 40px; |
24 |
font-family: "open sans", Simsun, Tahoma; |
25 |
padding-top : 50px; |
26 |
position: relative; |
27 |
} |
4. Style the side navigation.
01 |
.vertical { |
02 |
position: fixed; |
03 |
list-style: none; |
04 |
right: 10px; |
05 |
top: 50%; |
06 |
} |
07 |
08 |
.vertical > li { |
09 |
width: 8px; |
10 |
height: 8px; |
11 |
border-radius: 50%; |
12 |
background: #fff; |
13 |
margin: 0 0 10px 5px; |
14 |
} |
15 |
16 |
.vertical > li.active { |
17 |
width: 14px; |
18 |
height: 14px; |
19 |
border: 2px solid #FFFE00; |
20 |
background: none; |
21 |
margin-left: 0; |
22 |
} |
5. Initialize the plugin to generate a vertical one page scrolling website.
1 |
$("#container").PageScroll(); |
6. Customizable options.
01 |
$("#container").PageScroll({ |
02 |
// html structure |
03 |
selectors : { |
04 |
sections : ".sections", |
05 |
section : ".section", |
06 |
page : ".pages", |
07 |
active : ".active" |
08 |
}, |
09 |
10 |
// index slide |
11 |
index : 0, |
12 |
13 |
// easing effect |
14 |
easing : "ease", |
15 |
16 |
// transition duration |
17 |
duration : 500, |
18 |
19 |
// enable infinite loop |
20 |
loop : false, |
21 |
22 |
// enable pagination |
23 |
pagination : true, |
24 |
25 |
// enabke keyboard events |
26 |
keyboard :true, |
27 |
28 |
// vertical or horizontal |
29 |
direction : "vertical", |
30 |
31 |
// callback function |
32 |
callback : "" |
33 |
|
34 |
}); |
Change log:
2015-11-28
- update
2015-10-27
- added horizontal sliding.
2015-10-15
- Update PageScroll.js
This awesome jQuery plugin is developed by javion25. For more Advanced Usages, please check the demo page or visit the official website.
source : jqueryscript.net
