From 821cf549fc263905b63e21595fd6e86a39a6326c Mon Sep 17 00:00:00 2001 From: Bartek Szopka Date: Mon, 2 Jan 2012 22:08:50 +0100 Subject: [PATCH] impressive navigation hint added --- css/style.css | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 7 +++++-- 2 files changed, 55 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index c8bcb5fbe..80b2bf4e8 100644 --- 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 index 6b695c43e..2e2a3f79c 100644 --- a/index.html +++ b/index.html @@ -13,7 +13,6 @@ -
@@ -21,7 +20,7 @@

For the best experience please use the latest Chrome or Safari browser. Firefox 10 and Internet Explorer 10 should also handle it.

-
+
Aren't you just bored with all those slides-based presentations?
@@ -80,6 +79,10 @@

impress.js*

+
+

Use a spacebar or arrow keys to navigate

+
+