-
Notifications
You must be signed in to change notification settings - Fork 0
/
changelog.html
200 lines (174 loc) · 12.6 KB
/
changelog.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="author" content="" />
<meta name="description" content="" />
<title>jQuery.parallax</title>
<script>document.documentElement.className = 'js';</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<!-- Force latest IE rendering engine & Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- Make IE recognise HTML5 elements for styling -->
<!--[if lte IE 8]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<noscript>
<strong>Warning!</strong>
Your browser does not support HTML5 so some elements on this page are simulated using JScript. Unfortunately your browser has JScript disabled. Please enable it in order to display this page.
</noscript>
<![endif]-->
<!-- Disable image toolbar in IE6 -->
<!--[if lte IE 6]><meta http-equiv="imagetoolbar" content="no" /><![endif]-->
<link rel="icon" type="image/png" href="images/favicon.png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="stylesheet" type="text/css" href="http://stephband.info/css/template.min.css" />
<link rel="stylesheet" type="text/css" href="http://stephband.info/css/template.theme.min.css" />
<link rel="stylesheet" type="text/css" href="http://stephband.github.com/css/site.layout.css" />
<link rel="stylesheet" type="text/css" href="http://stephband.github.com/css/docs.classes.css" />
<!--[if (lt IE 9)&(!IEMobile)]>
<link rel="stylesheet" href="http://stephband.info/css/template.layout.32em.css" media="all" />
<link rel="stylesheet" href="http://stephband.info/css/template.layout.48em.css" media="all" />
<![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="http://stephband.infocss/template.ie.css" /><![endif]-->
<!--[if IE 8]><link rel="stylesheet" href="http://stephband.infocss/template.ie8.css" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="http://stephband.infocss/template.ie7.css" /><![endif]-->
<!--[if IE 6]><link rel="stylesheet" href="http://stephband.infocss/template.ie6.css" /><![endif]-->
<link rel="stylesheet" href="css/jquery.parallax.css" />
</head>
<body>
<header class="site_header" id="page_header">
<div class="site_wrap wrap">
<a class="logo_thumb thumb" href="http://stephband.info" title="stephband" rel="index">
<h1>stephband.info</h1>
</a>
</div>
</header>
<div class="site_wrap wrap" id="content">
<h2>jParallax</h2>
<h3>Repository</h3>
<ul>
<li><a href="http://github.com/stephband/jparallax">http://github.com/stephband/jparallax</a></li>
<li>git clone [email protected]:stephband/jparallax.git</li>
</ul>
<h3>Changelog</h3>
<h4>2.0</h4>
<p>A re-write that irons out bugs</p>
<h4>Changes to jParallax 0.9.x > 1.x</h4>
<p>jParallax is more flexible, the options have been simplified, and events added for controlling behaviour of layers. Those who are used to the beta versions will find a few things have changed:</p>
<h4>Changes to the API</h4>
<ul>
<li><strong>Namespace changed to .parallax() </strong>jParallax adds the namespace <code>.parallax()</code> to jQuery. I prefer this to the previous <code>.jparallax()</code> as it fits the plain-language jQuery ethos. If you don't like it, you can change it back with the first variable in the plugin <code>var plugin = 'parallax';</code>.</li>
<li><strong>Declared on layers </strong><code>.parallax()</code> is now declared on the <em>layers</em> rather than on a 'viewport' wrapper. You can now be more selective about which elements parallax and which do not, and you can even choose to parallax layers in different viewports at the same time. In short, it's much more flexible. (It also saves some unnecessary mucking about internally.)</li>
<li><strong>Freeze and re-position </strong>Freeze layers and send them to specific positions using the custom events <code>'freeze'</code> and <code>'unfreeze'</code>.</li>
<li><strong>Body is the default mouseport</strong> By default parallaxing layers will react to mouse movement over the whole body. Use the <code>mouseport</code> option to set another element to react to. For the classic parallax-in-a-viewport effect, you will want to set <code>mouseport</code> to the same element you are using as a viewport.</li>
<li><strong>Set up viewports using CSS </strong>It is up to you to create a viewport, if that's the effect you are looking for, using CSS. jParallax comes with some CSS that will get you started.</li>
<li><strong>Set up mouseports using CSS </strong>You can now define where the limits of a mouseport's reactive area are, using CSS borders and padding. You'll find that to be useful for setting up a row of parallaxing thumbnails [hint, hint].</li>
<li><strong>linkResponse option removed </strong>Use the new <code>freeze</code> event, which allows full control over positioning. It is fairly easy to set up <code>linkResponse</code> functionality using <code>freeze</code> events.</li>
<li><strong>xtravel and ytravel options removed </strong>Scaling factors for the range a layer travels are now passed in as xparallax and yparallax. These options also still accept true and false.</li>
</ul>
<h4>Changes to the code</h4>
<ul>
<li><strong>Requires jquery.event.frame </strong>jParallax relies on <a href="http://webdev.stephband.info/events/frame/">jquery.event.frame</a> for animation timing. The special <code>frame</code> event was developed specifically for use with jParallax and other plugins that require frame-based animation timers. It's included in the download. You can read about it at <a href="http://webdev.stephband.info/events/frame/">webdev.stephband.info/events/frame/</a>.</li>
<li><strong>Moveable mouseport </strong> In the Beta, jParallax would 'lose' the mouseport if it was moved after jParallax was declared: its position was cached. This has been fixed. Now it's position is cached each time the mouse enters it. (For that reason, you probably shouldn't try moving the mouseport while you're using it. I can't think of a condition when you might want to do that - a parallax inside a parallax? Anyone?)</li>
<li><strong>Padding and border detection on mouseport </strong>Padding an border are detected and used to control the reactive area of mouseport.</li>
<li><strong>Mouseport position no longer cached</strong> Caching the position caused problems when the mouseport was moved after instantiation.</li>
<li><strong>All unanimated CSS removed</strong></li> Accompanying stylesheet included in download</li>
<li><strong>Multiple instances bug fixed in IE6</strong></li>
<li><strong>Uses 0-10% less CPU</strong> In my unscientific tests, which involve watching the CPU meter while playing around with the same test running each version of jParallax, version 1.0 uses about 10% less CPU in Safari 4, 5% less in Opera 9.8, about the same in Firefox 3.5.5. I haven't been able to do these kinds of tests on Windows. If anyone has some anecdotal results, send 'em on...</li>
</ul>
<h4><del>0.9.9</del></h4>
<p>Withdrawn after it was realised that in refactoring it, I'd made something equally befuddled as the previous version, and it still had bugs. Some ideas from it were used to start v1.0.</p>
<ul>
<li>Implemented events for internal control of calculation and animation, and external control of goodies like "freeze" and "link".</li>
<li>Options added: cssLayers and cssViewport, for 'embedding' styles in the jParallax declaration, should you want to.</li>
<li>triggerResponse is now linkResponse</li>
</ul>
<h4>0.9.1</h4>
<ul>
<li>Fixed bug when specifying travel by %.</li>
<li>Travel px or % detection has more robust Regex.</li>
</ul>
<h4>0.9</h4>
<ul>
<li>Code optimisation.</li>
</ul>
<h4>0.8.1</h4>
<ul>
<li>Tested in Safari, Firefox 3, IE6, IE7, Google Chrome (Beta) and Opera 9.5. IE6 has trouble handling multiple jParallax instances when they are declared on one jQuery selector. Other than that, all present and correct. Declare your doctypes!</li>
<li>Bug fixed in matrixSearch.</li>
</ul>
<h4>0.8</h4>
<ul>
<li>Gracefully handles window resize.</li>
<li>Begins to shoot for proper IE support.</li>
<li>Positioning algorithm re-written. In fact, it can barely be called an algorithm any longer, as the positioning now relies almost solely on CSS. Whereas previously it was defined absolutely in pixels, positioning is now defined by <em>percentage</em> combined with variable (negative) margins, forcing the browser CSS engine to take more responsibility for re-positioning. This means that window resizing is smooth, and the Javascript has less calculating to do. However, it may be more of a CPU hog this way. Some testing will be done.</li>
<li>Due to the above changes, some Options and Layer Options now mean something slightly different to their original definitions. For example, xtravel is now a <em>ratio</em> by default rather than a pixel definition.</li>
<li>Made a minor change to the way dimensions are registered - they now use the jQuery methods width(), height() and offset(), so they should no longer need to be explicitly set via CSS (although it wouldn't hurt, if you want to be sure). This also applies to layer contents.</li>
<li>Added <a href="demos_target.html">Target Demo</a> to demonstrate window resizing and Trigger Response, and updated arse demo to jParallax.</li>
<li>Some code optimising to make it faster, but there's more that can be done in this department.</li>
<li>Docs updated.</li>
</ul>
<h4>0.7 (Not released)</h4>
<ul>
<li>Unreleased. Broken.</li>
</ul>
<h4>0.6</h4>
<ul>
<li>Trigger response added.</li>
<li>New demos added. <a href="demos_stalkremote.html">Remote control</a> and a <a href="demos_arse.html">crude trigger demo</a>.</li>
<li>Options simplified. They were getting a bit out of hand. Default options are now all attributes of one object, rather than nested objects as previously. (Layer Options still work the same way, one object per layer).</li>
<li>Docs updated.</li>
</ul>
<h4>0.5</h4>
<ul>
<li>Soft Takeover animation timer and mouseport detection rewritten to get rid of jerky re-entry bugs. Life is now smoother and creamier.</li>
</ul>
<h4>0.4</h4>
<ul>
<li>Based on an idea I read somewhere on the web or possibly in the book jQuery In Action, jParallax now saves CPU by moving the layers at a maximum frameRate and not on every change of mouse co-ordinates.</li>
<li>Soft Takeover animates layers to position over time on mouseport re-entry. It's a little dodgy.</li>
</ul>
<h4>0.3</h4>
<ul>
<li>Implemented a crude Soft Takeover. It doesn't animate to position over time, just over mouse move, but it does make the mouseport entry a bit smoother.</li>
</ul>
<h4>0.2</h4>
<ul>
<li>Fixed xtravel, ytravel and mouseport initialisation.</li>
<li>Added Stalk Button demo.</li>
</ul>
<h4>0.1</h4>
<ul>
<li>Initial port to jQuery plugin framework from proof of concept code. My first jQuery plugin!</li>
<li>Colour drop demo.</li>
</ul>
</div>
<footer class="site_footer">
<div class="full_wrap wrap">
<div class="bio_col col">
<h3>Who made this?</h3>
<p>I did. I come from Scotland and I live in Lausanne, Switzerland. I make web things at <a href="http://cruncher.ch">Cruncher</a>. I miss Branston Pickle. When I'm not glued to a screen I play music and hike mountains.</p>
</div
><div class="repo_col col">
<h3>More code</h3>
<ul class="repo_index index">
<li><a href="http://stephband.info/template">Template</a></li>
<li><a href="http://stephband.info/jparallax/">jQuery.parallax</a></li>
<li><a href="http://stephband.info/jquery.event.tap/">jQuery.event.tap</a></li>
<li><a href="http://stephband.info/jquery.event.move/">jQuery.event.move</a></li>
<li><a href="http://stephband.info/jquery.event.swipe/">jQuery.event.swipe</a></li>
</ul>
</div
><div class="social_col col">
<h3>Find me on...</h3>
<ul class="social_index index">
<li><a href="http://twitter.com/stephband">twitter</a></li>
<li><a href="http://github.com/stephband">github</a></li>
<li><a href="http://plus.google.com/114566808430966059989/photos">google+</a></li>
<li><a href="http://www.linkedin.com/profile/view?id=27013870">linkedin</a></li>
</ul>
</div>
</div>
</footer>
</body>
</html>