-
Notifications
You must be signed in to change notification settings - Fork 15
/
index.html
219 lines (194 loc) · 9.79 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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
<!DOCTYPE html>
<html>
<head>
<title>diagonalFade : A jQuery plugin</title>
<meta name = "keywords" content = "diagonal, fade, jquery, plugin, slideshow, image, grid, minimal" />
<meta name = "author" content = "jonobr1" />
<meta name = "description" content = "diagonalFade is a jQuery plugin to fade in-and-out items in a container." />
<link href = "c/gs.css" media = "screen" rel = "stylesheet" type = "text/css" />
<link href = "c/style.css" media = "screen" rel = "stylesheet" type = "text/css" />
<script type = "text/javascript" src = "//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type = "text/javascript" src = "j/jquery.diagonalFade.js"></script>
<script type = "text/javascript">
//<![CDATA[
// Automates the diagonalFade effect
function slideshow(selector, _f) {
var x = parseInt(Math.random() * 2); // left-right
var y = parseInt(Math.random() * 2); // top-bototm
var f = _f; // fade out || fade in
if(x > 0) x = 'left-right';
else x = 'right-left';
if(y > 0) y = 'top-bottom';
else y = 'bottom-top';
var s = 'out';
if(f) {
s = 'in';
f = false;
} else {
s = 'out';
f = true;
}
$(selector).diagonalFade({
time: 100,
fadeDirection_x: x,
fadeDirection_y: y,
fade: s,
complete: function() {
slideshow(selector, f);
}
});
}
$(function() {
// select our containers and execute the slideshow
slideshow("#image_cascade", false);
slideshow("#text_cascade", false);
});
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-5927630-15']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
//]]>
</script>
</head>
<body>
<div class = "container_9 section">
<h1>diagonalFade</h1>
</div>
<div class = "container_9" style = "border:none; margin-top: 0px; margin-bottom: 0px;">
<p class = "grid_3">
is a <a href = "http://jquery.com/">jQuery</a> plugin allowing you to easily specify direction, fade-in, fade-out, and a host of other options to a grouping of elements. All you have to do is import it, specify the container to which the group of items resides, and poof, you're off and away.
</p>
<p class = "grid_3">
diagonalFade is great for inventory or anything with a large amount of items ordered in a <a href = "http://960.gs/">grid</a>. diagonalFade has been tested in all modern browser's with jQuery 1.3.2 — if you'd like to share any of your findings please don't hesitate to contribute on <a href = "http://github.com/jonobr1/diagonalFade">GitHub</a>!
</p>
<div class = "grid_3">
<center>
<a id = "download" href = "https://github.com/jonobr1/diagonalFade/raw/gh-pages/j/jquery.diagonalFade.min.js"><img src = "i/download.png" width = "90" height = "90" alt = "Download" /></a>
<br />
<span class = "mute">Download the minified version (4kb)</span>
</center>
</div>
<div class = "clear"></div>
</div>
<div class = "container_9 section" style = "margin-top: 0px;">
<div class = "grid_3">
<h3>Diagonal Fade Examples</h3>
<h3>Fixed Width</h3>
</div>
<p style = "color: #999; margin: 0; vertical-align: bottom;">
<br /><br />
Don't be shy—view source!
</p>
<div class = "clear"></div>
</div>
<div class = "container_9 section">
<h3>Usage</h3>
<p style = "padding: 25px; background: #ffc;" class = "grid_5">
<code>
$("#container").diagonalFade({<br />
<span style = "margin-left: 25px;">time: 100,<br /></span>
<span style = "margin-left: 25px;">fadeDirection_x: 'left-right', // "left-right" || "right-left"<br /></span>
<span style = "margin-left: 25px;">fadeDirection_y: 'top-bottom', // "top-bottom" || "bottom-top"<br /></span>
<span style = "margin-left: 25px;">fade: 'out', // "in" || "out"<br /></span>
<span style = "margin-left: 25px;">complete: null // callback function<br /></span>
});<br /><br />
// or $("#container").diagonalFade(); — these are all optional params.
</code>
</p>
<div class = "clear"></div>
</div>
<div class = "container_9 section">
Example with <code><img></code>'s:
</div>
<div id = "image_cascade" class = "container_9">
<!-- width and height must be defined on the first img -->
<!-- img's must all be same width and height -->
<img src = "i/1.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/2.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/3.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/4.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/5.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/6.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/7.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/8.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/9.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/10.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/11.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/12.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/13.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/14.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/15.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/16.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/17.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/18.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/19.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/20.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/21.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/22.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/23.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/24.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/25.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/26.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/27.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/28.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/29.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/30.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/31.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/32.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/33.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/34.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/35.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<img src = "i/36.jpg" height = "125" class = "grid_1" alt = "Shoes" />
<div class = "clear"></div>
</div>
<div class = "container_9 section">
Example with <code><div></code>'s:
</div>
<div id = "text_cascade" class = "container_9">
<div width = "100" class = "grid_1 character">A</div>
<div width = "100" class = "grid_1 character">B</div>
<div width = "100" class = "grid_1 character">C</div>
<div width = "100" class = "grid_1 character">D</div>
<div width = "100" class = "grid_1 character">E</div>
<div width = "100" class = "grid_1 character">F</div>
<div width = "100" class = "grid_1 character">G</div>
<div width = "100" class = "grid_1 character">H</div>
<div width = "100" class = "grid_1 character">I</div>
<div width = "100" class = "grid_1 character">J</div>
<div width = "100" class = "grid_1 character">K</div>
<div width = "100" class = "grid_1 character">L</div>
<div width = "100" class = "grid_1 character">M</div>
<div width = "100" class = "grid_1 character">N</div>
<div width = "100" class = "grid_1 character">O</div>
<div width = "100" class = "grid_1 character">P</div>
<div width = "100" class = "grid_1 character">Q</div>
<div width = "100" class = "grid_1 character">R</div>
<div width = "100" class = "grid_1 character">S</div>
<div width = "100" class = "grid_1 character">T</div>
<div width = "100" class = "grid_1 character">U</div>
<div width = "100" class = "grid_1 character">V</div>
<div width = "100" class = "grid_1 character">W</div>
<div width = "100" class = "grid_1 character">X</div>
<div width = "100" class = "grid_1 character">Y</div>
<div width = "100" class = "grid_1 character">Z</div>
<div width = "100" class = "grid_1 character">0</div>
<div width = "100" class = "grid_1 character">1</div>
<div width = "100" class = "grid_1 character">2</div>
<div width = "100" class = "grid_1 character">3</div>
<div width = "100" class = "grid_1 character">4</div>
<div width = "100" class = "grid_1 character">5</div>
<div width = "100" class = "grid_1 character">6</div>
<div width = "100" class = "grid_1 character">7</div>
<div width = "100" class = "grid_1 character">8</div>
<div width = "100" class = "grid_1 character">9</div>
<div width = "100" class = "clear"></div>
</div>
<div class = "container_9 section">
By <a href = "http://jonobr1.com/">jonobr1</a> — only for <a href = "http://jquery.com/">jQuery</a>. Images from <a href = "http://needsupply.com/">Need Supply Co.</a>
</div>
</body>
</html>