janishutz-legacy/impress.js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

impressive navigation hint added

Browse Source
This commit is contained in:
Bartek Szopka
2012-01-02 22:08:50 +01:00
parent 34568182ef
commit 821cf549fc
2 changed files with 55 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
css/style.css
View File

@@ -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 {

7
index.html
View File

@@ -13,7 +13,6 @@
</head>
<body>
<div id="impress" class="impress-not-supported">
<div class="fallback-message">
@@ -21,7 +20,7 @@
<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 @@
</div>
<div class="hint">
<p>Use a spacebar or arrow keys to navigate</p>
</div>
<script src="js/impress.js"></script>
</body>