diff options
| -rw-r--r-- | README.md | 1 | ||||
| -rw-r--r-- | css/main.css | 38 | ||||
| -rw-r--r-- | index.html | 4 | ||||
| -rw-r--r-- | js/reveal.js | 6 |
4 files changed, 24 insertions, 25 deletions
@@ -6,6 +6,7 @@ Curious about how this looks in action? [Check out the demo page](http://lab.hak # Examples +* http://lab.hakim.se/reveal-js/ (original) * http://www.ideapolisagency.com/ from [@achrafkassioui](http://twitter.com/achrafkassioui) * http://lucienfrelin.com/ from [@lucienfrelin](http://twitter.com/lucienfrelin) diff --git a/css/main.css b/css/main.css index 25a45a6..9597123 100644 --- a/css/main.css +++ b/css/main.css @@ -131,9 +131,9 @@ h1 { -moz-transform-style: preserve-3d; transform-style: preserve-3d; - -webkit-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - -moz-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - -o-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -webkit-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -moz-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -o-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); } @@ -447,32 +447,28 @@ section img { * PROGRESS BAR *********************************************/ -progress::-webkit-progress-bar { - background: rgba(0,0,0,0.2); -} - -progress::-moz-progress-bar { - background: hsl(185, 85%, 50%); -} - -progress::-webkit-progress-value { - background: hsl(185, 85%, 50%); -} - -progress { +.progress { position: absolute; display: none; height: 4px; width: 100%; bottom: 0; left: 0; - padding: 0; - margin: 0; - border: 0; - outline: 0; - background: none; + background: rgba(0,0,0,0.2); } + + .progress span { + display: block; + background: hsl(185, 85%, 50%); + height: 100%; + width: 0px; + + -webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -o-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + } /********************************************* * ROLLING LINKS @@ -179,7 +179,7 @@ linkify( 'a' ); </aside> <!-- Displays presentation progress, max value changes via JS to reflect # of slides --> - <progress min=0 max=100 value=0></progress> + <div class="progress"><span></span></div> <script src="js/reveal.js"></script> <script src="lib/highlight.js"></script> @@ -200,6 +200,8 @@ linkify( 'a' ); hljs.initHighlightingOnLoad(); </script> + + </body> </html>
\ No newline at end of file diff --git a/js/reveal.js b/js/reveal.js index c332324..79437ae 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -94,7 +94,8 @@ var Reveal = (function(){ */ function initialize( options ) { // Cache references to DOM elements - dom.progress = document.querySelector( 'body>progress' ); + dom.progress = document.querySelector( 'body>.progress' ); + dom.progressbar = document.querySelector( 'body>.progress span' ); dom.controls = document.querySelector( '.controls' ); dom.controlsLeft = document.querySelector( '.controls .left' ); dom.controlsRight = document.querySelector( '.controls .right' ); @@ -122,7 +123,6 @@ var Reveal = (function(){ if( config.progress ) { dom.progress.style.display = 'block'; - dom.progress.max = document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ).length - 1; } if( config.theme !== 'default' ) { @@ -313,7 +313,7 @@ var Reveal = (function(){ // Update progress if enabled if( config.progress ) { - dom.progress.value = indexh; + dom.progressbar.style.width = ( indexh / ( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ).length - 1 ) ) * window.innerWidth + 'px'; } updateControls(); |