Fullscreen Scroll Animation Slider

Now days most of the websites use fullscreen animation slider to showcase the feature of their product(s). We can develop those kind of page(s) using fullscreen scroll animation slider plugin.

slidePage is a lightweight, touch-enabled jQuery one page animation scrolling plugin. It supports both desktop and mobile devices.

Website visitor are able scroll through your long product feature showcase webpage through mouse wheel, touch swipe and navigation links. It uses smooth scroll animations based on CSS3 transforms and transitions, which is also very lightweight and very smooth as compare to JS animation.

 

Install it using NPM

1
2
# NPM
$ npm install slidePage

How to use it on webpage

include following line on header to include js and css files

1
2
3
4
 
<link rel="stylesheet" href="slidePage.css">
<script type="text/javascript" src="//code.jquery.com/jquery-3.2.0.min.js"></script>
<script type="text/javascript" src="slidePage.min.js"></script>

2. Markup html structure:

1
2
3
4
5
6
7
8
9
10
11
<div id="slidePage-container" class="slidePage-container">
 
&nbsp;
<div class="item item1">Item 1</div>
&nbsp;
<div class="item item2">Item 2</div>
&nbsp;
<div class="item item3">Item 3</div>
...
 
</div>

To add naviation/pagination to switch between page manually

1
2
3
4
5
6
7
8
9
10
11
12
13
<nav class="pagination" id="pagination">
<!— previous slide -->
  <div class="prev-page" onclick="slidePage.prev()">Up</div>
<!-- page 1,2 ,3 using index --> ... 
  <a onclick="slidePage.index(1)"></a>
  <a onclick="slidePage.index(2)"></a>
  <a onclick="slidePage.index(3)"></a>
  ...
<!-- next slide -->
 
  <div class="next-page" onclick="slidePage.next()">Down</div>
 
</nav>

Intialize plugin using following javacript

1
slidePage.init();

you can also use advanced options like below

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
slidePage.init({
 
  // start index
  'index':page,
 
  // CSS selector of pages
  'pageContainer': '.item',
 
  // after/before scrolling callback functions
  'after': function() {},
  'before': function() {},
 
  // transition delay in milliseconds
  'speed': false,
 
  // refresh animation on each transition
  'refresh': false,
 
  // enable mouse wheel
  'useWheel': true,
 
  // enable keyboard interaction
  'useKeyboard':true,
 
 
});

you can check demo and download it from below link

DEMO Download

Leave a Reply

Your email address will not be published. Required fields are marked *

*


Skip to toolbar