Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Adding quick demo

commit 751f17ba15873b7a714c44c59c32e7cabb7a8914 1 parent 866d9cc
Mark Kahn authored
Showing with 288 additions and 1 deletion.
  1. +171 −0 demos/css/demo1.css
  2. +115 −0 demos/demo1.html
  3. BIN  demos/images/Intel_Will_bg.jpg
  4. BIN  demos/images/bing-bg-01.jpg
  5. BIN  demos/images/grey-pink-dot.png
  6. BIN  demos/images/intel-bg-01.jpg
  7. BIN  demos/images/nike-logo.png
  8. BIN  demos/images/nike/thumb-0.jpg
  9. BIN  demos/images/nike/thumb-1.jpg
  10. BIN  demos/images/nike/thumb-10.jpg
  11. BIN  demos/images/nike/thumb-11.jpg
  12. BIN  demos/images/nike/thumb-12.jpg
  13. BIN  demos/images/nike/thumb-13.jpg
  14. BIN  demos/images/nike/thumb-14.jpg
  15. BIN  demos/images/nike/thumb-15.jpg
  16. BIN  demos/images/nike/thumb-16.jpg
  17. BIN  demos/images/nike/thumb-17.jpg
  18. BIN  demos/images/nike/thumb-18.jpg
  19. BIN  demos/images/nike/thumb-19.jpg
  20. BIN  demos/images/nike/thumb-2.jpg
  21. BIN  demos/images/nike/thumb-20.jpg
  22. BIN  demos/images/nike/thumb-21.jpg
  23. BIN  demos/images/nike/thumb-22.jpg
  24. BIN  demos/images/nike/thumb-23.jpg
  25. BIN  demos/images/nike/thumb-24.jpg
  26. BIN  demos/images/nike/thumb-25.jpg
  27. BIN  demos/images/nike/thumb-26.jpg
  28. BIN  demos/images/nike/thumb-3.jpg
  29. BIN  demos/images/nike/thumb-4.jpg
  30. BIN  demos/images/nike/thumb-5.jpg
  31. BIN  demos/images/nike/thumb-6.jpg
  32. BIN  demos/images/nike/thumb-7.jpg
  33. BIN  demos/images/nike/thumb-8.jpg
  34. BIN  demos/images/nike/thumb-9.jpg
  35. BIN  demos/images/razorfish-logo.png
  36. BIN  demos/images/william-bg.jpg
  37. BIN  images/grey-dot.png
  38. BIN  images/grey-pink-dot.png
  39. BIN  images/menu-arrow.png
  40. BIN  images/menu-bg.png
  41. 0  {lib → js}/backgrounds.js
  42. 0  {lib → js}/html5.js
  43. 0  {lib → js}/jquery-1.7.1.js
  44. 0  {lib → js}/jquery-1.7.min.js
  45. 0  {lib → js}/kinetics.js
  46. 0  {lib → js}/parallax.js
  47. +1 −1  {lib → js}/side-nav.js
  48. +1 −0  readme.md
171 demos/css/demo1.css
View
@@ -0,0 +1,171 @@
+/***************
+ * Intro Panel *
+ ***************/
+#story-header {
+ color : #666;
+}
+
+#story-header #logo {
+ margin : 20px 0 50px 0;
+}
+
+#story-header h2 {
+ font-family: "Caecilia-Roman", Verdana, sans-serif;
+}
+
+#story-header .story {
+ width : 850px;
+ padding-right : 0px;
+}
+
+#story-header p {
+ width : 800px;
+ font-size : 16px;
+}
+
+#story-header ul li {
+ font-size : 16px;
+ margin : 16px 0;
+}
+
+#story-header ul {
+ padding : 0px;
+}
+
+/***************
+ * Intel Panel *
+ ***************/
+#story-intel {
+ color : #FFF;
+ background : #022639;
+}
+
+/*********************
+ * Ultrabook Project *
+ *********************/
+#story-william {
+ color : #CCC;
+ background : #000;
+}
+
+#story-william .bg {
+ left : auto;
+ right : 0px;
+}
+
+/**************
+ * Bing Panel *
+ **************/
+#story-bing {
+ color : #FFF;
+ text-shadow : 1px 1px 1px #000;
+ background : #C9BC33;
+}
+
+#story-bing .logo {
+ position : absolute;
+ right : 20%;
+ bottom : 50%;
+}
+
+#story-bing .logo.start {
+ bottom : 190%;
+}
+
+#story-bing .logo.end {
+ bottom : -90%;
+}
+
+/**************
+ * Nike Panel *
+ **************/
+#story-nike {
+ color : #CCC;
+ background : #000;
+}
+
+#story-nike .logo {
+ position : absolute;
+ right : 0%;
+ bottom : 30%;
+}
+
+#story-nike .logo.start {
+ bottom : 170%;
+}
+
+#story-nike .logo.end {
+ bottom : -210%;
+}
+
+#story-nike .box {
+ background : #000;
+ opacity : .7;
+ border-radius : 10px;
+ position : absolute;
+ top : -10px;
+ right : 440px;
+ bottom : -10px;
+ left : -10px;
+ z-index : -1;
+}
+
+#story-nike ul.slide {
+ display : block;
+ position : absolute;
+ white-space : nowrap;
+ left : -1426px;
+}
+
+#story-nike ul.slide.start {
+ left : -1425px;
+}
+
+#story-nike ul.slide li {
+ display : inline;
+}
+
+#story-nike ul.slide-1.start { opacity : 0; }
+#story-nike ul.slide-2.start { opacity : 0; }
+#story-nike ul.slide-3.start { opacity : 0; }
+
+#story-nike ul.slide-1 {
+ bottom : 0px;
+}
+
+#story-nike ul.slide-2, #story-nike ul.slide-2.to {
+ bottom : 176px;
+ left : -1425px;
+}
+
+#story-nike ul.slide-2.start {
+ left : -1426px;
+}
+
+#story-nike ul.slide-3 {
+ bottom : 352px;
+}
+
+
+#story-nike ul.slide-1.to, #story-nike ul.slide-3.to {
+ left : -1425px;
+}
+
+#story-nike ul.slide-1.end {
+ right : 0px;
+ left : auto;
+}
+
+#story-nike ul.slide-3.end {
+ right : 1200px;
+ left : auto;
+}
+
+
+#story-nike ul.slide-2.to {
+ right : 0px;
+}
+
+#story-nike ul.slide-2.end {
+ left : 200px;
+}
115 demos/demo1.html
View
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
+ <title>Parallax Demo</title>
+
+ <link href="../css/reset.css" rel="stylesheet" type="text/css" />
+ <link href="../css/chrome.css" rel="stylesheet" type="text/css" />
+ <link href="css/demo1.css" rel="stylesheet" type="text/css" />
+
+ <!--[if lt IE 9]>
+ <script src="js/html5.js"></script>
+ <![endif]-->
+
+ <script type="text/javascript" src="../js/jquery-1.7.1.js" ></script>
+ <script type="text/javascript" src="../js/side-nav.js" ></script>
+ <script type="text/javascript" src="../js/backgrounds.js" ></script>
+ <script type="text/javascript" src="../js/kinetics.js" ></script>
+
+ <!-- parallax.js really screws with the DOM, so make sure it's included last so other things don't notice :) -->
+ <script type="text/javascript" src="../js/parallax.js" ></script>
+</head>
+<body>
+ <!-- this is to make the page's vertical scrollbar appear the correct height -->
+ <div id="mock-scroller"></div>
+ <ul id="nav"></ul>
+
+ <div id="content">
+ <section id="story-header">
+ <div class="story">
+ <div id="logo">
+ <img src="images/razorfish-logo.png" width="184" height="32">
+ </div>
+
+ <h2>First Pane</h2>
+ <p>This is the first slide. Nothing much to see, just pointing it out.</p>
+ <p>Scroll Down</p>
+ </div>
+ </section>
+
+
+ <section id="story-intel" anim-pause="1000">
+ <img class="bg animate" src="images/intel-bg-01.jpg" anim-detached="true" />
+ <div class="story">
+ <div>
+ <h2>Background parallax + Pause</h2>
+ <p>
+ You'll notice that this page "locks" for a while. This feature is optional and the pause length can be controlled.
+ </p>
+ </div>
+ </div>
+ </section>
+
+
+ <section id="story-william">
+ <img class="bg animate" src="images/Intel_Will_bg.jpg" anim-detached="true" />
+ <div class="story">
+ <div>
+ <h2>Background parallax</h2>
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vehicula aliquam eros a tempus. Aenean sodales dictum augue, in faucibus nisi sollicitudin eu. Quisque et urna lacus, quis aliquam purus. Nulla semper arcu vel diam auctor condimentum. Nam molestie sem eu quam fermentum a tempus nisi aliquet. Maecenas sit amet tincidunt elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce nec ipsum ac mauris imperdiet luctus sed vitae ligula. Phasellus nec hendrerit neque.
+ </p>
+ </div>
+ </div>
+ </section>
+
+
+ <section id="story-bing">
+ <img class="bg animate" src="images/bing-bg-01.jpg" anim-detached="true" />
+ <div class="story">
+ <div>
+ <h2>Background parallax</h2>
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vehicula aliquam eros a tempus. Aenean sodales dictum augue, in faucibus nisi sollicitudin eu. Quisque et urna lacus, quis aliquam purus. Nulla semper arcu vel diam auctor condimentum. Nam molestie sem eu quam fermentum a tempus nisi aliquet. Maecenas sit amet tincidunt elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce nec ipsum ac mauris imperdiet luctus sed vitae ligula. Phasellus nec hendrerit neque.
+ </p>
+ </div>
+ </div>
+ </section>
+
+
+ <section id="story-nike" data-nav="Nike">
+ <ul class="slide slide-1 animate" anim-detached="true">
+ <li><img src="images/nike/thumb-0.jpg" width="317" height="176"></li><li><img src="images/nike/thumb-1.jpg" width="317" height="176"></li><li><img src="images/nike/thumb-2.jpg" width="317" height="176"></li><li><img src="images/nike/thumb-3.jpg" width="317" height="176"></li><li><img src="images/nike/thumb-4.jpg" width="317" height="176"></li><li><img src="images/nike/thumb-5.jpg" width="317" height="176"></li><li><img src="images/nike/thumb-6.jpg" width="317" height="176"></li><li><img src="images/nike/thumb-7.jpg" width="317" height="176"></li><li><img src="images/nike/thumb-8.jpg" width="317" height="176"></li><li><img src="images/nike/thumb-0.jpg" width="317" height="176"></li><li><img src="images/nike/thumb-1.jpg" width="317" height="176"></li><li><img src="images/nike/thumb-2.jpg" width="317" height="176"></li><li><img src="images/nike/thumb-3.jpg" width="317" height="176"></li><li><img src="images/nike/thumb-4.jpg" width="317" height="176"></li><li><img src="images/nike/thumb-5.jpg" width="317" height="176"></li><li><img src="images/nike/thumb-6.jpg" width="317" height="176"></li><li><img src="images/nike/thumb-7.jpg" width="317" height="176"></li><li><img src="images/nike/thumb-8.jpg" width="317" height="176"></li>
+ </ul>
+ <ul class="slide slide-2 animate" anim-detached="true">
+ <li><img src="images/nike/thumb-9.jpg" width="317" height="176"></li><li><img src="images/nike/thumb-10.jpg" width="317" height="176"></li><li><img src="images/nike/thumb-11.jpg" width="317" height="176"></li><li><img src="images/nike/thumb-12.jpg" width="317" height="176"></li><li><img src="images/nike/thumb-13.jpg" width="317" height="176"></li><li><img src="images/nike/thumb-14.jpg" width="317" height="176"></li><li><img src="images/nike/thumb-15.jpg" width="317" height="176"></li><li><img src="images/nike/thumb-16.jpg" width="317" height="176"></li><li><img src="images/nike/thumb-17.jpg" width="317" height="176"></li><li><img src="images/nike/thumb-9.jpg" width="317" height="176"></li><li><img src="images/nike/thumb-10.jpg" width="317" height="176"></li><li><img src="images/nike/thumb-11.jpg" width="317" height="176"></li><li><img src="images/nike/thumb-12.jpg" width="317" height="176"></li><li><img src="images/nike/thumb-13.jpg" width="317" height="176"></li><li><img src="images/nike/thumb-14.jpg" width="317" height="176"></li><li><img src="images/nike/thumb-15.jpg" width="317" height="176"></li><li><img src="images/nike/thumb-16.jpg" width="317" height="176"></li><li><img src="images/nike/thumb-17.jpg" width="317" height="176"></li>
+ </ul>
+ <ul class="slide slide-3 animate" anim-detached="true">
+ <li><img src="images/nike/thumb-18.jpg" width="317" height="176"></li><li><img src="images/nike/thumb-19.jpg" width="317" height="176"></li><li><img src="images/nike/thumb-20.jpg" width="317" height="176"></li><li><img src="images/nike/thumb-21.jpg" width="317" height="176"></li><li><img src="images/nike/thumb-22.jpg" width="317" height="176"></li><li><img src="images/nike/thumb-23.jpg" width="317" height="176"></li><li><img src="images/nike/thumb-24.jpg" width="317" height="176"></li><li><img src="images/nike/thumb-25.jpg" width="317" height="176"></li><li><img src="images/nike/thumb-26.jpg" width="317" height="176"></li><li><img src="images/nike/thumb-18.jpg" width="317" height="176"></li><li><img src="images/nike/thumb-19.jpg" width="317" height="176"></li><li><img src="images/nike/thumb-20.jpg" width="317" height="176"></li><li><img src="images/nike/thumb-21.jpg" width="317" height="176"></li><li><img src="images/nike/thumb-22.jpg" width="317" height="176"></li><li><img src="images/nike/thumb-23.jpg" width="317" height="176"></li><li><img src="images/nike/thumb-24.jpg" width="317" height="176"></li><li><img src="images/nike/thumb-25.jpg" width="317" height="176"></li><li><img src="images/nike/thumb-26.jpg" width="317" height="176"></li>
+ </ul>
+
+ <div class="story">
+ <div class="box"></div>
+ <img class="logo animate" src="images/nike-logo.png" anim-detached="true" width="316" height="80" />
+ <div>
+ <h2>Page done for nike</h2>
+ <h3>Some parallax</h3>
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vehicula aliquam eros a tempus. Aenean sodales dictum augue, in faucibus nisi sollicitudin eu. Quisque et urna lacus, quis aliquam purus. Nulla semper arcu vel diam auctor condimentum. Nam molestie sem eu quam fermentum a tempus nisi aliquet. Maecenas sit amet tincidunt elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce nec ipsum ac mauris imperdiet luctus sed vitae ligula. Phasellus nec hendrerit neque.
+ </p>
+ </div>
+ </div>
+ </section>
+
+
+ <section id="story-foo" anim-pause="500">
+ <div class="story">
+ <h2>Misc. Stuff</h2>
+ <p>Some more parallax stuff.</p>
+ </div>
+ </section>
+ </div>
+</body>
+</html>
BIN  demos/images/Intel_Will_bg.jpg
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  demos/images/bing-bg-01.jpg
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  demos/images/grey-pink-dot.png
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  demos/images/intel-bg-01.jpg
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  demos/images/nike-logo.png
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  demos/images/nike/thumb-0.jpg
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  demos/images/nike/thumb-1.jpg
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  demos/images/nike/thumb-10.jpg
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  demos/images/nike/thumb-11.jpg
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  demos/images/nike/thumb-12.jpg
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  demos/images/nike/thumb-13.jpg
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  demos/images/nike/thumb-14.jpg
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  demos/images/nike/thumb-15.jpg
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  demos/images/nike/thumb-16.jpg
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  demos/images/nike/thumb-17.jpg
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  demos/images/nike/thumb-18.jpg
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  demos/images/nike/thumb-19.jpg
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  demos/images/nike/thumb-2.jpg
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  demos/images/nike/thumb-20.jpg
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  demos/images/nike/thumb-21.jpg
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  demos/images/nike/thumb-22.jpg
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  demos/images/nike/thumb-23.jpg
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  demos/images/nike/thumb-24.jpg
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  demos/images/nike/thumb-25.jpg
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  demos/images/nike/thumb-26.jpg
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  demos/images/nike/thumb-3.jpg
View
Diff not rendered
BIN  demos/images/nike/thumb-4.jpg
View
Diff not rendered
BIN  demos/images/nike/thumb-5.jpg
View
Diff not rendered
BIN  demos/images/nike/thumb-6.jpg
View
Diff not rendered
BIN  demos/images/nike/thumb-7.jpg
View
Diff not rendered
BIN  demos/images/nike/thumb-8.jpg
View
Diff not rendered
BIN  demos/images/nike/thumb-9.jpg
View
Diff not rendered
BIN  demos/images/razorfish-logo.png
View
Diff not rendered
BIN  demos/images/william-bg.jpg
View
Diff not rendered
BIN  images/grey-dot.png
View
Diff not rendered
BIN  images/grey-pink-dot.png
View
Diff not rendered
BIN  images/menu-arrow.png
View
Diff not rendered
BIN  images/menu-bg.png
View
Diff not rendered
0  lib/backgrounds.js → js/backgrounds.js
View
File renamed without changes
0  lib/html5.js → js/html5.js
View
File renamed without changes
0  lib/jquery-1.7.1.js → js/jquery-1.7.1.js
View
File renamed without changes
0  lib/jquery-1.7.min.js → js/jquery-1.7.min.js
View
File renamed without changes
0  lib/kinetics.js → js/kinetics.js
View
File renamed without changes
0  lib/parallax.js → js/parallax.js
View
File renamed without changes
2  lib/side-nav.js → js/side-nav.js
View
@@ -12,7 +12,7 @@ $(function(){
$nav.append( '<li class="' + sId + '"><h1><span>' + sTitle + '</span></h1><a href="#' + sId + '">' + sId + '</a></li>' )
} );
- $( '<style>' + aRules.join( ', ' ) + '{ background : url( ./resources/images/grey-pink-dot.png ) 0 100% no-repeat; }</style>' ).appendTo( $( 'head' ) );
+ $( '<style>' + aRules.join( ', ' ) + '{ background : url( images/grey-pink-dot.png ) 0 100% no-repeat; }</style>' ).appendTo( $( 'head' ) );
$nav
.on( 'click', 'a', function(){
1  readme.md
View
@@ -22,6 +22,7 @@ Add properties to your elements, e.g. `<section anim-pause="200">`
- `anim-speed` -- Speed multiplier for the animation. Defaults to `1`
- `onFocus` -- Global JS function name to call when the animation comes into focus
- `onBlur` -- Global JS function name to call when the animation leaves focus
+- `data-nav` -- Name for navigation sidebar. Overrides default generated by `side-nav.js`
### Side Navigation
Please sign in to comment.
Something went wrong with that request. Please try again.