impressive navigation hint added

bartaz · bartaz · commit 821cf549fc26 · 2012-01-02T22:08:50.000+01:00
diff --git a/css/style.css b/css/style.css
@@ -60,6 +60,8 @@ table {
 
 
 body {
+    font-family: 'PT Sans', sans-serif;
+    
     min-height: 740px;
 
     background: rgb(215, 215, 215);
@@ -129,6 +131,54 @@ a:hover {
 
 /* STEP SPECIFIC STYLES */
 
+/* hint on the first slide */
+
+.hint {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 200px;
+    
+    background: rgba(0,0,0,0.5);
+    color: #EEE;
+    text-align: center;
+    
+    font-size: 50px;
+    padding: 20px;
+    
+    z-index: 100;
+    
+    opacity: 0;
+    
+    -webkit-transform: translateY(400px);
+    -moz-transform:    translateY(400px);
+    -ms-transform:     translateY(400px);
+    -o-transform:      translateY(400px);
+    transform:         translateY(400px);
+
+    -webkit-transition: opacity 1s, -webkit-transform 0.5s 1s;
+    -moz-transition:    opacity 1s,    -moz-transform 0.5s 1s;
+    -ms-transition:     opacity 1s,     -ms-transform 0.5s 1s;
+    -o-transition:      opacity 1s,      -o-transform 0.5s 1s;
+    transition:         opacity 1s,         transform 0.5s 1s;
+}
+
+.step-bored + .hint {
+    opacity: 1;
+    
+    -webkit-transition: opacity 1s 5s, -webkit-transform 0.5s;
+    -moz-transition:    opacity 1s 5s,    -moz-transform 0.5s;
+    -ms-transition:     opacity 1s 5s,     -ms-transform 0.5s;
+    -o-transition:      opacity 1s 5s,      -o-transform 0.5s;
+    transition:         opacity 1s 5s,         transform 0.5s;
+    
+    -webkit-transform: translateY(0px);
+    -moz-transform:    translateY(0px);
+    -ms-transform:     translateY(0px);
+    -o-transform:      translateY(0px);
+    transform:         translateY(0px);
+}
+
 /* impress.js title */
 
 #title {
diff --git a/index.html b/index.html
@@ -13,15 +13,14 @@
 </head>
 <body>
 
-
 <div id="impress" class="impress-not-supported">
 
     <div class="fallback-message">
         <p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
         <p>For the best experience please use the latest <b>Chrome</b> or <b>Safari</b> browser. Firefox 10 and Internet Explorer 10 <i>should</i> also handle it.</p>
     </div>
 
-    <div class="step slide" data-x="-1000" data-y="-1500">
+    <div id="bored" class="step slide" data-x="-1000" data-y="-1500">
         <q>Aren't you just <b>bored</b> with all those slides-based presentations?</q>
     </div>
 
@@ -80,6 +79,10 @@ <h1>impress.js<sup>*</sup></h1>
 
 </div>
 
+<div class="hint">
+    <p>Use a spacebar or arrow keys to navigate</p>
+</div>
+
 <script src="js/impress.js"></script>
 
 </body>
