/*! * jmpress.js v0.4.5 * http://jmpressjs.github.com/jmpress.js * * A jQuery plugin to build a website on the infinite canvas. * * Copyright 2013 Kyle Robinson Young @shama & Tobias Koppers @sokra * Licensed MIT * http://www.opensource.org/licenses/mit-license.php * * Based on the foundation laid by Bartek Szopka @bartaz */ /** PART From impress.js (yes yes) **/ /* We start with a good ol' reset. That's the one by Eric Meyer http://meyerweb.com/eric/tools/css/reset/ You can probably argue if it is needed here, or not, but for sure it doesn't do any harm and gives us a fresh start. */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* Now here is when interesting things start to appear. We set up styles with default font and nice gradient in the background. And yes, there is a lot of repetition there because of -prefixes but we don't want to leave anybody behind. */ body { font-family: 'PT Sans', sans-serif; min-height: 740px; background: rgb(215, 215, 215); background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(rgb(240, 240, 240)), to(rgb(190, 190, 190))); background: -webkit-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); background: -moz-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); background: -ms-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); background: -o-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); background: radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); -webkit-transition: background 0; -moz-transition: background 0; -ms-transition: background 0; -o-transition: background 0; transition: background 0; } /* Now let's bring some text styles back ... */ b, strong { font-weight: bold } i, em { font-style: italic } /* ... and give links a nice look. */ a { color: inherit; text-decoration: none; padding: 0 0.1em; background: rgba(255,255,255,0.5); text-shadow: -1px -1px 2px rgba(100,100,100,0.9); border-radius: 0.2em; -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } a:hover, a:focus { background: rgba(255,255,255,1); text-shadow: -1px -1px 2px rgba(100,100,100,0.5); } /** END OF PART From impress.js (yes yes) **/ /** Real jmpress part STEP STYLES **/ .step { position: relative; width: 900px; margin: 20px auto; display: block; padding: 20px 60px; border-radius: 10px; font-family: 'PT Serif', georgia, serif; font-size: 48px; line-height: 1.5; color: black; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 1000ms ease-in-out 500ms; -moz-transition: all 1000ms ease-in-out 500ms; -ms-transition: all 1000ms ease-in-out 500ms; -o-transition: all 1000ms ease-in-out 500ms; transition: all 1000ms ease-in-out 500ms; } /** ANIMATION **/ .will-fade { -webkit-transition: opacity 1s; -moz-transition: opacity 1s; -ms-transition: opacity 1s; -o-transition: opacity 1s; transition: opacity 1s; opacity: 0; } .fade, .not-supported .will-fade { opacity: 1; } /** ANIMATIONS **/ .will-appear { opacity: 0; } .do-appear { opacity: 1; } .will-drive-right, .will-drive-left { position: relative; -webkit-transition: opacity 0.6s, left 1s; -moz-transition: opacity 0.6s, left 1s; -ms-transition: opacity 0.6s, left 1s; -o-transition: opacity 0.6s, left 1s; transition: opacity 0.6s, left 1s; opacity: 0; } .will-drive-right { left: -300px; } .will-drive-left { left: 300px; } .will-drive-down, .will-drive-up { position: relative; -webkit-transition: opacity 0.6s, top 1s; -moz-transition: opacity 0.6s, top 1s; -ms-transition: opacity 0.6s, top 1s; -o-transition: opacity 0.6s, top 1s; transition: opacity 0.6s, top 1s; opacity: 0; } .will-drive-down { top: -300px; } .will-drive-up { top: 300px; } .do-drive-up, .do-drive-down { opacity: 1; top: 0px; } .do-drive-right, .do-drive-left { opacity: 1; left: 0px; } .will-expand { -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s; opacity: 0; -webkit-transform: translate3d(0,0,1px) scale(0.7,1); -moz-transform: translate3d(0,0,1px) scale(0.7,1); -ms-transform: translate3d(0,0,1px) scale(0.7,1); -o-transform: translate3d(0,0,1px) scale(0.7,1); transform: translate3d(0,0,1px) scale(0.7,1); } .do-expand { opacity: 1; -webkit-transform: translate3d(0,0,1px) scale(1,1); -moz-transform: translate3d(0,0,1px) scale(1,1); -ms-transform: translate3d(0,0,1px) scale(1,1); -o-transform: translate3d(0,0,1px) scale(1,1); transform: translate3d(0,0,1px) scale(1,1); } .has-expand { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } .will-fade { -webkit-transition: opacity 1s; -moz-transition: opacity 1s; -ms-transition: opacity 1s; -o-transition: opacity 1s; transition: opacity 1s; opacity: 0; } .will-fade-slow { -webkit-transition: opacity 2s; -moz-transition: opacity 2s; -ms-transition: opacity 2s; -o-transition: opacity 2s; transition: opacity 2s; opacity: 0; } .will-fade-fast { -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -ms-transition: opacity 0.5s; -o-transition: opacity 0.5s; transition: opacity 0.5s; opacity: 0; } .do-fade, .do-fade-slow, .do-fade-fast { opacity: 1; } .will-warp-right, .will-warp-left { position: relative; -webkit-transition: opacity 0.2s, left 0.5s ease-in-out; -moz-transition: opacity 0.2s, left 0.5s ease-in-out; -ms-transition: opacity 0.2s, left 0.5s ease-in-out; -o-transition: opacity 0.2s, left 0.5s ease-in-out; transition: opacity 0.2s, left 0.5s ease-in-out; opacity: 0; } .will-warp-right { left: -600px; } .will-warp-left { left: 600px; } .will-warp-down, .will-warp-up { position: relative; -webkit-transition: opacity 0.2s, top 0.5s ease-in-out; -moz-transition: opacity 0.2s, top 0.5s ease-in-out; -ms-transition: opacity 0.2s, top 0.5s ease-in-out; -o-transition: opacity 0.2s, top 0.5s ease-in-out; transition: opacity 0.2s, top 0.5s ease-in-out; opacity: 0; } .will-warp-down { top: -600px; } .will-warp-up { top: 600px; } .do-warp-up, .do-warp-down { opacity: 1; top: 0px; } .do-warp-right, .do-warp-left { opacity: 1; left: 0px; } .will-zoom { -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; opacity: 0; -webkit-transform: translate3d(0,0,1px) scale(10,10); -moz-transform: translate3d(0,0,1px) scale(10,10); -ms-transform: translate3d(0,0,1px) scale(10,10); -o-transform: translate3d(0,0,1px) scale(10,10); transform: translate3d(0,0,1px) scale(10,10); } .do-zoom { opacity: 1; -webkit-transform: translate3d(0,0,1px) scale(1,1); -moz-transform: translate3d(0,0,1px) scale(1,1); -ms-transform: translate3d(0,0,1px) scale(1,1); -o-transform: translate3d(0,0,1px) scale(1,1); transform: translate3d(0,0,1px) scale(1,1); } .has-zoom { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } /** GENERAL **/ /* fade out inactive slides */ .step:not(.active) { opacity: 0.3; } /** Remove slide you do not want **/ .hideunactive:not(.active) { opacity: 0; } .hideinpast, .hasbeenactive { opacity: 0; }