Skip to content
Browse files

White-on-black, and shorter transitions.

  • Loading branch information...
1 parent db4116e commit b259e66d26648287066de7c2fe0deeac1c64beda @mbostock committed Jun 18, 2012
Showing with 79 additions and 78 deletions.
  1. BIN beach.jpg
  2. +45 −58 index.html
  3. BIN sky.jpg
  4. +19 −19 stack.css
  5. +15 −1 stack.v0.js
View
BIN beach.jpg
Deleted file not rendered
View
103 index.html
@@ -4,106 +4,93 @@
@import url(stack.css);
+.big {
+ font-size: 128px;
+}
+
+.caption {
+ font-size: 96px;
+ text-align: center;
+ text-shadow: 0px 2px 6px rgba(0,0,0,.5);
+}
+
</style>
<body class="overview">
<section>
- <h1><a href="https://github.com/mbostock/stack">stack.js</a></h1>
-
- <p>A presentation library with intuitive, scroll-based navigation.
-
- <p style="position:absolute;bottom:0;">Built with <a href="http://mbostock.github.com/d3/">d3.js</a>.
+ <p><b>Stack</b> is a presentation library<br> with scroll-based navigation.
+ <p class="grey">Scroll down to continue.
</section>
<section>
- <h1>Crossfades</h1>
-
- <p>Sneak a peek at the next slide by scrolling down and back.
+ <p style="position:absolute;bottom:0;">PEEK-A-BO! I see you!</p>
</section>
<section>
- <h1 style="position:absolute;bottom:0;">PEEK-A-BO! I see you!</h1>
-</section>
-
-<section style="background:url(beach.jpg);margin-left:128px;width:944px;">
- <h1 style="position:absolute;bottom:0;color:white;">Variable-width Slides</h1>
+ <p>You can also scroll with the keyboard:
+ <br>use the <b>arrow keys</b>,
+ <br>the <b>space bar</b>,
+ <br>or <b>page up</b> and <b>page down</b>.
+ <p class="grey">Multiple key presses will skip multiple slides.
</section>
<section>
- <h1>Scroll-Happy</h1>
-
- <p>Scroll many slides at once with a flick of the wrist.
- <br>Or, grab the scrollbar on the slide and jump around.
-</section>
-
-<section class="big">
- <h1>9</h1>
+ <p>You can even grab the scroll bar!
</section>
-<section class="big">
- <h1>8</h1>
+<section>
+ <h1 class="caption">9</h1>
</section>
-<section class="big">
- <h1>7</h1>
+<section>
+ <h1 class="caption">8</h1>
</section>
-<section class="big">
- <h1>6</h1>
+<section>
+ <h1 class="caption">7</h1>
</section>
-<section class="big">
- <h1>5</h1>
+<section>
+ <h1 class="caption">6</h1>
</section>
-<section class="big">
- <h1>4</h1>
+<section>
+ <h1 class="caption">5</h1>
</section>
-<section class="big">
- <h1>3</h1>
+<section>
+ <h1 class="caption">4</h1>
</section>
-<section class="big">
- <h1>2</h1>
+<section>
+ <h1 class="caption">3</h1>
</section>
-<section class="big">
- <h1>1</h1>
+<section>
+ <h1 class="caption">2</h1>
</section>
<section>
- <h1>Snap-to Scrolling</h1>
+ <h1 class="caption">1</h1>
+</section>
- <p>If you stop between slides, the stack will drift to the closest slide.
+<section style="background:url(sky.jpg);">
+ <h1 class="caption">GRATUITOUS IMAGE<br>WITH CAPTION</h1>
</section>
<section>
- <h1>Edge Detection</h1>
-
- <p>If you scroll up, the previous slide is immediately visible.
- <br>If you scroll down, the next slide is immediately visible.
- <p>(This would be more robust if WebKit supported touch events!)
+ <p>If you stop between slides,<br><b>stack snaps to the closest slide</b>.
</section>
<section>
- <h1>Keyboard Shortcuts</h1>
-
- <p>up / down / left / right
- <br>page up / page down
- <br>home / end
- <br>space / shift-space
-
- <p>Press up or down multiple times, and it does the right thing!
+ <p>Stack works on <b>iOS</b>, too.</b>
</section>
<section>
- <h1>More Features! [to-do]</h1>
-
- <p>Zoom-out overview?
- <br>Anchor fragments.
- <br>Auto-loading iframes for resource-expensive slides.
- <br>iOS & non-WebKit browser testing.
+ <p>Stack is made by <a href="http://bost.ocks.org/mike/" rel="author">Mike Bostock</a>
+ <br>and is available on <a href="https://github.com/mbostock/stack">GitHub</a>
+ <br>under the <a href="https://github.com/mbostock/stack/blob/gh-pages/LICENSE">BSD license</a>.
+ <p class="grey">View source to get started.
</section>
<script src="d3.v2.js?2.7.3"></script>
View
BIN sky.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
38 stack.css
@@ -6,23 +6,27 @@ body {
}
a {
- color: steelblue;
+ color: #6baed6;
}
a:not(:hover) {
text-decoration: none;
}
.stack {
- background: #fff;
+ background: #000;
+ color: #fff;
box-shadow: 0px 4px 8px rgba(0,0,0,.5);
+ box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ -ms-box-sizing: border-box;
+ -o-box-sizing: border-box;
display: none;
- font-size: 36px;
- height: 640px;
- line-height: 1.5em;
- margin-bottom: 40px;
- padding: 40px;
- width: 1200px;
+ font-size: 48px;
+ height: 800px;
+ padding: 160px 80px;
+ width: 1280px;
-webkit-transform: translate3d(0,0,0);
}
@@ -31,24 +35,20 @@ a:not(:hover) {
position: fixed;
}
-
-h1 {
- font-size: 72px;
- margin-top: 0;
-}
-
-.big h1 {
- text-align: center;
- margin-top: 300px;
- font-size: 256px;
+.grey {
+ color: #969696;
}
@media
screen and (-webkit-min-device-pixel-ratio: 2),
screen and (min-device-width: 768px) and (max-device-width: 1024px),
screen and (max-device-width: 480px) {
body {
- margin: 40px auto 40px auto;
+ width: 1200px;
+ }
+
+ .stack {
+ margin: 40px 0;
}
.stack {
View
16 stack.v0.js
@@ -5,7 +5,8 @@ var stack = (function() {
body = document.body,
root = body,
timeout,
- duration = 750,
+ duration = 250,
+ ease = "cubic-in-out",
screenX,
screenY,
size,
@@ -46,6 +47,7 @@ var stack = (function() {
leap(y1);
d3.select(root).transition()
.duration(duration)
+ .ease(ease)
.tween("scrollTop", tween(yTarget = y1))
.each("end", function() { yTarget = null; self.on("scroll.stack", scroll); });
}
@@ -165,5 +167,17 @@ var stack = (function() {
};
}
+ stack.duration = function(_) {
+ if (!arguments.length) return duration;
+ duration = _;
+ return stack;
+ };
+
+ stack.ease = function(_) {
+ if (!arguments.length) return ease;
+ ease = _;
+ return stack;
+ };
+
return stack;
})();

0 comments on commit b259e66

Please sign in to comment.
Something went wrong with that request. Please try again.