diff --git a/slideshow.css b/slideshow.css index 3850575..af07ec5 100755 --- a/slideshow.css +++ b/slideshow.css @@ -11,9 +11,9 @@ .delayed, .delayed-children > * { transition:.5s; - transition-property: transform, opacity, left, top, right, bottom, background; + transition-property: all; } - + /** * Styles */ @@ -37,6 +37,8 @@ font-size:250%; line-height:1.6; + + opacity: 1; } .slide.previous, @@ -45,6 +47,8 @@ display: block; visibility: hidden; overflow:hidden; + + opacity: 0; } .slide:target { @@ -84,11 +88,13 @@ .delayed, .delayed-children > * { opacity: 0; + transform: translateX(20px); } .delayed.displayed, .delayed-children > .displayed { opacity: .3; + transform: translateX(0); } .delayed.current, @@ -99,6 +105,7 @@ .delayed-children > .displayed.persistent, .delayed-children.persistent > .displayed { opacity: 1; + transform: translateX(0); } /** diff --git a/slideshow.js b/slideshow.js index d81ffc5..51c4b86 100755 --- a/slideshow.js +++ b/slideshow.js @@ -1,7 +1,7 @@ -/** - * CSSS javascript code +/** + * CSSS javascript code * @author Lea Verou (http://leaverou.me) - * @version 2.0 + * @version 2.0 */ /** @@ -23,15 +23,15 @@ if(!('classList' in body)) { // Cache element, we may need it for slides that don't have titles var documentTitle = document.title + ''; -var self = window.SlideShow = function(slide) { +var self = window.SlideShow = function(slide) { var me = this; // Set instance if(!window.slideshow) { window.slideshow = this; - } - - // Current slide + } + + // Current slide this.index = this.slide = slide || 0; // Current .delayed item in the slide @@ -60,9 +60,9 @@ var self = window.SlideShow = function(slide) { this.indicator = document.createElement('div'); this.indicator.id = 'indicator'; - body.appendChild(this.indicator); - - // Get the slide elements into an array + body.appendChild(this.indicator); + + // Get the slide elements into an array this.slides = $$('.slide', body); // Get the overview @@ -99,14 +99,14 @@ var self = window.SlideShow = function(slide) { } // Order of the slides - this.order = []; - + this.order = []; + for(var i=0; i<this.slides.length; i++) { var slide = this.slides[i]; // to speed up references - // Asign ids to slides that don't have one - if(!slide.id) { - slide.id = 'slide' + (i+1); + // Asign ids to slides that don't have one + if(!slide.id) { + slide.id = 'slide' + (i+1); } // Set data-title attribute to the title of the slide @@ -129,7 +129,7 @@ var self = window.SlideShow = function(slide) { var imp = slide.getAttribute('data-import'), imported = imp? this.getSlideById(imp) : null; - this.order.push(imported? +imported.getAttribute('data-index') : i); + this.order.push(imported? +imported.getAttribute('data-index') : i); } if(window.name === 'projector' && window.opener && opener.slideshow) { @@ -144,7 +144,7 @@ var self = window.SlideShow = function(slide) { // In some browsers DOMContentLoaded is too early, so try again onload addEventListener('load', this, false); - addEventListener('hashchange', this, false); + addEventListener('hashchange', this, false); // If there's already a hash, update current slide number... this.handleEvent({type: 'hashchange'}); @@ -190,9 +190,9 @@ var self = window.SlideShow = function(slide) { slide.appendChild(b); } - }); -}; - + }); +}; + self.prototype = { handleEvent: function(evt) { var me = this; @@ -284,24 +284,24 @@ self.prototype = { this.goto(location.hash.substr(1) || 0); } }, - - start: function() { - this.goto(0); - }, - - end: function() { - this.goto(this.slides.length - 1); - }, + + start: function() { + this.goto(0); + }, + + end: function() { + this.goto(this.slides.length - 1); + }, /** @param hard {Boolean} Whether to advance to the next slide (true) or just the next step (which could very well be showing a list item) - */ + */ next: function(hard) { if(!hard && this.items.length) { this.nextItem(); } - else { + else { this.goto(this.index + 1); this.item = 0; @@ -316,7 +316,7 @@ self.prototype = { } } } - } + } }, nextItem: function() { @@ -327,8 +327,8 @@ self.prototype = { this.item = 0; this.next(true); } - }, - + }, + previous: function(hard) { if(!hard && this.item > 0) { this.previousItem(); @@ -361,13 +361,13 @@ self.prototype = { getSlideById: function(id) { return $('.slide#' + id); - }, + }, /** Go to an aribtary slide @param which {String|Integer} Which slide (identifier or slide number) - */ - goto: function(which) { + */ + goto: function(which) { var slide; // We have to remove it to prevent multiple calls to goto messing up @@ -380,18 +380,18 @@ self.prototype = { // Argument is a valid slide number this.index = which; this.slide = this.order[which] - + slide = this.slides[this.slide]; - - location.hash = '#' + slide.id; - } - else if(which + '' === which) { // Argument is a slide id - slide = this.getSlideById(which); - - if(slide) { - this.slide = this.index = +slide.getAttribute('data-index'); + + location.hash = '#' + slide.id; + } + else if(which + '' === which) { // Argument is a slide id + slide = this.getSlideById(which); + + if(slide) { + this.slide = this.index = +slide.getAttribute('data-index'); location.hash = '#' + which; - } + } } if(slide) { // Slide actually changed, perform any other tasks needed @@ -404,11 +404,11 @@ self.prototype = { iframe.setAttribute('src', src); } } - else { + else { this.adjustFontSize(); } - this.indicator.textContent = this.index + 1; + this.indicator.textContent = document.title +' - slide '+ (this.index + 1); // Update items collection this.items = $$('.delayed, .delayed-children > *', this.slides[this.slide]); @@ -437,7 +437,7 @@ self.prototype = { var me = this; setTimeout(function() { addEventListener('hashchange', me, false); - }, 1000); + }, 1000); }, gotoItem: function(which) { @@ -520,7 +520,7 @@ self.prototype = { } return false; - } + } }; /********************************************** @@ -536,8 +536,8 @@ self.getSlide = function(element) { } return slide; -} - +} + })(document.head || document.getElementsByTagName('head')[0], document.body, document.documentElement); // Rudimentary style[scoped] polyfill