-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
125 lines (118 loc) · 5.64 KB
/
index.html
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!--
Name: Scrollor
Author: Farhan Wazir
Email: seejee1@gmail.com
Website: http://cideator.com
Company: Creative Ideator
Website: http://cideator.com
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Scrollor JQuery Plugin by cIdeator</title>
<link href="styles/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.scrollor.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.slide-item').click(function(){
$(this.hash).scrollor({
duration: 1000,
easing: 'linear',
animateBoth: false,
axis: 'yx',
offsetLeft: 10,
offsetTop: 10,
counter: 1,
onStart: function(){
$('.slide').removeClass("active-slide");
},
onAfter: function (){
$('#status').html("Callback event onAfter triggered.");
$(this).addClass("active-slide");
},
onAfterEach: function (){
$('#status').html("Callback event onAfterEach triggered. Counter:"+ this.counter++ );
}
});
return false;
});
});
</script>
</head>
<body>
<h1 id="pagetop">Scrollor</h1>
<p>JQuery plugin for scroll page and/or element(s) by one line of code.</p>
<div class="developer">
<pre>
Plugin Name: Scrollor
Author: Farhan Wazir
Email: seejee1@gmail.com
Plugin URL: <a href="http://cideator.com/jquery/scrollor">http://cideator.com/jquery/scrollor</a>
<strong>Company Info</strong>
<img src="http://cideator.com/external_use_logos/onecolor-small-100x46.png" />
Email: cideator@gmail.com
Website: http://cideator.com
</pre>
</div>
<h3>Features:</h3>
<ol>
<li>Scrollor, find target automatically and element get in focus. Plugin just need target id, i.e <code>$(target_id).scrollor()</code></li>
<li>You can scroll single or both (x or y or xy and/or yx) axis</li>
<li>You can set your duration.</li>
<li>You can set animation easing, defaults are "swing" and "linear". If you want more then use <a href="http://api.jqueryui.com/easings/">jquery UI</a></li>
<li>You can adjust your scrolling layout by offsetTop and offsetLeft</li>
<!--<li>If you don't want scrollor only scroll your element, not parents elements then set "parents" to false. i.e <code>$(target_id).scrollor({parents:false})</code></li>-->
<li>3 different triggers you can use, onStart, onAfterEach and onAfter</li>
</ol>
<h3>Usage</h3>
<ul>
<li><code>$(target_id).scrollor()</code></li>
</ul>
<h3>Options</h3>
<ul class="options">
<li><span class="type"><strong>duration:</strong> (Number), default:500</span> in miliseconds, example: 1000 = 1 second</li>
<li><span class="type"><strong>durationMode:</strong> (Boolean), default:true</span> true/false</li>
<li><span class="type"><strong>easing:</strong> (String), default:"swing"</span> available "swing" and "linear", for more use <a href="http://api.jqueryui.com/easings/">jquery UI</a></li>
<li><span class="type"><strong>offsetTop:</strong> (Number, default:0)</span> it is margin-top of target element/object</li>
<li><span class="type"><strong>offsetLeft:</strong> (Number), default:0</span> it is margin-left of target element/object</li>
<li><span class="type"><strong>animateBoth:</strong> (Boolean), default:true</span> if false then animate first axis and then another axis, example: if axis: 'yx' so first scroll y and then x</li>
<li><span class="type"><strong>axis:</strong> (String), default:'xy'</span> 4 different variation you can use 'x' or 'y' or 'xy' or 'yx', if animateBoth: true then 'xy' and 'yx' both equals to 'xy' and it is false then scrollor scroll first letter of axis and then other</li>
<li><span class="type"><strong>onStart</strong> (Function), default:none</span> this is event, it triggered before scrollor start scrolling</li>
<li><span class="type"><strong>onAfter</strong> (Function), default:none</span> this is event, it triggered after scrollor complete scrolling</li>
<li><span class="type"><strong>onAfterEach</strong> (Function), default:none</span> this is event, it triggered after each axis scroll, it works when animateBoth set to false</li>
</ul>
<br />
<br />
<br />
<h2 id="demo">Demo</h2>
<div id="status"></div>
<div id="scrollor_container" class="scrollor-container">
<div id="slides" class="slides">
<div id="slide1" class="slide">This is slide 1</div>
<div id="slide2" class="slide">This is slide 2</div>
<div id="slide3" class="slide">This is slide 3</div>
<div id="slide4" class="slide">This is slide 4</div>
<div id="slide5" class="slide">This is slide 5</div>
<div id="slide6" class="slide">This is slide 6</div>
</div>
</div>
<div id="navigation" class="nav">
<ul class="menu">
<li><a href="#demo" class="slide-item">Demo</a></li>
<li><a href="#slide1" class="slide-item">Slide 1</a></li>
<li><a href="#slide2" class="slide-item">Slide 2</a></li>
<li><a href="#slide3" class="slide-item">Slide 3</a></li>
<li><a href="#slide4" class="slide-item">Slide 4</a></li>
<li><a href="#slide5" class="slide-item">Slide 5</a></li>
<li><a href="#slide6" class="slide-item">Slide 6</a></li>
<li><a href="#pagetop" class="slide-item">Goto Top</a></li>
<li><a href="https://github.com/farhanwazir/scrollor" class="download">DOWNLOAD</a></li>
</ul>
</div>
<br />
<br />
<div class="copyrights">Copyrights © 2014, Creative Ideator.</div>
</body>
</html>