Permalink
Browse files

Adding quick demo

  • Loading branch information...
1 parent 866d9cc commit 751f17ba15873b7a714c44c59c32e7cabb7a8914 @zyklus zyklus committed Mar 14, 2012
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
View
171 demos/css/demo1.css
@@ -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;
+}
View
115 demos/demo1.html
@@ -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>
View
BIN demos/images/Intel_Will_bg.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN demos/images/bing-bg-01.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN demos/images/grey-pink-dot.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN demos/images/intel-bg-01.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN demos/images/nike-logo.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN demos/images/nike/thumb-0.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN demos/images/nike/thumb-1.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN demos/images/nike/thumb-10.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN demos/images/nike/thumb-11.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN demos/images/nike/thumb-12.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN demos/images/nike/thumb-13.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN demos/images/nike/thumb-14.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN demos/images/nike/thumb-15.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN demos/images/nike/thumb-16.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN demos/images/nike/thumb-17.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN demos/images/nike/thumb-18.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN demos/images/nike/thumb-19.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN demos/images/nike/thumb-2.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN demos/images/nike/thumb-20.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN demos/images/nike/thumb-21.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN demos/images/nike/thumb-22.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN demos/images/nike/thumb-23.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN demos/images/nike/thumb-24.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN demos/images/nike/thumb-25.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN demos/images/nike/thumb-26.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN demos/images/nike/thumb-3.jpg
Diff not rendered.
View
BIN demos/images/nike/thumb-4.jpg
Diff not rendered.
View
BIN demos/images/nike/thumb-5.jpg
Diff not rendered.
View
BIN demos/images/nike/thumb-6.jpg
Diff not rendered.
View
BIN demos/images/nike/thumb-7.jpg
Diff not rendered.
View
BIN demos/images/nike/thumb-8.jpg
Diff not rendered.
View
BIN demos/images/nike/thumb-9.jpg
Diff not rendered.
View
BIN demos/images/razorfish-logo.png
Diff not rendered.
View
BIN demos/images/william-bg.jpg
Diff not rendered.
View
BIN images/grey-dot.png
Diff not rendered.
View
BIN images/grey-pink-dot.png
Diff not rendered.
View
BIN images/menu-arrow.png
Diff not rendered.
View
BIN images/menu-bg.png
Diff not rendered.
View
0 lib/backgrounds.js → js/backgrounds.js
File renamed without changes.
View
0 lib/html5.js → js/html5.js
File renamed without changes.
View
0 lib/jquery-1.7.1.js → js/jquery-1.7.1.js
File renamed without changes.
View
0 lib/jquery-1.7.min.js → js/jquery-1.7.min.js
File renamed without changes.
View
0 lib/kinetics.js → js/kinetics.js
File renamed without changes.
View
0 lib/parallax.js → js/parallax.js
File renamed without changes.
View
2 lib/side-nav.js → js/side-nav.js
@@ -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(){
View
1 readme.md
@@ -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

0 comments on commit 751f17b

Please sign in to comment.