From 79ec99a2f7156701fa1febd6caf4d2ed6f635d63 Mon Sep 17 00:00:00 2001 From: Luis Date: Sat, 1 Apr 2017 14:40:22 +0200 Subject: [PATCH] New implementation: webslides clone --- .eslintrc | 2 - src/js/plugins/zoom.js | 69 +- src/js/utils/dom.js | 15 + static/js/webslides.js | 230 ++++- static/js/webslides.min.js | 4 +- tests/classes.html | 1940 ++++++++++++++++++++++++++++++++++++ tests/media.html | 722 ++++++++++++++ tests/test.css | 31 + tests/test.js | 36 + 9 files changed, 3011 insertions(+), 38 deletions(-) create mode 100644 tests/classes.html create mode 100644 tests/media.html create mode 100644 tests/test.css create mode 100644 tests/test.js diff --git a/.eslintrc b/.eslintrc index 1343963..39c58f0 100644 --- a/.eslintrc +++ b/.eslintrc @@ -128,5 +128,3 @@ "yield-star-spacing": [2, "after"] } } - - diff --git a/src/js/plugins/zoom.js b/src/js/plugins/zoom.js index aa34f0c..ef76a4a 100644 --- a/src/js/plugins/zoom.js +++ b/src/js/plugins/zoom.js @@ -1,5 +1,6 @@ import DOM from '../utils/dom'; import Keys from '../utils/keys'; +import Slide from '../modules/slide'; const CLASSES = { @@ -8,6 +9,8 @@ const CLASSES = { WRAP: 'wrap-zoom' }; +const ID = 'webslides-zoomed'; + /** * Zoom plugin. */ @@ -23,12 +26,19 @@ export default class Zoom { */ this.ws_ = wsInstance; + /** + * @type {WebSlides} + * @private + */ + this.zws_ = {}; + /** * @type {boolean} * @private */ this.isZoomed_ = false; + this.preBuildZoom_(); document.addEventListener('keydown', this.onKeyDown.bind(this)); } @@ -45,51 +55,66 @@ export default class Zoom { } /** - * Zoom In the slider, scales the slides and uses a grid layout to show them + * Prepare zoom structure, scales the slides and uses a grid layout + * to show them */ - zoomIn() { - this.ws_.el.classList.add(CLASSES.ZOOM); - this.ws_.goToSlide(0); + preBuildZoom_() { + // Clone #webslides element + this.zws_.el = this.ws_.el.cloneNode(); + this.zws_.el.id = ID; + this.zws_.el.className = CLASSES.ZOOM; + // Clone the slides + this.zws_.slides = [].map.call(this.ws_.slides, + (slide, i) => { + const s_ = slide.el.cloneNode(true); + this.zws_.el.appendChild(s_); + return new Slide(s_, i); + }); + DOM.hide(this.zws_.el); + DOM.after(this.zws_.el, this.ws_.el); - this.ws_.slides.forEach( elem => { + // Creates the container for each slide + this.zws_.slides.forEach( elem => { const wrap = DOM.wrap(elem.el, 'div'); wrap.className = CLASSES.WRAP; const div = DOM.wrap(wrap, 'div'); div.className = CLASSES.DIV; + // Calculates the margins in relation to window width const divCSS = window.getComputedStyle(div); const marginW = DOM.parseSize(divCSS.paddingLeft) + DOM.parseSize(divCSS.paddingRight); const marginH = DOM.parseSize(divCSS.paddingTop) + DOM.parseSize(divCSS.paddingBottom); - elem.el.style.width = `${window.innerWidth - marginW * 4}px`; - elem.el.style.height = `${window.innerHeight - marginH * 4}px`; + // Sets element size: window size - relative margins + const scale = divCSS.width.includes('%') ? + 100 / DOM.parseSize(divCSS.width) : + window.innerWidth / DOM.parseSize(divCSS.width); + elem.el.style.width = `${window.innerWidth - marginW * scale}px`; + elem.el.style.height = `${window.innerHeight - marginH * scale}px`; + // Because of flexbox, wrap height is required const slideCSS = window.getComputedStyle(elem.el); - wrap.style.height = `${DOM.parseSize(slideCSS.height) / 4}px`; + wrap.style.height = `${DOM.parseSize(slideCSS.height) / scale}px`; }); - - this.isZoomed_ = true; } + /** + * Zoom In the slider, scales the slides and uses a grid layout to show them + */ + zoomIn() { + DOM.hide(this.ws_.el); + DOM.show(this.zws_.el); + this.isZoomed_ = true; + } /** * Zoom Out the slider, remove scale from the slides */ zoomOut() { - this.ws_.el.classList.remove(CLASSES.ZOOM); - - this.ws_.slides.forEach( elem => { - const wrap = elem.el.parentElement; - const div = wrap.parentElement; - elem.parent.appendChild(elem.el); - wrap.remove(); - div.remove(); - elem.el.style.width = ''; - elem.el.style.height = ''; - }); - + DOM.hide(this.zws_.el); + DOM.show(this.ws_.el); this.isZoomed_ = false; } diff --git a/src/js/utils/dom.js b/src/js/utils/dom.js index 69c66d9..ae3487f 100644 --- a/src/js/utils/dom.js +++ b/src/js/utils/dom.js @@ -188,4 +188,19 @@ export default class DOM { return wrap; } + + /** + * Inserts and element after another element + * @param {Element} elem the element to be inserted + * @param {Element} target the element to be inserted after + */ + static after(elem, target) { + const parent = target.parentNode; + + if (parent.lastChild == target) { + parent.appendChild(elem); + } else { + parent.insertBefore(elem, target.nextSibling); + } + } } diff --git a/static/js/webslides.js b/static/js/webslides.js index 6c4ae09..46191ea 100644 --- a/static/js/webslides.js +++ b/static/js/webslides.js @@ -1,7 +1,7 @@ /*! * Name: WebSlides * Version: 1.2.1 - * Date: 2017-03-22 + * Date: 2017-04-01 * Description: Making HTML presentations easy * URL: https://github.com/webslides/webslides#readme * Credits: @jlantunez, @LuisSacristan, @Belelros @@ -79,7 +79,7 @@ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; -/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__custom_event__ = __webpack_require__(17); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__custom_event__ = __webpack_require__(18); var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } @@ -284,6 +284,53 @@ var DOM = function () { return result; } + + /** + * Gets the integer value of a style property + * @param {string} prop CSS property value + * @return {integer} The property without the units + */ + + }, { + key: 'parseSize', + value: function parseSize(prop) { + return Number(prop.replace(/[^\d\.]/g, '')); + } + + /** + * Wraps a HTML structure arrond a element + * @param {Element} elem the element to be wrapped + * @param {string} tag the new element tag + * @return {Element} the new element + */ + + }, { + key: 'wrap', + value: function wrap(elem, tag) { + var wrap = document.createElement(tag); + elem.parentElement.insertBefore(wrap, elem); + wrap.appendChild(elem); + + return wrap; + } + + /** + * Inserts and element after another element + * @param {Element} elem the element to be inserted + * @param {Element} target the element to be inserted after + */ + + }, { + key: 'after', + value: function after(elem, target) { + var parent = target.parentNode; + + if (parent.lastChild == target) { + parent.appendChild(elem); + } else { + parent.insertBefore(elem, target.nextSibling); + } + } }]); return DOM; @@ -511,7 +558,9 @@ var Keys = { LEFT: 37, UP: 38, RIGHT: 39, - DOWN: 40 + DOWN: 40, + PLUS: [107, 171], + MINUS: [109, 173] }; /* harmony default export */ __webpack_exports__["a"] = (Keys); @@ -628,7 +677,7 @@ var MobileDetector = function () { /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__ = __webpack_require__(12); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__slide__ = __webpack_require__(1); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__utils_dom__ = __webpack_require__(0); -/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__utils_scroll_to__ = __webpack_require__(19); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__utils_scroll_to__ = __webpack_require__(20); var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } @@ -654,7 +703,8 @@ var PLUGINS = { 'scroll': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].Scroll, 'touch': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].Touch, 'video': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].Video, - 'youtube': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].YouTube + 'youtube': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].YouTube, + 'zoom': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].Zoom }; /** @@ -1696,6 +1746,8 @@ var Navigation = function () { /* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__touch__ = __webpack_require__(14); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__video__ = __webpack_require__(15); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_9__youtube__ = __webpack_require__(16); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_10__zoom__ = __webpack_require__(17); + @@ -1717,7 +1769,8 @@ var Navigation = function () { Scroll: __WEBPACK_IMPORTED_MODULE_6__scroll__["a" /* default */], Touch: __WEBPACK_IMPORTED_MODULE_7__touch__["a" /* default */], Video: __WEBPACK_IMPORTED_MODULE_8__video__["a" /* default */], - YouTube: __WEBPACK_IMPORTED_MODULE_9__youtube__["a" /* default */] + YouTube: __WEBPACK_IMPORTED_MODULE_9__youtube__["a" /* default */], + Zoom: __WEBPACK_IMPORTED_MODULE_10__zoom__["a" /* default */] }); /***/ }), @@ -2172,7 +2225,7 @@ var Player = function () { } /** - * + * Plays the video. */ @@ -2192,13 +2245,15 @@ var Player = function () { } /** - * + * Pause playing the video if it's already playing. */ }, { key: 'pause', value: function pause() { - this.player.pauseVideo(); + if (this.player && this.player.pauseVideo && this.player.getPlayerState() === 1) { + this.player.pauseVideo(); + } } /** @@ -2330,6 +2385,157 @@ var YouTube = function () { /* 17 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { +"use strict"; +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_dom__ = __webpack_require__(0); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__utils_keys__ = __webpack_require__(2); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__modules_slide__ = __webpack_require__(1); +var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + + + + + +var CLASSES = { + ZOOM: 'grid', + DIV: 'column', + WRAP: 'wrap-zoom' +}; + +var ID = 'webslides-zoomed'; + +/** + * Zoom plugin. + */ + +var Zoom = function () { + /** + * @param {WebSlides} wsInstance The WebSlides instance + * @constructor + */ + function Zoom(wsInstance) { + _classCallCheck(this, Zoom); + + /** + * @type {WebSlides} + * @private + */ + this.ws_ = wsInstance; + + /** + * @type {WebSlides} + * @private + */ + this.zws_ = {}; + + /** + * @type {boolean} + * @private + */ + this.isZoomed_ = false; + + this.preBuildZoom_(); + document.addEventListener('keydown', this.onKeyDown.bind(this)); + } + + /** + * On key down handler. Will decide if Zoom in or out + * @param {Event} event Key down event + */ + + + _createClass(Zoom, [{ + key: 'onKeyDown', + value: function onKeyDown(event) { + if (!this.isZoomed_ && __WEBPACK_IMPORTED_MODULE_1__utils_keys__["a" /* default */].MINUS.includes(event.which)) { + this.zoomIn(); + } else if (this.isZoomed_ && __WEBPACK_IMPORTED_MODULE_1__utils_keys__["a" /* default */].PLUS.includes(event.which)) { + this.zoomOut(); + } + } + + /** + * Prepare zoom structure, scales the slides and uses a grid layout + * to show them + */ + + }, { + key: 'preBuildZoom_', + value: function preBuildZoom_() { + var _this = this; + + // Clone #webslides element + this.zws_.el = this.ws_.el.cloneNode(); + this.zws_.el.id = ID; + this.zws_.el.className = CLASSES.ZOOM; + // Clone the slides + this.zws_.slides = [].map.call(this.ws_.slides, function (slide, i) { + var s_ = slide.el.cloneNode(true); + _this.zws_.el.appendChild(s_); + return new __WEBPACK_IMPORTED_MODULE_2__modules_slide__["a" /* default */](s_, i); + }); + __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].hide(this.zws_.el); + __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].after(this.zws_.el, this.ws_.el); + + // Creates the container for each slide + this.zws_.slides.forEach(function (elem) { + var wrap = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].wrap(elem.el, 'div'); + wrap.className = CLASSES.WRAP; + var div = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].wrap(wrap, 'div'); + div.className = CLASSES.DIV; + + // Calculates the margins in relation to window width + var divCSS = window.getComputedStyle(div); + var marginW = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(divCSS.paddingLeft) + __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(divCSS.paddingRight); + var marginH = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(divCSS.paddingTop) + __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(divCSS.paddingBottom); + + // Sets element size: window size - relative margins + console.log(window.innerWidth, divCSS.width); + var scale = divCSS.width.includes('%') ? 100 / __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(divCSS.width) : window.innerWidth / __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(divCSS.width); + elem.el.style.width = window.innerWidth - marginW * scale + 'px'; + elem.el.style.height = window.innerHeight - marginH * scale + 'px'; + + // Because of flexbox, wrap height is required + var slideCSS = window.getComputedStyle(elem.el); + wrap.style.height = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(slideCSS.height) / scale + 'px'; + }); + } + + /** + * Zoom In the slider, scales the slides and uses a grid layout to show them + */ + + }, { + key: 'zoomIn', + value: function zoomIn() { + __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].hide(this.ws_.el); + __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].show(this.zws_.el); + this.isZoomed_ = true; + } + + /** + * Zoom Out the slider, remove scale from the slides + */ + + }, { + key: 'zoomOut', + value: function zoomOut() { + __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].hide(this.zws_.el); + __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].show(this.ws_.el); + this.isZoomed_ = false; + } + }]); + + return Zoom; +}(); + +/* harmony default export */ __webpack_exports__["a"] = (Zoom); + +/***/ }), +/* 18 */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + "use strict"; var NativeCustomEvent = window.CustomEvent; @@ -2375,7 +2581,7 @@ var WSCustomEvent = canIuseNativeCustom() ? NativeCustomEvent : IECustomEvent; /* harmony default export */ __webpack_exports__["a"] = (WSCustomEvent); /***/ }), -/* 18 */ +/* 19 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; @@ -2400,11 +2606,11 @@ function linear(p) { /* harmony default export */ __webpack_exports__["a"] = ({ swing: swing, linear: linear }); /***/ }), -/* 19 */ +/* 20 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; -/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__easing__ = __webpack_require__(18); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__easing__ = __webpack_require__(19); /* harmony export (immutable) */ __webpack_exports__["a"] = scrollTo; diff --git a/static/js/webslides.min.js b/static/js/webslides.min.js index 6b0f1f6..70edc04 100644 --- a/static/js/webslides.min.js +++ b/static/js/webslides.min.js @@ -1,9 +1,9 @@ /*! * Name: WebSlides * Version: 1.2.1 - * Date: 2017-03-22 + * Date: 2017-04-01 * Description: Making HTML presentations easy * URL: https://github.com/webslides/webslides#readme * Credits: @jlantunez, @LuisSacristan, @Belelros */ -!function(e){function t(i){if(n[i])return n[i].exports;var a=n[i]={i:i,l:!1,exports:{}};return e[i].call(a.exports,a,a.exports,t),a.l=!0,a.exports}var n={};t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,i){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:i})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/static/js/",t(t.s=5)}([function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var a=n(17),o=function(){function e(e,t){for(var n=0;n1&&void 0!==arguments[1]?arguments[1]:"",n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",i=document.createElement(e);return i.id=t,n&&(i.textContent=n),i}},{key:"once",value:function(e,t,n){var i=function i(a){a.target===e&&(e.removeEventListener(t,i),n(a))};e.addEventListener(t,i,!1)}},{key:"getTransitionEvent",value:function(){if(r)return r;for(var e=document.createElement("ws"),t={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"},n=Object.keys(t),i=0,a=n.length;i2&&void 0!==arguments[2]?arguments[2]:{},i=new a.a(t,{detail:n});e.dispatchEvent(i)}},{key:"toArray",value:function(e){return[].slice.call(e)}},{key:"isFocusableElement",value:function(){var e=!1;if(document.activeElement){var t="inherit"!==document.activeElement.contentEditable;e=["INPUT","SELECT","OPTION","TEXTAREA"].indexOf(document.activeElement.tagName)>-1||t}return e}}]),e}();t.a=l},function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var a=n(0),o=function(){function e(e,t){for(var n=0;n0&&void 0!==arguments[0]?arguments[0]:{},n=t.autoslide,a=void 0!==n&&n,o=t.changeOnClick,r=void 0!==o&&o,s=t.loop,l=void 0===s||s,c=t.minWheelDelta,h=void 0===c?40:c,d=t.scrollWait,f=void 0===d?450:d,v=t.slideOffset,y=void 0===v?50:v;if(i(this,e),this.el=document.getElementById("webslides"),!this.el)throw new Error("Couldn't find the webslides container!");this.isMoving=!1,this.slides=null,this.currentSlideI_=-1,this.currentSlide_=null,this.maxSlide_=0,this.isVertical=this.el.classList.contains(u.VERTICAL),this.plugins={},this.options={autoslide:a,changeOnClick:r,loop:l,minWheelDelta:h,scrollWait:f,slideOffset:y},this.initialised=!1,this.removeChildren_(),this.grabSlides_(),this.createPlugins_(),this.initSlides_(),this.onInit_()}return l(e,[{key:"removeChildren_",value:function(){for(var e=this.el.childNodes,t=e.length;t--;){var n=e[t];o.a.isCandidate(n)||this.el.removeChild(n)}}},{key:"createPlugins_",value:function(){var e=this;Object.keys(c).forEach(function(t){var n=c[t];e.plugins[t]=new n(e)})}},{key:"onInit_",value:function(){this.initialised=!0,r.a.fireEvent(this.el,"ws:init"),document.documentElement.classList.add(u.READY)}},{key:"grabSlides_",value:function(){this.slides=r.a.toArray(this.el.childNodes).map(function(e,t){return new o.a(e,t)}),this.maxSlide_=this.slides.length}},{key:"goToSlide",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;if(this.isValidIndexSlide_(e)&&!this.isMoving&&this.currentSlideI_!==e){this.isMoving=!0;var n=!1;null!==t?n=t:this.currentSlideI_>=0&&(n=e>this.currentSlideI_);var i=this.slides[e];null===this.currentSlide_||!this.isVertical||this.plugins.touch&&this.plugins.touch.isEnabled?this.transitionToSlide_(n,i,this.onSlideChange_):this.scrollTransitionToSlide_(n,i,this.onSlideChange_)}}},{key:"scrollTransitionToSlide_",value:function(e,t,i){var a=this;this.el.style.overflow="hidden",e?t.show():(t.moveBeforeFirst(),t.show(),n.i(s.a)(this.currentSlide_.el.offsetTop,0)),n.i(s.a)(t.el.offsetTop,500,function(){a.currentSlide_.hide(),e&&a.currentSlide_.moveAfterLast(),a.el.style.overflow="auto",setTimeout(function(){i.call(a,t)},150)})}},{key:"transitionToSlide_",value:function(e,t,i){var a=this;n.i(s.a)(0,0);var o="slideInRight";e||(t.moveBeforeFirst(),o="slideInLeft"),this.currentSlide_&&(e&&this.currentSlide_.moveAfterLast(),this.currentSlide_.hide()),t.show(),this.initialised&&this.plugins.touch&&this.plugins.touch.isEnabled?(r.a.once(t.el,r.a.getAnimationEvent(),function(){t.el.classList.remove(o),i.call(a,t)}),t.el.classList.add(o)):i.call(this,t)}},{key:"onSlideChange_",value:function(e){this.currentSlide_&&this.currentSlide_.disable(),this.currentSlide_=e,this.currentSlideI_=e.i,this.currentSlide_.enable(),this.isMoving=!1,r.a.fireEvent(this.el,"ws:slide-change",{slides:this.maxSlide_,currentSlide0:this.currentSlideI_,currentSlide:this.currentSlideI_+1})}},{key:"goNext",value:function(){var e=this.currentSlideI_+1;if(e>=this.maxSlide_){if(!this.options.loop)return;e=0}this.goToSlide(e,!0)}},{key:"goPrev",value:function(){var e=this.currentSlideI_-1;if(e<0){if(!this.options.loop)return;e=this.maxSlide_-1}this.goToSlide(e,!1)}},{key:"isValidIndexSlide_",value:function(e){return e>=0&&e=this.maxSlide_)&&(e=0),0!==e)for(var t=0;t0&&(this.interval_=setInterval(this.ws_.goNext.bind(this.ws_),e))}},{key:"stop",value:function(){this.interval_&&(clearInterval(this.interval_),this.interval_=null)}}]),e}();t.a=r},function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var a=function(){function e(e,t){for(var n=0;nMath.abs(t);if(this.isGoingUp_=t<0,this.isGoingLeft_=n<0,a){if(i)return;e.preventDefault()}(Math.abs(t)>=this.ws_.options.minWheelDelta||Math.abs(n)>=this.ws_.options.minWheelDelta)&&(a&&this.isGoingLeft_||!a&&this.isGoingUp_?this.ws_.goPrev():this.ws_.goNext(),e.preventDefault())}}]),e}();t.a=r},function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var a=n(3),o=function(){function e(e,t){for(var n=0;nMath.abs(t)&&(e<-this.ws_.options.slideOffset?this.ws_.goPrev():e>this.ws_.options.slideOffset&&this.ws_.goNext())}}],[{key:"normalizeEventInfo",value:function(e){var t={pageX:0,pageY:0};return void 0!==e.changedTouches?t=e.changedTouches[0]:void 0!==e.originalEvent&&void 0!==e.originalEvent.changedTouches&&(t=e.originalEvent.changedTouches[0]),{x:e.offsetX||e.layerX||t.pageX,y:e.offsetY||e.layerY||t.pageY}}}]),e}();t.a=s},function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var a=n(0),o=n(1),r=function(){function e(e,t){for(var n=0;n1&&void 0!==arguments[1]?arguments[1]:500,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:function(){},i=e-o.scrollTop,r=o.scrollTop;if(!t)return o.scrollTop=e,void n();!function s(l){l+=16;var u=Math.min(1,l/t),c=a.a.swing(u,l*u,e,i,t);o.scrollTop=Math.floor(r+c*i),l1&&void 0!==arguments[1]?arguments[1]:"",n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",i=document.createElement(e);return i.id=t,n&&(i.textContent=n),i}},{key:"once",value:function(e,t,n){var i=function i(a){a.target===e&&(e.removeEventListener(t,i),n(a))};e.addEventListener(t,i,!1)}},{key:"getTransitionEvent",value:function(){if(r)return r;for(var e=document.createElement("ws"),t={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"},n=Object.keys(t),i=0,a=n.length;i2&&void 0!==arguments[2]?arguments[2]:{},i=new a.a(t,{detail:n});e.dispatchEvent(i)}},{key:"toArray",value:function(e){return[].slice.call(e)}},{key:"isFocusableElement",value:function(){var e=!1;if(document.activeElement){var t="inherit"!==document.activeElement.contentEditable;e=["INPUT","SELECT","OPTION","TEXTAREA"].indexOf(document.activeElement.tagName)>-1||t}return e}},{key:"parseSize",value:function(e){return Number(e.replace(/[^\d\.]/g,""))}},{key:"wrap",value:function e(t,n){var e=document.createElement(n);return t.parentElement.insertBefore(e,t),e.appendChild(t),e}},{key:"after",value:function(e,t){var n=t.parentNode;n.lastChild==t?n.appendChild(e):n.insertBefore(e,t.nextSibling)}}]),e}();t.a=l},function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var a=n(0),o=function(){function e(e,t){for(var n=0;n0&&void 0!==arguments[0]?arguments[0]:{},n=t.autoslide,a=void 0!==n&&n,o=t.changeOnClick,r=void 0!==o&&o,s=t.loop,l=void 0===s||s,c=t.minWheelDelta,h=void 0===c?40:c,d=t.scrollWait,f=void 0===d?450:d,v=t.slideOffset,y=void 0===v?50:v;if(i(this,e),this.el=document.getElementById("webslides"),!this.el)throw new Error("Couldn't find the webslides container!");this.isMoving=!1,this.slides=null,this.currentSlideI_=-1,this.currentSlide_=null,this.maxSlide_=0,this.isVertical=this.el.classList.contains(u.VERTICAL),this.plugins={},this.options={autoslide:a,changeOnClick:r,loop:l,minWheelDelta:h,scrollWait:f,slideOffset:y},this.initialised=!1,this.removeChildren_(),this.grabSlides_(),this.createPlugins_(),this.initSlides_(),this.onInit_()}return l(e,[{key:"removeChildren_",value:function(){for(var e=this.el.childNodes,t=e.length;t--;){var n=e[t];o.a.isCandidate(n)||this.el.removeChild(n)}}},{key:"createPlugins_",value:function(){var e=this;Object.keys(c).forEach(function(t){var n=c[t];e.plugins[t]=new n(e)})}},{key:"onInit_",value:function(){this.initialised=!0,r.a.fireEvent(this.el,"ws:init"),document.documentElement.classList.add(u.READY)}},{key:"grabSlides_",value:function(){this.slides=r.a.toArray(this.el.childNodes).map(function(e,t){return new o.a(e,t)}),this.maxSlide_=this.slides.length}},{key:"goToSlide",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;if(this.isValidIndexSlide_(e)&&!this.isMoving&&this.currentSlideI_!==e){this.isMoving=!0;var n=!1;null!==t?n=t:this.currentSlideI_>=0&&(n=e>this.currentSlideI_);var i=this.slides[e];null===this.currentSlide_||!this.isVertical||this.plugins.touch&&this.plugins.touch.isEnabled?this.transitionToSlide_(n,i,this.onSlideChange_):this.scrollTransitionToSlide_(n,i,this.onSlideChange_)}}},{key:"scrollTransitionToSlide_",value:function(e,t,i){var a=this;this.el.style.overflow="hidden",e?t.show():(t.moveBeforeFirst(),t.show(),n.i(s.a)(this.currentSlide_.el.offsetTop,0)),n.i(s.a)(t.el.offsetTop,500,function(){a.currentSlide_.hide(),e&&a.currentSlide_.moveAfterLast(),a.el.style.overflow="auto",setTimeout(function(){i.call(a,t)},150)})}},{key:"transitionToSlide_",value:function(e,t,i){var a=this;n.i(s.a)(0,0);var o="slideInRight";e||(t.moveBeforeFirst(),o="slideInLeft"),this.currentSlide_&&(e&&this.currentSlide_.moveAfterLast(),this.currentSlide_.hide()),t.show(),this.initialised&&this.plugins.touch&&this.plugins.touch.isEnabled?(r.a.once(t.el,r.a.getAnimationEvent(),function(){t.el.classList.remove(o),i.call(a,t)}),t.el.classList.add(o)):i.call(this,t)}},{key:"onSlideChange_",value:function(e){this.currentSlide_&&this.currentSlide_.disable(),this.currentSlide_=e,this.currentSlideI_=e.i,this.currentSlide_.enable(),this.isMoving=!1,r.a.fireEvent(this.el,"ws:slide-change",{slides:this.maxSlide_,currentSlide0:this.currentSlideI_,currentSlide:this.currentSlideI_+1})}},{key:"goNext",value:function(){var e=this.currentSlideI_+1;if(e>=this.maxSlide_){if(!this.options.loop)return;e=0}this.goToSlide(e,!0)}},{key:"goPrev",value:function(){var e=this.currentSlideI_-1;if(e<0){if(!this.options.loop)return;e=this.maxSlide_-1}this.goToSlide(e,!1)}},{key:"isValidIndexSlide_",value:function(e){return e>=0&&e=this.maxSlide_)&&(e=0),0!==e)for(var t=0;t0&&(this.interval_=setInterval(this.ws_.goNext.bind(this.ws_),e))}},{key:"stop",value:function(){this.interval_&&(clearInterval(this.interval_),this.interval_=null)}}]),e}();t.a=r},function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var a=function(){function e(e,t){for(var n=0;nMath.abs(t);if(this.isGoingUp_=t<0,this.isGoingLeft_=n<0,a){if(i)return;e.preventDefault()}(Math.abs(t)>=this.ws_.options.minWheelDelta||Math.abs(n)>=this.ws_.options.minWheelDelta)&&(a&&this.isGoingLeft_||!a&&this.isGoingUp_?this.ws_.goPrev():this.ws_.goNext(),e.preventDefault())}}]),e}();t.a=r},function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var a=n(3),o=function(){function e(e,t){for(var n=0;nMath.abs(t)&&(e<-this.ws_.options.slideOffset?this.ws_.goPrev():e>this.ws_.options.slideOffset&&this.ws_.goNext())}}],[{key:"normalizeEventInfo",value:function(e){var t={pageX:0,pageY:0};return void 0!==e.changedTouches?t=e.changedTouches[0]:void 0!==e.originalEvent&&void 0!==e.originalEvent.changedTouches&&(t=e.originalEvent.changedTouches[0]),{x:e.offsetX||e.layerX||t.pageX,y:e.offsetY||e.layerY||t.pageY}}}]),e}();t.a=s},function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var a=n(0),o=n(1),r=function(){function e(e,t){for(var n=0;n1&&void 0!==arguments[1]?arguments[1]:500,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:function(){},i=e-o.scrollTop,r=o.scrollTop;if(!t)return o.scrollTop=e,void n();!function s(l){l+=16;var u=Math.min(1,l/t),c=a.a.swing(u,l*u,e,i,t);o.scrollTop=Math.floor(r+c*i),l + + + + + + + + + WebSlides Tutorial: Classes + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ +
+
+ + + +
+ + +
+

WebSlides Tutorial

+

Classes

+

* * *

+

+ + + + + Free Download + +

+
+ +
+
+ +
+

WebSlides Classes

+

Friendly naming conventions.

+ +
+ +
+
+
+

+ + + + CSS Syntax +

+

WebSlides is so easy to understand and love. Baseline: 8.

+
+
    +
  • Typography: .text-landing, .text-subtitle, .text-data, .text-intro...
    • +
  • BG Colors: .bg-primary, .bg-blue,.bg-apple...
    • +
  • BG Images: .background, .background-center-bottom...
    • +
  • Cards: .card-60, .card-50, .card-40...
    • +
  • Sizes: .size-50, .size-40...
    • +
  • Flex Blocks: .flexblock.clients, .flexblock.gallery, .flexblock.metrics...
    • +
+
+ +
+
+ +
+
+
+

WebSlides is really easy

+

Each parent <section> in the #webslides element is an individual slide.

+

Code is neat, scalable, and well documented. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting. Based on SimpleSlides, by Jenn Schiffer :)

+
+ +
+ 
<article id="webslides">
+  <!-- Slide 1 -->
+  <section>
+    <h1>Design for trust</h1>
+  </section>
+  <!-- Slide 2 -->
+  <section class="bg-primary">
+    <div class="wrap">
+      <h2>.wrap = container 1200px with fadein</h2>
+    </div>
+  </section>
+</article>
+
+
+ +
+ +
+

Vertical sliding? <article id="webslides" class="vertical">

+
+ +
+
+
+ +
+

Header (logo) .alignright

+
+
+
+

Simple CSS Alignments

+

Put content wherever you want.

+
+ +
+
+
+ iPhone +

img.alignleft

+

img.alignleft.size-50

+

Jobs unveiled the iPhone to the public on January 9, 2007, at the Macworld 2007 convention at the Moscone Center in San Francisco. Apple sold 6.1 million first generation iPhone units over five quarters.

+

Image size recommended:
800x600px / 600x450px.

+
+ +
+
+
+ iPhone +

img.alignright

+

img.alignright.size-50

+

Jobs unveiled the iPhone to the public on January 9, 2007, at the Macworld 2007 convention at the Moscone Center in San Francisco. Apple sold 6.1 million first generation iPhone units over five quarters.

+

Image size recommended:
800x600px / 600x450px.

+
+ +
+
+
+ iPhone +

img.aligncenter.size-40

+
+ +
+
+
+
+

1/9 left top

+

Put content wherever you want. Have less. Do more. Create beautiful solutions.

+

.slide-top and .content-left

+
+
+ +
+
+
+
+

2/9 center top

+

In a village of La Mancha, the name of which I have no desire to call to mind,

+

.slide-top and .content-center

+
+
+ +
+
+
+
+

3/9 right top

+

there lived not long since one of those gentlemen that keep a lance in the lance-rack, an old buckler, a lean hack, and a greyhound for coursing.

+

.slide-top and .content-right

+
+
+ +
+
+
+
+

4/9 left center

+

An olla of rather more beef than mutton, a salad on most nights, scraps on Saturdays,

+

.content-left

+
+
+ +
+
+
+
+

5/9 center

+

lentils on Fridays, and a pigeon or so extra on Sundays, made away with three-quarters of his income.

+

.content-center

+
+
+ +
+
+
+
+

6/9 right center

+

he rest of it went in a doublet of fine cloth and velvet breeches and shoes to match for holidays,

+

.content-right

+
+
+ +
+
+
+
+

7/9 left bottom

+

while on week-days he made a brave figure in his best homespun.

+

.slide-bottom and .content-left

+
+
+ +
+
+
+
+

8/9 center bottom

+

He had in his house a housekeeper past forty, a niece under twenty, and a lad for the field and market-place,

+

.slide-bottom and .content-center

+
+
+ +
+
+
+
+

9/9 right bottom

+

who used to saddle the hack as well as handle the bill-hook.

+

.slide-bottom and .content-right

+
+
+ +
+
+ +
+

.grid + .column

+

Basic Grid (auto-fill and equal height).

+
+
+
Why WebSlides?
+

There're excellent presentation tools out there. WebSlides is about good karma and sharing content. Hypertext, clean code, and beauty as narrative elements.

+

* * *

+
+ +
+
WebSlides Files
+
+ +
+
How easy is WebSlides?
+

You can create your own presentation instantly. Just a basic knowledge of HTML and CSS is required. Simply choose a demo and customize it.

+

* * *

+
+ +
+ +
+ +
+
+ +
+

.grid.vertical-align + .column

+

Basic Grid (auto-fill and equal height).

+
+
+
Why WebSlides?
+

There're excellent presentation tools out there. WebSlides is about good karma and sharing content. Hypertext, clean code, and beauty as narrative elements.

+

* * *

+
+ +
+
WebSlides Files
+
+ +
+
How easy is WebSlides?
+

You can create your own presentation instantly. Just a basic knowledge of HTML and CSS is required. Simply choose a demo and customize it.

+

* * *

+
+ +
+ +
+ +
+
+
+

.grid.sm (sidebar + main)

+
+
+
+

.column 1

+

Stendhal syndrome is a psychosomatic disorder that causes rapid heartbeat, dizziness, fainting, confusion and even hallucinations when an individual is exposed to an experience of great personal significance, particularly viewing art.

+
+
+

.column 2

+

The illness is named after the 19th-century French author Stendhal (pseudonym of Marie-Henri Beyle), who described his experience with the phenomenon during his 1817 visit to Florence in his book Naples and Florence: A Journey from Milan to Reggio.

+

When he visited the Basilica of Santa Croce, where Niccolò Machiavelli, Michelangelo and Galileo Galilei are buried, he saw Giotto's frescoes for the first time and was overcome with emotion.

+
+
+ +
+ +
+
+
+

.grid.ms (main + sidebar)

+
+
+
+

.column 1

+

Beauty is a characteristic of an animal, idea, object, person or place that provides a perceptual experience of pleasure or satisfaction. Beauty is studied as part of aesthetics, culture, social psychology and sociology.

+

An "ideal beauty" is an entity which is admired, or possesses features widely attributed to beauty in a particular culture, for perfection.

+
+
+

.column 2

+

The experience of "beauty" often involves an interpretation of some entity as being in balance and harmony with nature, which may lead to feelings of attraction and emotional well-being.

+
+
+ +
+ +
+
+
+

.grid.sms (sidebar + main + sidebar)

+
+
+
+

.column 1

+

Information architecture is considered to have been founded by Richard Saul Wurman.

+
+
+

.column 2

+

Information architecture (IA) is the structural design of shared information environments; the art and science of organizing and labelling websites, intranets, online communities and software to support usability and findability; and an emerging community of practice focused on bringing principles of design and architecture to the digital landscape.

+
+
+

.column 3

+

The difficulty in establishing a common definition for "information architecture" arises partly from the term's existence in multiple fields.

+
+
+ +
+ +
+
+
+
+
+ Big Ben, London +
+ + + + + David Dibert (Unsplash) + +
+
+ +
+

+ Discover London +

+

.card-50.bg-white

+
    +
  • + Density: 5,518/km2 +
    • +
  • Population: 8,673,713
    • +
  • Website: visitlondon.com
    • +
+

+ There are many reasons to visit London. London has a diverse range of people and cultures, and more than 300 languages are spoken in the region. +

+
+ +
+ +
+ +
+
+
+
+
+

Unsplash +

+

.card-50.bg-white

+

Unsplash is a really cool resource. It is a collection of Creative Commons Zero licensed photos that are really great. +

+
    +
  • + Role: Frontend +
    • +
  • Client: Acme
    • +
  • Year: 2018
    • +
+
+ +
+ Apple Watch +
+ + + + + Crew (Unsplash) + +
+
+ +
+ +
+ +
+
+
+
+ Yosemite National Park +
+ + + + + Chad Madden (Unsplash) + +
+
+ +
+

+ What is inspiration? +

+

+ In Greek thought, inspiration meant that the poet or artist would go into ecstasy or furor poeticus, the divine frenzy or poetic madness. The Muses are the inspirational goddesses of literature, science, and the arts in Greek mythology. +

+
+ +
+ +
+
+

Backgrounds

+

<section class="bg-apple">

+
+
+
+

Corporate Backgrounds

+
    +
  • +

    .bg-primary

    + #44d +
    • +
  • +

    .bg-secondary

    + #67d +
    • +
  • +

    .bg-light

    + #edf2f7 +
    • +
  • +

    body

    + #f7f9fb +
    • +
+
+

General Colors

+
    +
  • +

    .bg-black

    + #111 +
    • +
  • +

    .bg-black-blue

    + #123 +
    • +
  • +

    .bg-gray

    + #d5d9e2 +
    • +
  • +

    .bg-white

    + #fff +
    • +
+
+ +
+
+
+
    +
  • +

    .bg-red

    + #c23 +
    • +
  • +

    .bg-green

    + #077 +
    • +
  • +

    .bg-blue

    + #346 +
    • +
  • +

    .bg-purple

    + #b6d +
    • +
+
+

Transparent Backgrounds

+
    +
  • +

    .bg-trans-dark

    + rgba(0,0,0 , 0.5) +
    • +
  • +

    .bg-trans-light

    + rgba(255,255,255 , 0.2) +
    • +
+
+ +
+
+
+

Gradients

+
    +
  • Horizontal .bg-gradient-h
    • +
  • Radial .bg-gradient-r
    • +
  • Vertical .bg-gradient-v
    • +
+
+ +
+
+ +
+

Horizontal Gradient

+

section.bg-gradient-h

+
+ +
+
+
+

Radial Gradient

+

section.bg-gradient-r

+
+ +
+
+ +
+

Vertical Gradient

+

section.bg-gradient-v

+
+ +
+
+
+

Background Videos

+ 
<video class="background-video" autoplay muted loop poster="image.jpg">
+  <source src="video.mp4" type="video/mp4">
+</video>
+

.background-video

+
+ +
+
+
+

.background-video

+

WebSlides is the easiest way to make HTML presentations. Inspire and engage.

+
+ +
+
+
+

BG Video with Overlay

+

section.bg-blue > .background-video.dark or .light

+
+ +
+
+
+
+

Fullscreen Background Images

+ 
<section>
+	<span class="background" style="background-image:url('https://source.unsplash.com/UJbHNoVPZW0/')"></span>
+	<section>
+		<h1>Slide</h1>
+	</section>
+</section>
+

How to embed Unsplash photos?

+
+
+

16 Different Backgrounds

+
    +
  • .background (cover)
    • +
  • .background-top (cover)
    • +
  • .background-bottom (cover)
    • +
  • .background.light (opacity)
    • +
  • .background.dark (opacity)
    • +
  • .background-center
    • +
  • .background-center-top
    • +
  • .background-center-bottom
    • +
  • .background-left
    • +
  • .background-left-top
    • +
  • .background-left-bottom
    • +
  • .background-right
    • +
  • .background-right-top
    • +
  • .background-right-bottom
    • +
  • .background-anim (animated)
    • +
  • .background-video (fullscreen)
    • +
+
+
+ +
+
+ +
+
+

.background-(position)

+

.background-right-bottom

+
    +
  • +
    + + + +

    Ultra-Fast WiFi

    + Simple and secure file sharing. +
    +
    • +
  • +
    + + + +

    All day battery life

    + Your battery worries may be over. +
    +
    • +
  • +
    + + + +

    Lifetime Warranty

    + We'll fix it or if we can't, we'll replace it. +
    +
    • +
+
+
+ +
+
+ + +
+

Iceland

+

section[class*="bg-"] > .background.dark

+
+
+
+ + +
+

Iceland

+

section[class*="bg-"] > .background.light

+
+
+
+ + +
+

.background.anim

+
+ +
+
+
+

Flexible blocks

+

ul.flexblock = Flexible blocks with auto-fill and equal height.

+
+
    +
  • +

    + + + + .flexblock li 1 +

    + Multipurpose: services, features, specs... +
    • +
  • +

    + + + + .flexblock li 2 +

    + Multipurpose: benefits, clients, work... +
    • +
  • +

    + + + + .flexblock li 3 +

    + Multipurpose: news, metrics, plans... +
    • +
+
+ +
+
+
+
+

Flexible Block = .flexblock

+

Auto-fill & Equal height columns:

+ 
<ul class="flexblock">
+  <li>
+    Item 1
+  </li>
+  <li>
+    Item 2
+  </li>
+  <li>
+    Item 3
+  </li>
+  <li>
+    Item 4
+  </li>
+</ul>
+
+
+

Block Link = .flexblock.blink

+

Make the whole block clickable:

+ 
<ul class="flexblock blink">
+  <li>
+    <a href="#">
+      Item 1
+    </a>
+  </li>
+  <li>
+    <a href="">
+      Item 2
+    </a>
+  </li>
+</ul>
+
+
+ +
+
+
+

ul.flexblock

+
    +
  • +

    + + + + Purpose +

    + Businesses that people love +
    • +
  • +

    + + + + Principles +

    + Ethics of openness and good taste +
    • +
  • +

    + + + + Process +

    + Useful → Easy → Fast → Beautiful +
    • +
+
+

ul.flexblock.blink

+ +
+ +
+
+
+

ul.flexblock.blink.border

+ +
+ +
+
+
+

Clients

+

ul.flexblock.clients

+ +
+ +
+
+
+

Clients

+

ul.flexblock.clients.border

+ +
+ +
+
+
+

ul.flexblock.features

+
    +
  • +
    +

    100% customizable

    + Well documented. +
    +
    • +
  • +
    + $48 +

    Extra virgin olive oil

    + The Spanish caviar. +
    +
    • +
  • +
    +

    + + + + Ultra-fast Wifi +

    + Simple file sharing. +
    +
    • +
+
+

ul.flexblock.features.blink

+ +
+ +
+
+
+

ul.flexblock.gallery

+ +
+ +
+
+
+

ul.flexblock.gallery + .overlay

+ +
+ +
+
+
+

ul.flexblock.metrics

+ +
    +
  • Founded + 2016 +
    • +
  • + + + + + + 24M Subscribers +
    • +
  • + + + + + + Revenue: $16M +
    • +
  • + Monthly Growth + 64% +
    • +
  • + + + + + + 8 Offices +
    • +
  • + + + + + + 48 Employees +
    • +
  • + + + + + + Benefits: $2,4M +
    • +
  • + + + + + + Bank: $32M +
    • +
+
+ +
+
+
+

ul.flexblock.metrics.border

+ +
    +
  • Founded + 2016 +
    • +
  • + + + + + + 24M Subscribers +
    • +
  • + + + + + + Revenue: $16M +
    • +
  • + Monthly Growth + 64% +
    • +
  • + + + + + + 8 Offices +
    • +
  • + + + + + + 48 Employees +
    • +
  • + + + + + + Benefits: $2,4M +
    • +
  • + + + + + + Bank: $32M +
    • +
+
+ +
+
+
+

.flexblock.plans.blink

+

All content is for demo purposes only.

+ +
+ +
+
+
+ +
+ +
+
+
+
+

ul.flexblock.specs

+
    +
  • +
    + + + +

    Ultra-Fast WiFi

    + Simple and secure file sharing. +
    +
    • +
  • +
    + + + +

    All day battery life

    + Your battery worries may be over. +
    +
    • +
  • +
    + + + +

    Lifetime Warranty

    + We'll fix it or if we can't, we'll replace it. +
    +
    • +
+
+ +
+ Pixel Phone +
+
+ +
+
+ +
+

.flexblock.reasons

+
+
+
    +
  • +

    Why WebSlides? Work better, faster.

    +

    Designers and marketers can now focus on the content. Simply choose a demo and customize it in minutes. Be memorable!

    +
    • +
  • +

    Good karma. Just the essentials and using lovely CSS.

    +

    WebSlides is about telling the story, and sharing it in a beautiful way. Hypertext and clean code as narrative elements.

    +
    • +
+
+ +
+ +
+
+
+

ul.flexblock.steps

+
    + +
  • + + + + + +

    01. Passion

    +

    When you're really passionate about your job, you can change the world.

    +
    • +
  • +
    + + + + + +

    02. Purpose

    +

    Why does this business exist? How are you different? Why matters?

    +
    • +
  • +
    + + + + + +

    03. Principles

    +

    Leadership through usefulness, openness, empathy, and good taste.

    +
    • +
  • +
    + + + + + +

    04. Process

    +
      +
    • Useful
      • +
    • Easy
      • +
    • Fast
      • +
    • Beautiful
      • +
    +
    • +
+
+ +
+
+
+

ul.flexblock.activity

+ +
+ +
+
+
+
+
+

Ag

+
+ +
+

Roboto in Google Fonts.

+

The quick brown fox jumps over the lazy dog.

+

ABCDEFGHIJKLMNOPQRSTUVWXYZ

+

abcdefghijklmnopqrstuvwxyz

+

1234567890(,.;:?!$&*)

+
+ +
+ +
+ +
+
+
+

Landings

+

.text-landing

+
+ +
+
+
+

Landings

+

Create a simple web presence.

+

.text-intro

+
+ +
+
+
+

Powered by #WebSlides .text-subtitle

+

Landings

+

Create a simple web presence.

+
+ +
+
+ +
+

Landings

+

.text-shadow

+
+ +
+
+

4,235,678

+

.text-data

+
+
+ +
+

Why WebSlides? .text-context

+

WebSlides is incredibly easy and versatile. The easiest way to make HTML presentations.

+
+ +
+
+
+

.text-cols (2 columns)

+
+

Why WebSlides? There are excellent presentation tools out there. WebSlides is about sharing content, essential features, and clean markup. Each parent <section> in the #webslides element is an individual slide.

+

WebSlides help you build a culture of innovation and excellence. When you're really passionate about your job, you can change the world. How to manage a design-driven organization? Leadership through usefulness, openness, empathy, and good taste.

+
+
    +
  • +
    + + + + Call us at 555.345.6789 +
    +
    • +
  • +
    + + + + @username +
    +
    • +
  • +
    + + + + Send us an email +
    +
    • +
+
+ +
+
+
+
+
+

+ A Phone by Google +

+

Pixel's camera lets you take brilliant photos in low light, bright light or any light.

+
    +
  • + + .text-label: + + Google (2016). +
    • +
  • + + Services: + + Industrial Design. +
    • +
  • + + Website: + + madeby.google.com/phone/ +
    • +
+
+ +
+
+ Pixel Phone +
+
+ +
+ +
+ +
+
+
+
+
+

Ag

+
+ +
+

Maitree in Google Fonts.

+

The quick brown fox jumps over the lazy dog.

+

ABCDEFGHIJKLMNOPQRSTUVWXYZ

+

abcdefghijklmnopqrstuvwxyz

+

1234567890(,.;:?!$&*)

+
+ +
+ +
+ +
+
+ +
+
+

WebSlides is incredibly easy and versatile.

+

.text-serif (Maitree)

+
+
+

Each parent <section> in the #webslides element is an individual slide.

+

Clean markup with popular naming conventions. Minimum effort. Just focus on your content.

+
+
+ +
+
+
+

What is Stendhal Syndrome?

+

Beauty overdose. .text-pull-right

+

Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.

+

Psychiatrists have long debated whether it really exists.

+

The syndrome is not only associated with viewing a beautiful place, but also good art.

+

The beauty of Italian art has a concentrated perfection and transcendent sensuality that is incredibly addictive.

+

* * *

+
+ +
+
+

One more thing...

+

.text-apple / .bg-apple

+
+
+
+ +
+ +
+
+ +
+

Start in seconds

+

Create your own presentation instantly.
120+ prebuilt slides ready to use.

+

+ + + + + Free Download + + + + + + + Pay what you want. + + +

+
+ +
+ +
+
+ + + + + + + + + + + diff --git a/tests/media.html b/tests/media.html new file mode 100644 index 0000000..151ee93 --- /dev/null +++ b/tests/media.html @@ -0,0 +1,722 @@ + + + + + + + + WebSlides Tutorial: Videos, Images, and Maps + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+
+ + + +
+ + +
+

WebSlides Tutorial

+

Media

+

* * *

+

+ + + + + Free Download + +

+
+ +
+
+
+

A quick reference guide for beginners

+

Videos, images, maps, and charts.

+ +
+ +
+
+ +
+

+ + + + Insert images wherever you want +

+

15 different positions.

+
+ +
+
+
+

15 Different Backgrounds

+
    +
  • .background (fullscreen)
    • +
  • .background-top (cover)
    • +
  • .background-bottom (cover)
    • +
  • .background.light (opacity)
    • +
  • .background.dark (opacity)
    • +
  • .background-center
    • +
  • .background-center-top
    • +
  • .background-center-bottom
    • +
  • .background-left
    • +
  • .background-left-top
    • +
  • .background-left-bottom
    • +
  • .background-right
    • +
  • .background-right-top
    • +
  • .background-right-bottom
    • +
  • .background-anim (animated)
    • +
+
+ +
+
+
+

+ + + + .background = Fullscreen Backgrounds +

+

How to embed Unsplash photos? →

+ 
<section>
+  <span class="background" style="background-image:url('https://source.unsplash.com/nwfuaYecNUs/')"></span>
+  <div class="wrap">
+    <h1>Slide</h1>
+  </div>
+</section>
+

+ + + + Position .background outside of .wrap container. +

+
+ +
+
+ +
+
+

.background-(position)

+

.background-right-bottom

+
    +
  • +
    + + + +

    Ultra-Fast WiFi

    + Simple and secure file sharing. +
    +
    • +
  • +
    + + + +

    All day battery life

    + Your battery worries may be over. +
    +
    • +
  • +
    + + + +

    Lifetime Warranty

    + We'll fix it or if we can't, we'll replace it. +
    +
    • +
+
+
+ +
+
+ + +
+

.background.anim

+
+ +
+
+ +
+

Opacity

+

[class*="bg-"] > .background.light

+ 
<section class="bg-black">
+	<span class="background light" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"></span>
+	<div class="wrap">
+		<h1>Slide</h1>
+	</div>
+</section>
+
+
+
+ +
+

Opacity

+

[class*="bg-"] > .background.dark

+ 
<section class="bg-black">
+	<span class="background dark" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"></span>
+	<div class="wrap">
+		<h1>Slide</h1>
+	</div>
+</section>
+
+
+
+
+

Optional · 500+ icons

+

+ + + + + Font Awesome + + as SVG icons +

+ 
<svg class="fa-flag">
+	<use xlink:href="#fa-flag"></use>
+</svg>
+

How to change icons?

+
    +
  1. Go to fontastic.me.
    2. +
  2. Create a free account.
    3. +
  3. Select new icons.
    4. +
  4. Publish as SVG sprite.
    5. +
  5. Edit svg-icons.css and svg.icons.js.
    6. +
+
+ +
+
+
+

Transparent Logos

+

+ Change the color of a .svg/.png image using CSS. Images are property of their respective owners. +

+
+ +
+ +
+
+ +
+
+

An avatar is the graphical representation of the user or the user's alter ego or character. The word avatar originates in Hinduism.

+

Avatar @username, .avatar-56

+
+
+

img[class*="avatar-"] (80, 72, 64, 56, 48, and 40).

+
+ +
+
+
+
+
+

Devices

+
    +
  • +
    + + + +

    Ultra-Fast WiFi

    + Simple and secure file sharing. +
    +
    • +
  • +
    + + + +

    All day battery life

    + Your battery worries may be over. +
    +
    • +
  • +
    + + + +

    Lifetime Warranty

    + We'll fix it or if we can't, we'll replace it. +
    +
    • +
+
+ +
+
+ iPhone +
+
+ +
+ +
+ +
+
+
+
+
+ Screenshot +
+
+ +
+

Screenshots

+

HTML/CSS Browser.

+ 
<figure class="browser">
+  <img alt="Screenshot" src="image.jpg">
+</figure>
+
+ +
+ +
+
+ +
+

+ Videos +

+
+ +
+
+
+

Background Videos

+ 
<video class="background-video" autoplay muted loop poster="image.jpg">
+  <source src="video.mp4" type="video/mp4">
+</video>
+

.background-video

+
+ +
+
+
+ +
+
+

Audio

+

Overlay: section.bg-red > .background-video.dark or .light

+
+ +
+
+
+ +
+ +
+

Muted

+

Overlay: section.bg-blue > .background-video.dark or .light

+
+ +
+
+
+
+

Responsive Videos

+

Just copy and paste the code from YouTube to your slide.

+ 
<div class="embed">
+ <iframe src="https://www.youtube.com/embed/XjJQBjWYDTs">
+ </iframe>
+</div>
+

.embed (responsive)

+
+ +
+ +
+ +
+ +
+ +
+ +
+
+
+ +
+ +
+ +
+ +
+
+
+

Fullscreen YouTube Video

+ 
<section class="fullscreen">
+  <div class="embed">
+    <iframe src="https://www.youtube.com/embed/iY05U7GaU5I">
+    </iframe>
+  </div>
+</section>
+
+

.fullscreen > .embed (responsive)

+
+ +
+
+ +
+ +
+ +
+
+

+ +

+
+

+ + YouTube API

+

Embed videos with loop, autoplay, and muted attributes. The video will automatically play when the slide is loaded.

+ +

You should use a local or a remote server since the YouTube API doesn't seem to work nicely when using the file directly on the browser.

+
+ +
+
+
+

+ + YouTube API Parameters

+

Syntax: data-autoplay, data-loop, data-no-controls, data-mute.

+
+
+
+ 
<div class="embed">
+  <div data-youtube data-youtube-id="CQY3KUR3VzM" data-autoplay data-loop>
+  </div>
+</div>
+

autoplay + loop

+
+ +
+ 
<div class="embed">
+  <div data-youtube data-youtube-id="CQY3KUR3VzM" data-autoplay data-mute data-no-controls>
+  </div>
+</div>
+

autoplay + mute + no controls.

+
+ +
+ +
+ +
+
+
+
+

YouTube API

+

autoplay + loop

+ 
<div class="embed">
+  <div data-youtube data-youtube-id="_m67JbGjWnc" data-autoplay data-loop>
+  </div>
+</div>
+
+ +
+ +
+
+
+ +
+ +
+ +
+
+
+

Let's make some magic with the YouTube API

+

How to make a fullscreen YouTube video? .fullscreen > .embed

+
+ 
<section class="fullscreen">
+  <div class="embed">
+    <div data-youtube data-youtube-id="dmkwb2KfLW8" data-autoplay data-loop data-no-controls</div>
+  </div>
+</section>
+
+

The video will automatically play when the slide is loaded.

+
+ +
+
+ +
+
+
+ +
+
+
+

Fullscreen YouTube video background

+

Overlaying a transparent background on an embedded Youtube video:

+
+ 
<section class="fullscreen bg-black">
+  <div class="embed dark">
+    <div data-youtube data-youtube-id="c9psfOxJysw" data-autoplay data-loop data-mute data-no-controls</div>
+  </div>
+</section>
+
+

.fullscreen[class*="bg-"] > .embed.dark or .light

+
+ +
+
+ +
+
+
+ +
+

Overlay

+

.fullscreen[class*="bg-"] > .embed.dark or .light

+
+ +
+
+ +
+

+ + + + Maps & Charts +

+
+ +
+
+
+

Status of Net Neutrality around the world.

+
+ +
+ +
+ +
+
+
+ +
+ +
+
+
+

Charts

+ +
+ +
Chart
+
+ +
+ +
+
+
+ + + + + + + + + + + diff --git a/tests/test.css b/tests/test.css new file mode 100644 index 0000000..c52ed91 --- /dev/null +++ b/tests/test.css @@ -0,0 +1,31 @@ + +#webslides-zoomed.grid { + background: #ccc; +} + +#webslides-zoomed.grid > .column { + position: relative; +} +#webslides-zoomed.grid > .column > .wrap-zoom { + position: relative; + background: #fff; +} + +#webslides-zoomed.grid > .column > .wrap-zoom > .slide { + transform: scale(0.25) translate(-150%, -150vh); + display: flex !important; + position: absolute; + top: 0; + left: 0; + clip: rect(0px auto auto 0); +} + + + + +.enorme { + position: absolute; + top: 0; + left: 0; + font-size: 500px; +} diff --git a/tests/test.js b/tests/test.js new file mode 100644 index 0000000..867a1b7 --- /dev/null +++ b/tests/test.js @@ -0,0 +1,36 @@ +window.addEventListener("load", () => { + var getValue = ( px ) => { + return new Number( px.replace( /[^\d\.]/g, '' ) ); + }; + + + var wrap = ( query, tag ) => { + // Now webslides is a grid + const ws = document.getElementById('webslides'); + ws.classList.add('grid'); + + document.querySelectorAll( query ).forEach( elem => { + const div = document.createElement( 'div' ); + div.className = 'column'; + elem.parentElement.insertBefore( div, elem ); + const wrap = document.createElement( 'div' ); + wrap.className = 'wrap-zoom'; + div.appendChild( wrap ); + wrap.appendChild( elem ); + + const divCSS = window.getComputedStyle( div ); + const divW = getValue( divCSS.width ); + const marginW = getValue( divCSS.paddingLeft ) + getValue( divCSS.paddingRight ); + const marginH = getValue( divCSS.paddingTop ) + getValue( divCSS.paddingBottom ); + +// div.style.height = divH + 'px'; + elem.style.width = ( window.innerWidth - marginW * 4 ) + 'px'; + elem.style.height = ( window.innerHeight - marginH * 4 ) + 'px'; + + const slideCSS = window.getComputedStyle( elem ); + wrap.style.height = ( getValue( slideCSS.height ) / 4 ) + 'px'; + }); + }; + + //wrap( '.slide', 'div' ); +});