Latest Movie :

Smooth Multi purpose Javascript Scroller

Multi-purpose Javascript Smooth Scroller - iscroll

Here is croll which is a powerful, mobile touch-friendly javascript smooth scroller library for multiple purpose.If you want more Scroller then keep watching bloggingtrainings.blogspot.com. below is link for downloading and demo.

Here is Basic Usage (create an image carousel):

Load the iscroll.js in the html document.
1<script type="text/javascript" src="iscroll.js"></script>
Create the html for an image carousel following the html structure like this:
01<body onload="loaded()">
02<div id="viewport">
03<div id="wrapper">
04<div id="scroller">
05<div class="slide">
06<div class="painting giotto"></div>
07</div>
08<div class="slide">
09<div class="painting leonardo"></div>
10</div>
11<div class="slide">
12<div class="painting gaugin"></div>
13</div>
14<div class="slide">
15<div class="painting warhol"></div>
16</div>
17</div>
18</div>
19</div>
20<div id="indicator">
21<div id="dotty"></div>
22</div>
23</body>
The CSS to style the image carousel.
01#viewport {
02positionrelative;
03width320px;
04height240px;
05margin0 auto;
06background#444;
07overflowhidden;
08}
09#wrapper {
10width200px;
11height240px;
12margin0 auto;
13}
14#scroller {
15positionabsolute;
16z-index1;
17-webkit-tap-highlight-color: rgba(0,0,0,0);
18width800px;
19height240px;
20-webkit-transform: translateZ(0);
21-moz-transform: translateZ(0);
22-ms-transform: translateZ(0);
23-o-transform: translateZ(0);
24transform: translateZ(0);
25-webkit-touch-callout: none;
26-webkit-user-select: none;
27-moz-user-select: none;
28-ms-user-select: none;
29user-select: none;
30-webkit-text-size-adjust: none;
31-moz-text-size-adjust: none;
32-ms-text-size-adjust: none;
33-o-text-size-adjust: none;
34text-size-adjust: none;
35background-color#444;
36}
37.slide {
38width200px;
39height240px;
40floatleft;
41}
42.painting {
43width140px;
44height200px;
45border-radius: 10px;
46margin20px auto;
47border1px solid #000;
48box-shadow: inset 2px 2px 6px rgba(255,255,255,0.6),  inset -2px -2px 6px rgba(0,0,0,0.6),  0 1px 8px rgba(0,0,0,0.8);
49}
50.giotto {
51backgroundurl(giotto.jpg);
52}
53.leonardo {
54backgroundurl(leonardo.jpg);
55}
56.gaugin {
57backgroundurl(gaugin.jpg);
58}
59.warhol {
60backgroundurl(warhol.jpg);
61}
62#indicator {
63positionrelative;
64width110px;
65height20px;
66margin10px auto;
67backgroundurl(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAUBAMAAABohZD3AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QUGCDYztyDUJgAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAGFBMVEUAAADNzc3Nzc3Nzc3Nzc3Nzc3Nzc3///8aWwwLAAAABnRSTlMAX5Ks3/nRD0HIAAAAAWJLR0QHFmGI6wAAAFtJREFUGFdjYGBgEHYNMWRAAJE0IHCEc5nSwEABxleD8JOgXMY0KBCA8FlgfAcIXwzGT4TwzWD8ZAjfDcZPgfDDYPxU7Hx09ejmoduH7h5096L7B8O/6OGBGl4APYg8TQ0XAScAAAAASUVORK5CYII=);
68}
69#dotty {
70positionabsolute;
71width20px;
72height20px;
73border-radius: 10px;
74background#777;
75}
The javascript to initialize the image carousel.
01<script type="text/javascript">
02
03var myScroll;
04
05function loaded () {
06myScroll = new IScroll('#wrapper', {
07scrollX: true,
08scrollY: false,
09momentum: false,
10snap: true,
11snapSpeed: 400,
12keyBindings: true,
13indicators: {
14el: document.getElementById('indicator'),
15resize: false
16}
17});
18}
19
20document.addEventListener('touchmove'function (e) { e.preventDefault(); }, false);
21</script>


Share this article :

+ comments + 1 comments

25 August 2014 at 09:32

Very Nice Post Brother.
Keep it Up :-)

Regards : Teach Leaks

Post a Comment

PLEASE DON'T PLACE BULK MESSAGE , FOR ADVERTISING!

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Blogging Trainings - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger