-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy paththumbscroll.html
135 lines (129 loc) · 5.5 KB
/
thumbscroll.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
<!DOCTYPE html>
<html>
<head>
<title>thumbscroll</title>
<script src="jquery-1.10.2.min.js"> </script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
jax: ["input/TeX", "input/MathML", "output/SVG", "output/HTML-CSS"],
extensions: ["tex2jax.js", "mml2jax.js","MathMenu.js","MathZoom.js"],
TeX: {
extensions: ["AMSmath.js","AMSsymbols.js","noErrors.js","noUndefined.js"]
},
styles: {
".MathJax_SVG svg > g, .MathJax_SVG_Display svg > g": {
fill: "#FFF",
stroke: "#FFF"
}
},
SVG: {
font: "Neo-Euler",
blacker: 30
},
messageStyle: "none"
});
</script>
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js">
</script>
<script src="thumbscroll.js"> </script>
<link rel="stylesheet" href="Adrian.css">
<link rel="icon" href="Images/favicon.png" type="image/png" />
</head>
<body>
<canvas id="background" width="100%" height="100%">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript" src="polytope.js" class="icosahedron"></script>
<div class="header">
<h1> <a> thumbscroll </a> </h1>
</div>
<div class="menu">
<script>
$(document).ready(function() {
$(".menu").load("menu.html div");
});
</script>
</div>
<div class="main">
<div class="box">
<h2> Click and Drag </h2>
<div class="thumbscroll">
<div class="thumb">
<img src="Images/Tetrahedron.png">
<p> Note that the description automatically changes as thumbs slide in and out of focus. </p>
</div>
<div class="thumb">
<img src="Images/Hexahedron.png">
<p> If a description contains a link, clicking on that thumb follows the first link found.
<a href="http://en.wikipedia.org/wiki/Platonic_solid">Click the Cube</a>
</p>
</div>
<div class="thumb">
<img src="Images/Octahedron.png">
<p> Thumbs can overlap, but they will never appear to pass through one another. </p>
</div>
<div class="thumb">
<img src="Images/Dodecahedron.png">
<p> This is my favorite Platonic solid. </p>
</div>
<div class="thumb">
<img src="Images/Icosahedron.png">
<p> Images taken from wikipedia (which you would know if you clicked on the cube). </p>
</div>
</div>
</div>
<div class="box">
<p> If you've visited the <a href="projects.html">Project</a> or <a href="Chainmail">Chainmail Art</a> pages you may have noticed this element.
The idea is to have an aesthetically pleasing infinitely scrolling list of thumbnails fit into a finite space.
In order to actually insert a thumbscroll element into a webpage one does the following: </p>
<ol>
<li> Include <code>thumbscroll.js</code> and jQuery in the webpage. </li>
<li> Add a <code>div</code> element with class <code>thumbscroll</code>. </li>
<li> For each thumbnail you want add another <code>div</code> with class <code>thumb</code>. </li>
<li> Each thumbnail should have an <code>img</code> element, every thing else in the <code>div</code> will be rendered as a description. </li>
</ol>
<p> For example, here is the code for the thumbscroll above.</p>
<div class="box" style="float:right; margin-right:20pt"> <p> <code>
<div class="thumbscroll"> <br>
<div class="thumb"> <br>
<img src="Images/Tetrahedron.png"> <br>
<p> Note that the description automatically changes as thumbs slide in and out of focus. </p> <br>
</div> <br>
<div class="thumb"> <br>
<img src="Images/Hexahedron.png"> <br>
<p> If a description contains a link, clicking on that thumb follows the link. <br>
<a href="http://en.wikipedia.org/wiki/Platonic_solid">Click the Cube</a> <br>
</p> <br>
</div> <br>
<div class="thumb"> <br>
<img src="Images/Octahedron.png"> <br>
<p> Thumbs can overlap, but they will never appear to pass through one another. </p> <br>
</div> <br>
<div class="thumb"> <br>
<img src="Images/Dodecahedron.png"> <br>
<p> This is my favorite Platonic solid. </p> <br>
</div> <br>
<div class="thumb"> <br>
<img src="Images/Icosahedron.png"> <br>
<p> Images taken from wikipedia (which you would know if you clicked on the cube). </p> <br>
</div> <br>
</div> <br>
</code></p></div>
<p>The math behind a thumbscroll is governed by a relatively small set of equations.
Let the scroll area be given by a rectangle of width \(w\) and height \(h\), the offset of a thumb image be given by real number \(x\), and its midpoint be placed at \(f(x)\) and its width \(g(x)\).
Then the relevent equations are:
$$r = h/w$$
$$f(x) = \frac{w}{1 + e^{ax}}$$
$$g(x) = h e^{-bx^2} $$
$$g(1/2) = 2f(1/2) - w $$
Since \(w\) is generated when the page is rendered, this leaves two degrees of freedom, \(b\) and \(r\).
This first equation is little more than a convention,
the second states that \(f(x)\) is a Logistic Equation,
the third states that \(g(x)\) is a Gaussian,
and the final equation means that it is unambiguous to determine which image is on top.
In fact, the last equation states that the two topmost images touch when they are equally close to the middle.
</p>
</div>
</div>
</body></html>