Permalink
Browse files

Animated the feature set.

  • Loading branch information...
1 parent 9274945 commit a1f8c0d21010d1453455fcd96fc96a3e394a0d34 @oldestlivingboy oldestlivingboy committed Nov 23, 2011
View
BIN 0.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN 0.psd
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN 1.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN 1.psd
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN 2.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN 2.psd
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN 3.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN 3.psd
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
File renamed without changes
View
File renamed without changes
View
BIN 5.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN 5.psd
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -45,7 +45,7 @@ body { margin: 0 }
#header img { width: 320px }
-#header .description, .name, input { font-size: 20px }
+#header .description, .name, .feature, input { font-size: 20px }
#header .description, #footer { color: #999 }
@@ -125,17 +125,26 @@ body { margin: 0 }
#actions { margin-left: 32px }
-#actions td { vertical-align: middle }
-
#preview, #installation, #subscription { display: inline-block }
-#preview { width: 40% }
+#preview, #features { position: relative }
+
+#preview {
+ width: 340px;
+ height: 420px
+}
+
+#preview img, .feature, .response { display: none }
+
+#preview img, .feature { position: absolute }
+
+#preview img { left: 0 }
-#installation, #footer img { vertical-align: top }
+#installation { width: 460px }
-#installation { width: 59% }
+#features { height: 16px }
-li { margin-top: 1em }
+.feature { top: 0 }
.button, input { margin: 8px 0 }
@@ -200,6 +209,10 @@ li { margin-top: 1em }
.button .name { font-size: 24px }
+.note, #press { font-size: small }
+
+.note .name { font-size: medium }
+
#subscription, input { padding: 8px }
#subscription, .email { border: 1px solid #fc0 }
@@ -239,12 +252,8 @@ span.mce_inline_error, .response {
span.mce_inline_error, #mce-error-response { color: maroon }
-.response { display: none }
-
#mce-success-response { color: green }
-.note, #press { font-size: small }
-
#press td {
width: 120px;
height: 48px
View
@@ -87,31 +87,54 @@
<table id="actions">
<tr>
<td id="preview">
- <img src="popup.png" alt="Popup bubble">
+ <img
+ src="0.png"
+ alt="Toolbar button and popup bubble"
+ ><img
+ src="1.png"
+ alt="Toolbar button and popup bubble"
+ ><img
+ src="2.png"
+ alt="Toolbar button and popup bubble"
+ ><img
+ src="3.png"
+ alt="Toolbar button and popup bubble"
+ ><img
+ src="4.png"
+ alt="Toolbar button and popup bubble"
+ ><img
+ src="5.png"
+ alt="Toolbar button and popup bubble"
+ >
</td>
<td id="installation">
<div class="description">
- Stop third parties and search engines from tracking the webpages
- you go to and searches you do<em>.</em>
- <p>
- <span class="name">Disconnect</span>:
- </p>
- <ul>
- <li>disables third-party tracking,</li>
- <li>truly depersonalizes searches,</li>
- <li>shows blocked resources and cookies,</li>
- <li>lets you easily unblock services, and</li>
- <li>
- is free for Chrome, Firefox, and Safari<em>!</em>
- </li>
- </ul>
- </div>
- <div class="button inactive">
- <div class="button-surface top"></div>
- <div class="button-surface bottom"></div>
- <div class="label">
- Install
- <span class="name">Disconnect</span>
+ <span class="name">Disconnect</span>
+ stops third parties and search engines from tracking the webpages
+ you go to and searches you do.
+ <br>
+ <br>
+ <br>
+ <div id="features">
+ <div class="feature">
+ See how many tracking requests are blocked.
+ </div>
+ <div class="feature">
+ Find out what services are trying to track you.
+ </div>
+ <div class="feature">
+ Unblock the services you want to use.
+ </div>
+ </div>
+ <br>
+ <br>
+ <div class="button inactive">
+ <div class="button-surface top"></div>
+ <div class="button-surface bottom"></div>
+ <div class="label">
+ Install
+ <span class="name">Disconnect</span>
+ </div>
</div>
</div>
</td>
View
@@ -50,6 +50,32 @@ function unhighlight(control, timeout, prefix, color, highlightedColor) {
highlight(control, timeout, prefix, color, highlightedColor, true);
}
+/* Choreographs a feature dance. */
+function preview() {
+ var screenshot = '#preview img';
+ var visible = ':visible';
+ var visibleScreenshot = screenshot + visible;
+ $(visibleScreenshot + ':lt(5)').hide();
+ $(visibleScreenshot).fadeOut();
+ var timeout = 0;
+ var feature = '.feature';
+
+ $(screenshot).each(function(index) {
+ var remainder = index % 2;
+
+ !remainder && setTimeout(function() {
+ $(feature + visible).fadeOut();
+ setTimeout(function() { $(feature).eq(index / 2).fadeIn(); }, 1000);
+ }, timeout);
+
+ setTimeout(function() { $(this).fadeIn(); }.bind(this), timeout + 2000);
+
+ timeout += 1000 + remainder * 2000;
+ });
+
+ setTimeout(preview, 30000);
+}
+
/* Registers tabbing, installation, and subscription handlers. */
$(function($) {
var tabPrefix = '.tab';
@@ -67,6 +93,7 @@ $(function($) {
location = '/' + (id == 'homepage' ? '' : id);
});
+ setTimeout(preview, 1000);
var browser = $.browser;
var mozilla = browser.mozilla;
var tokens;

0 comments on commit a1f8c0d

Please sign in to comment.