Slides sliding in is oldschool. We now fade between slides

4 files changed, 228 insertions, 271 deletions

diff --git a/js/slides.js b/js/slides.js
index d1b094b..f0e3900 100644
--- a/js/slides.js
+++ b/js/slides.js
@@ -50,7 +50,7 @@ SlideDeck.prototype.getCurrentSlideFromHash_ = function() {
  * @private
  */
 SlideDeck.prototype.onDomLoaded_ = function(e) {
-  this.slides_ = document.querySelectorAll('slide:not([hidden])');
+  this.slides_ = document.querySelectorAll('slide:not([hidden]):not(.backdrop)');
 
   // Load config.
   this.loadConfig_();
diff --git a/template.html b/template.html
index 973666a..da89780 100644
--- a/template.html
+++ b/template.html
@@ -74,7 +74,7 @@ URL: https://code.google.com/p/io-2012-slides
 
   <slide>
     <hgroup>
-      <h2>Slide with Smaller Font</h2>
+      <h2>Slide with (Smaller Font)</h2>
     </hgroup>
     <article class="smaller">
       <ul>
@@ -172,7 +172,7 @@ function helloWorld(world) {
 
   <slide>
     <hgroup>
-      <h2>Slide with Image (centered horz/vert)</h2>
+      <h2>Slide with Image (Centered horz/vert)</h2>
     </hgroup>
     <article class="flexbox vcenter" style="height: 80%;">
       <img src="images/barchart.png" alt="Description" title="Description">
@@ -210,7 +210,7 @@ function helloWorld(world) {
 
   <slide>
     <hgroup>
-      <h2>Table Option A (small text)</h2>
+      <h2>Table Option A (Smaller Text)</h2>
       <h3>Subtitle Placeholder</h3>
     </hgroup>
     <article class="smaller">
@@ -265,7 +265,7 @@ function helloWorld(world) {
 
   <slide>
     <hgroup>
-      <h2>Slide styles</h2>
+      <h2>Slide Styles</h2>
     </hgroup>
     <article class="smaller columns-2">
       <ul>
@@ -313,7 +313,7 @@ function helloWorld(world) {
 
   <slide>
     <hgroup>
-      <h2>Slide with iframe</h2>
+      <h2>Slide with Iframe</h2>
     </hgroup>
     <article>
       <iframe data-src="http://www.google.com/doodle4google/history.html"></iframe>
@@ -343,6 +343,8 @@ function helloWorld(world) {
     </article>
   </slide>
 
+  <slide class="backdrop"></slide>
+
 </slides>
 
 <script type="text/slide-config">
diff --git a/theme/css/default.css b/theme/css/default.css
index bb77b38..a6c1826 100644
--- a/theme/css/default.css
+++ b/theme/css/default.css
@@ -214,28 +214,15 @@ slide.fill img {
 
 /* line 87, ../sass/default.scss */
 body {
-  background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 600, color-stop(0%, #b1dfff), color-stop(100%, #2a7cdf));
-  background-image: -webkit-radial-gradient(50% 50%, #b1dfff 0%, #2a7cdf 600px);
-  background-image: -moz-radial-gradient(50% 50%, #b1dfff 0%, #2a7cdf 600px);
-  background-image: -o-radial-gradient(50% 50%, #b1dfff 0%, #2a7cdf 600px);
-  background-image: -ms-radial-gradient(50% 50%, #b1dfff 0%, #2a7cdf 600px);
-  background-image: radial-gradient(50% 50%, #b1dfff 0%, #2a7cdf 600px);
-  background-attachment: fixed;
+  background: black;
 }
 
-/* line 93, ../sass/default.scss */
+/* line 95, ../sass/default.scss */
 slides > slide {
   display: none;
   font-family: 'Open Sans', Arial, sans-serif;
   font-size: 26px;
   color: #797979;
-  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(85%, #ffffff), color-stop(100%, #e6e6e6));
-  background: -webkit-linear-gradient(#ffffff, #ffffff 85%, #e6e6e6);
-  background: -moz-linear-gradient(#ffffff, #ffffff 85%, #e6e6e6);
-  background: -o-linear-gradient(#ffffff, #ffffff 85%, #e6e6e6);
-  background: -ms-linear-gradient(#ffffff, #ffffff 85%, #e6e6e6);
-  background: linear-gradient(#ffffff, #ffffff 85%, #e6e6e6);
-  background-color: white;
   width: 900px;
   height: 700px;
   margin-left: -450px;
@@ -246,101 +233,52 @@ slides > slide {
   -ms-border-radius: 5px;
   -o-border-radius: 5px;
   border-radius: 5px;
-  -webkit-box-shadow: 5px 5px 20px #515151;
-  -moz-box-shadow: 5px 5px 20px #515151;
-  box-shadow: 5px 5px 20px #515151;
-  -webkit-transition: all 0.3s ease-out;
-  -moz-transition: all 0.3s ease-out;
-  -ms-transition: all 0.3s ease-out;
-  -o-transition: all 0.3s ease-out;
-  transition: all 0.3s ease-out;
-}
-/* line 114, ../sass/default.scss */
+  -webkit-transition: all 0.6s ease-out;
+  -moz-transition: all 0.6s ease-out;
+  -ms-transition: all 0.6s ease-out;
+  -o-transition: all 0.6s ease-out;
+  transition: all 0.6s ease-out;
+}
+/* line 116, ../sass/default.scss */
 slides > slide.far-past {
-  display: block;
-  -webkit-transform: translate(-2040px);
-  -moz-transform: translate(-2040px);
-  -ms-transform: translate(-2040px);
-  -o-transform: translate(-2040px);
-  transform: translate(-2040px);
-  -webkit-transform: translate3d(-2040px, 0, 0);
-  -moz-transform: translate3d(-2040px, 0, 0);
-  -ms-transform: translate3d(-2040px, 0, 0);
-  -o-transform: translate3d(-2040px, 0, 0);
-  transform: translate3d(-2040px, 0, 0);
-}
-/* line 120, ../sass/default.scss */
+  display: none;
+}
+/* line 123, ../sass/default.scss */
 slides > slide.past {
   display: block;
-  -webkit-transform: translate(-1020px) rotateY(30deg) rotateX(45deg);
-  -moz-transform: translate(-1020px) rotateY(30deg) rotateX(45deg);
-  -ms-transform: translate(-1020px) rotateY(30deg) rotateX(45deg);
-  -o-transform: translate(-1020px) rotateY(30deg) rotateX(45deg);
-  transform: translate(-1020px) rotateY(30deg) rotateX(45deg);
-  -webkit-transform: translate3d(-1020px, 0, 0) rotateY(30deg) rotateX(45deg);
-  -moz-transform: translate3d(-1020px, 0, 0) rotateY(30deg) rotateX(45deg);
-  -ms-transform: translate3d(-1020px, 0, 0) rotateY(30deg) rotateX(45deg);
-  -o-transform: translate3d(-1020px, 0, 0) rotateY(30deg) rotateX(45deg);
-  transform: translate3d(-1020px, 0, 0) rotateY(30deg) rotateX(45deg);
-}
-/* line 126, ../sass/default.scss */
+  opacity: 0;
+}
+/* line 130, ../sass/default.scss */
 slides > slide.current {
   display: block;
-  -webkit-transform: translate(0);
-  -moz-transform: translate(0);
-  -ms-transform: translate(0);
-  -o-transform: translate(0);
-  transform: translate(0);
-  -webkit-transform: translate3d(0, 0, 0);
-  -moz-transform: translate3d(0, 0, 0);
-  -ms-transform: translate3d(0, 0, 0);
-  -o-transform: translate3d(0, 0, 0);
-  transform: translate3d(0, 0, 0);
+  opacity: 1;
 }
-/* line 131, ../sass/default.scss */
+/* line 136, ../sass/default.scss */
 slides > slide.current .auto-fadein {
   opacity: 1;
 }
-/* line 135, ../sass/default.scss */
+/* line 140, ../sass/default.scss */
 slides > slide.current .gdbar {
   -webkit-background-size: 100% 100%;
   -moz-background-size: 100% 100%;
   -o-background-size: 100% 100%;
   background-size: 100% 100%;
 }
-/* line 140, ../sass/default.scss */
+/* line 145, ../sass/default.scss */
 slides > slide.next {
   display: block;
-  -webkit-transform: translate(1020px) rotateY(-30deg) rotateX(45deg);
-  -moz-transform: translate(1020px) rotateY(-30deg) rotateX(45deg);
-  -ms-transform: translate(1020px) rotateY(-30deg) rotateX(45deg);
-  -o-transform: translate(1020px) rotateY(-30deg) rotateX(45deg);
-  transform: translate(1020px) rotateY(-30deg) rotateX(45deg);
-  -webkit-transform: translate3d(1020px, 0, 0) rotateY(-30deg) rotateX(45deg);
-  -moz-transform: translate3d(1020px, 0, 0) rotateY(-30deg) rotateX(45deg);
-  -ms-transform: translate3d(1020px, 0, 0) rotateY(-30deg) rotateX(45deg);
-  -o-transform: translate3d(1020px, 0, 0) rotateY(-30deg) rotateX(45deg);
-  transform: translate3d(1020px, 0, 0) rotateY(-30deg) rotateX(45deg);
-}
-/* line 146, ../sass/default.scss */
+  opacity: 0;
+  pointer-events: none;
+}
+/* line 153, ../sass/default.scss */
 slides > slide.far-next {
-  display: block;
-  -webkit-transform: translate(2040px);
-  -moz-transform: translate(2040px);
-  -ms-transform: translate(2040px);
-  -o-transform: translate(2040px);
-  transform: translate(2040px);
+  display: none;
+}
+/* line 160, ../sass/default.scss */