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 {

02position: relative;

03width: 320px;

04height: 240px;

05margin: 0 auto;

06background: #444;

07overflow: hidden;

08}

09#wrapper {

10width: 200px;

11height: 240px;

12margin: 0 auto;

13}

14#scroller {

15position: absolute;

16z-index: 1;

17-webkit-tap-highlight-color: rgba(0,0,0,0);

18width: 800px;

19height: 240px;

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 {

38width: 200px;

39height: 240px;

40float: left;

41}

42.painting {

43width: 140px;

44height: 200px;

45border-radius: 10px;

46margin: 20px auto;

47border: 1px 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 {

51background: url(giotto.jpg);

52}

53.leonardo {

54background: url(leonardo.jpg);

55}

56.gaugin {

57background: url(gaugin.jpg);

58}

59.warhol {

60background: url(warhol.jpg);

61}

62#indicator {

63position: relative;

64width: 110px;

65height: 20px;

66margin: 10px auto;

67background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAUBAMAAABohZD3AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QUGCDYztyDUJgAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAGFBMVEUAAADNzc3Nzc3Nzc3Nzc3Nzc3Nzc3///8aWwwLAAAABnRSTlMAX5Ks3/nRD0HIAAAAAWJLR0QHFmGI6wAAAFtJREFUGFdjYGBgEHYNMWRAAJE0IHCEc5nSwEABxleD8JOgXMY0KBCA8FlgfAcIXwzGT4TwzWD8ZAjfDcZPgfDDYPxU7Hx09ejmoduH7h5096L7B8O/6OGBGl4APYg8TQ0XAScAAAAASUVORK5CYII=);

68}

69#dotty {

70position: absolute;

71width: 20px;

72height: 20px;

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>

Demo

Download

Blogging Trainings

Smooth Multi purpose Javascript Scroller

Here is Basic Usage (create an image carousel):

Post a Comment

Advertisement

Labels

Popular Posts

Books Categories

Ad

visitors