From 333ff2c1c46eee9c0cef647ff2c40c0b0e2c4e46 Mon Sep 17 00:00:00 2001 From: Michael Bromley Date: Mon, 1 Sep 2014 09:21:24 +0200 Subject: [PATCH] Updated demo themes --- Gruntfile.js | 6 +- demo/style.css | 12 +- demo/themes/book-pages.css | 16 +- demo/themes/hacker-console.css | 48 ++- demo/themes/parallax-effect.css | 155 ++++++++++ demo/themes/slideshow.css | 284 ------------------ demo/themes/spectrum-slides.css | 169 +++++++++++ demo/themes/star-wars.css | 177 +++++++++-- demo/themes/themes.js | 161 +++++++--- src/demo-themes/book-pages/book-pages.js | 2 +- src/demo-themes/book-pages/book-pages.src.css | 8 +- .../hacker-console/hacker-console.js | 15 + .../hacker-console/hacker-console.src.css | 37 ++- .../parallax-effect/parallax-effect.js | 33 +- .../parallax-effect/parallax-effect.src.css | 111 +++++++ src/demo-themes/slideshow/slideshow.js | 13 - src/demo-themes/slideshow/slideshow.src.css | 121 -------- .../spectrum-slides/spectrum-slides.js | 23 ++ .../spectrum-slides/spectrum-slides.src.css | 86 ++++++ src/demo-themes/star-wars/star-wars.js | 41 ++- src/demo-themes/star-wars/star-wars.src.css | 133 +++++++- 21 files changed, 1128 insertions(+), 523 deletions(-) delete mode 100644 demo/themes/slideshow.css create mode 100644 demo/themes/spectrum-slides.css delete mode 100644 src/demo-themes/slideshow/slideshow.js delete mode 100644 src/demo-themes/slideshow/slideshow.src.css create mode 100644 src/demo-themes/spectrum-slides/spectrum-slides.js create mode 100644 src/demo-themes/spectrum-slides/spectrum-slides.src.css diff --git a/Gruntfile.js b/Gruntfile.js index a33fc51..e426d0d 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -24,11 +24,11 @@ module.exports = function(grunt) { 'src/demo-themes/basic-css-transitions/*.js', 'src/demo-themes/basic-css-animations/*.js', 'src/demo-themes/basic-javascript-animation/*.js', - 'src/demo-themes/slideshow/*.js', + 'src/demo-themes/spectrum-slides/*.js', + 'src/demo-themes/book-pages/*.js', 'src/demo-themes/star-wars/*.js', 'src/demo-themes/parallax-effect/*.js', - 'src/demo-themes/book-pages/*.js', - 'src/demo-themes/hacker-console/*.js', + 'src/demo-themes/hacker-console/*.js' ], dest: 'demo/themes/themes.js' } diff --git a/demo/style.css b/demo/style.css index fed3f7a..2b6474e 100644 --- a/demo/style.css +++ b/demo/style.css @@ -139,12 +139,12 @@ h2 { text-shadow: 0 0 15px rgba(27, 45, 255, 0.21); padding-top: 22vh; background: #425cbc; /* Old browsers */ - background: -moz-linear-gradient(top, #425cbc 0%, #93d5ff 47%, #ffffff 87%, #ffffff 100%); /* FF3.6+ */ - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#425cbc), color-stop(47%,#93d5ff), color-stop(87%,#ffffff), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */ - background: -webkit-linear-gradient(top, #425cbc 0%,#93d5ff 47%,#ffffff 87%,#ffffff 100%); /* Chrome10+,Safari5.1+ */ - background: -o-linear-gradient(top, #425cbc 0%,#93d5ff 47%,#ffffff 87%,#ffffff 100%); /* Opera 11.10+ */ - background: -ms-linear-gradient(top, #425cbc 0%,#93d5ff 47%,#ffffff 87%,#ffffff 100%); /* IE10+ */ - background: linear-gradient(to bottom, #425cbc 0%,#93d5ff 47%,#ffffff 87%,#ffffff 100%); /* W3C */ + background: -moz-linear-gradient(top, #425cbc 0%, #93d5ff 47%, #ffffff 87%, rgba(255, 255, 255, 0) 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#425cbc), color-stop(47%,#93d5ff), color-stop(87%,#ffffff), color-stop(100%, rgba(255, 255, 255, 0))); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, #425cbc 0%,#93d5ff 47%,#ffffff 87%, rgba(255, 255, 255, 0) 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #425cbc 0%,#93d5ff 47%,#ffffff 87%, rgba(255, 255, 255, 0) 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #425cbc 0%,#93d5ff 47%,#ffffff 87%, rgba(255, 255, 255, 0) 100%); /* IE10+ */ + background: linear-gradient(to bottom, #425cbc 0%,#93d5ff 47%,#ffffff 87%, rgba(255, 255, 255, 0) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#425cbc', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */ } diff --git a/demo/themes/book-pages.css b/demo/themes/book-pages.css index 1d6e244..6970c74 100644 --- a/demo/themes/book-pages.css +++ b/demo/themes/book-pages.css @@ -7,18 +7,22 @@ -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; - -webkit-transition: -webkit-transform 1.2s; - transition: transform 1.2s; + -webkit-transition: -webkit-transform 0.8s; + transition: transform 0.8s; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; background-color: white; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } .hrz-page.hrz-back { - -webkit-transform: rotateY(-180deg); - transform: rotateY(-180deg); - -webkit-box-shadow: 60px 0px 150px -3px rgba(50, 50, 50, 0.47); - box-shadow: 60px 0px 150px -3px rgba(50, 50, 50, 0.47); + -webkit-transform: rotateY(-90deg); + transform: rotateY(-90deg); + -webkit-box-shadow: 60px 0 150px -3px rgba(50, 50, 50, 0.47); + box-shadow: 60px 0 150px -3px rgba(50, 50, 50, 0.47); + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } .hrz-page.hrz-focus-from-fore { diff --git a/demo/themes/hacker-console.css b/demo/themes/hacker-console.css index 6aaeac5..3125394 100644 --- a/demo/themes/hacker-console.css +++ b/demo/themes/hacker-console.css @@ -31,7 +31,6 @@ img.hrz-element { -webkit-transition: none !important; transition: none !important; - background-color: transparent; -webkit-filter: url('themes/hacker-console.svg#green'); filter: url('themes/hacker-console.svg#green'); } @@ -40,21 +39,64 @@ svg.hrz-element, img.hrz-element { border: 1px solid rgb(13, 186, 13) !important; } +.hrz-page img { + background-color: #fff !important; +} + +.caret { + display: inline-block; + width: 3px; + margin-bottom: -2px; + margin-left: 3px; + height: 16px; + background-color: rgb(13, 186, 13); + -webkit-animation: blink 1s infinite; + animation: blink 1s infinite; + -webkit-animation-timing-function: steps(2, end); + animation-timing-function: steps(2, end); +} + +@-webkit-keyframes blink { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +@keyframes blink { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + /* custom styling of known page elements */ .hrz-element.splash h1 { background: transparent; border: 5px solid rgb(13, 186, 13); + background-color: rgb(11, 54, 11); color: rgb(13, 186, 13); font-size: 15vw; } -.cta { +.hrz-element .cta { padding: 10px; border: 1px solid rgb(13, 186, 13); color: rgb(13, 250, 13); border-radius: 0; } +.hrz-element code { + background-color: #111; + border: 1px solid rgb(13, 186, 13); + color: rgb(13, 186, 13); + border-radius: 0; +} + .hrz-element.thumbnail { background-color: transparent; border-radius: 0; @@ -69,7 +111,7 @@ h2.hrz-element { font-size: 1.4em; } -h2:before { +h2.hrz-element:before { content: '#'; margin-left: -29px; margin-right: 6px; diff --git a/demo/themes/parallax-effect.css b/demo/themes/parallax-effect.css index f75ec96..9994a04 100644 --- a/demo/themes/parallax-effect.css +++ b/demo/themes/parallax-effect.css @@ -1,3 +1,154 @@ +#hrz-container { +} + +/* + The moving blue gradient background + */ +#hrz-container:before { + content: ' '; + z-index: -10; + position: absolute; + overflow: visible; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: -webkit-gradient(linear, left top, left bottom, from(#425cbc), color-stop(30%, #93d5ff), color-stop(60%, #ffffff), to(rgba(255, 255, 255, 0))); + background: -webkit-linear-gradient(top, #425cbc 0%, #93d5ff 30%, #ffffff 60%, rgba(255, 255, 255, 0) 100%); + background: linear-gradient(to bottom, #425cbc 0%, #93d5ff 30%, #ffffff 60%, rgba(255, 255, 255, 0) 100%); + -webkit-transition: -webkit-transform 1s 0.6s; + transition: transform 1s 0.6s; +} + +#hrz-container.p1:before { + -webkit-transform: translateY(0px); + -ms-transform: translateY(0px); + transform: translateY(0px); +} +#hrz-container.p2:before { + -webkit-transform: translateY(-100px); + -ms-transform: translateY(-100px); + transform: translateY(-100px); +} +#hrz-container.p3:before { + -webkit-transform: translateY(-200px); + -ms-transform: translateY(-200px); + transform: translateY(-200px); +} +#hrz-container.p4:before { + -webkit-transform: translateY(-300px); + -ms-transform: translateY(-300px); + transform: translateY(-300px); +} +#hrz-container.p5:before { + -webkit-transform: translateY(-400px); + -ms-transform: translateY(-400px); + transform: translateY(-400px); +} +#hrz-container.p6:before { + -webkit-transform: translateY(-500px); + -ms-transform: translateY(-500px); + transform: translateY(-500px); +} +#hrz-container.max-top:before { + -webkit-transform: translateY(-500px); + -ms-transform: translateY(-500px); + transform: translateY(-500px); +} + +/* + The floating clouds + */ +#hrz-container:after { + content: ' '; + position: absolute; + z-index: -5; + height: 3000px; + width: 4000px; + left: -300px; + background: + radial-gradient(110px 70px at 260px 355px, #e4e8ff 68%, rgba(228, 232, 255,0)), radial-gradient(120px 90px at 300px 330px, #e4e8ff 68%, rgba(228, 232, 255,0)), radial-gradient(70px 70px at 390px 350px, #e1e6ff 65%, rgba(228, 232, 255,0)), radial-gradient(130px 60px at 660px 865px, #dfecf4 68%, rgba(223, 236, 244,0)), radial-gradient(120px 90px at 740px 830px, #dfecf4 68%, rgba(223, 236, 244,0)), radial-gradient(70px 70px at 820px 850px, #dfecf4 65%, rgba(223, 236, 244,0)), radial-gradient(130px 60px at 1390px 551px, #e1e6ff 68%, rgba(228, 232, 255,0)), radial-gradient(120px 90px at 1340px 530px, #dfe4ff 68%, rgba(228, 232, 255,0)), radial-gradient(90px 70px at 1220px 550px, #e4e8ff 65%, rgba(228, 232, 255,0)); + background: + -webkit-radial-gradient(260px 355px, 110px 70px, #e4e8ff 68%, rgba(228, 232, 255,0)), -webkit-radial-gradient(300px 330px, 120px 90px, #e4e8ff 68%, rgba(228, 232, 255,0)), -webkit-radial-gradient(390px 350px, 70px 70px, #e1e6ff 65%, rgba(228, 232, 255,0)), -webkit-radial-gradient(660px 865px, 130px 60px, #dfecf4 68%, rgba(223, 236, 244,0)), -webkit-radial-gradient(740px 830px, 120px 90px, #dfecf4 68%, rgba(223, 236, 244,0)), -webkit-radial-gradient(820px 850px, 70px 70px, #dfecf4 65%, rgba(223, 236, 244,0)), -webkit-radial-gradient(1390px 551px, 130px 60px, #e1e6ff 68%, rgba(228, 232, 255,0)), -webkit-radial-gradient(1340px 530px, 120px 90px, #dfe4ff 68%, rgba(228, 232, 255,0)), -webkit-radial-gradient(1220px 550px, 90px 70px, #e4e8ff 65%, rgba(228, 232, 255,0)); + background: + radial-gradient(110px 70px at 260px 355px, #e4e8ff 68%, rgba(228, 232, 255,0)), + radial-gradient(120px 90px at 300px 330px, #e4e8ff 68%, rgba(228, 232, 255,0)), + radial-gradient(70px 70px at 390px 350px, #e1e6ff 65%, rgba(228, 232, 255,0)), + + radial-gradient(130px 60px at 660px 865px, #dfecf4 68%, rgba(223, 236, 244,0)), + radial-gradient(120px 90px at 740px 830px, #dfecf4 68%, rgba(223, 236, 244,0)), + radial-gradient(70px 70px at 820px 850px, #dfecf4 65%, rgba(223, 236, 244,0)), + + radial-gradient(130px 60px at 1390px 551px, #e1e6ff 68%, rgba(228, 232, 255,0)), + radial-gradient(120px 90px at 1340px 530px, #dfe4ff 68%, rgba(228, 232, 255,0)), + radial-gradient(90px 70px at 1220px 550px, #e4e8ff 65%, rgba(228, 232, 255,0)); + top: 0; + -webkit-transition: top 1s 0.6s; + transition: top 1s 0.6s; + -webkit-animation: floating-clouds 50s linear infinite; + animation: floating-clouds 50s linear infinite; +} +#hrz-container.p1:after { + top: 0; +} +#hrz-container.p2:after { + top: -200px; +} +#hrz-container.p3:after { + top: -400px; +} +#hrz-container.p4:after { + top: -600px; +} +#hrz-container.p5:after { + top: -800px; +} +#hrz-container.p6:after { + top: -1000px; +} +#hrz-container.max-top:after { + top: -1000px; +} + +@-webkit-keyframes floating-clouds { + 0% { + -webkit-transform: translateX(0); + transform: translateX(0); + opacity: 0; + } + 2% { + opacity: 0.9; + } + 97% { + opacity: 0.9; + } + 100% { + -webkit-transform: translateX(1000px); + transform: translateX(1000px); + opacity: 0; + } +} + +@keyframes floating-clouds { + 0% { + -webkit-transform: translateX(0); + transform: translateX(0); + opacity: 0; + } + 2% { + opacity: 0.9; + } + 97% { + opacity: 0.9; + } + 100% { + -webkit-transform: translateX(1000px); + transform: translateX(1000px); + opacity: 0; + } +} + + .hrz-page.hidden { visibility: hidden; } @@ -24,4 +175,8 @@ .hrz-focus-from-fore > .hrz-element.transition, .hrz-focus-from-back > .hrz-element.transition { -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.000), top 1s, opacity 0.3s; transition: transform 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.000), top 1s, opacity 0.3s; +} + +.hrz-element.splash h1 { + background: none; } \ No newline at end of file diff --git a/demo/themes/slideshow.css b/demo/themes/slideshow.css deleted file mode 100644 index 52d2579..0000000 --- a/demo/themes/slideshow.css +++ /dev/null @@ -1,284 +0,0 @@ -@-webkit-keyframes slideOutTop { - 10% { - -webkit-transform: perspective(1000px) translate3d(-10px, -10px, -100px); - transform: perspective(1000px) translate3d(-10px, -10px, -100px); - -webkit-transition-timing-function: cubic-bezier(.45,1.8,.5,.75); - transition-timing-function: cubic-bezier(.45,1.8,.5,.75); - } - 30% { - -webkit-transform: perspective(1000px) translate3d(50px, 50px, -100px); - transform: perspective(1000px) translate3d(50px, 50px, -100px); - -webkit-transition-timing-function: cubic-bezier(.45,1.8,.5,.75); - transition-timing-function: cubic-bezier(.45,1.8,.5,.75); - } - 50% { - -webkit-transform: perspective(1000px) translate3d(50px, 50px, -100px); - transform: perspective(1000px) translate3d(50px, 50px, -100px); - } - 75% { - opacity: 1; - } - 100% { - opacity: 0; - -webkit-transform: perspective(1000px) translate3d(-100px, -100px, -400px); - transform: perspective(1000px) translate3d(-100px, -100px, -400px); - -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); - transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); - } -} - -@keyframes slideOutTop { - 10% { - -webkit-transform: perspective(1000px) translate3d(-10px, -10px, -100px); - transform: perspective(1000px) translate3d(-10px, -10px, -100px); - -webkit-transition-timing-function: cubic-bezier(.45,1.8,.5,.75); - transition-timing-function: cubic-bezier(.45,1.8,.5,.75); - } - 30% { - -webkit-transform: perspective(1000px) translate3d(50px, 50px, -100px); - transform: perspective(1000px) translate3d(50px, 50px, -100px); - -webkit-transition-timing-function: cubic-bezier(.45,1.8,.5,.75); - transition-timing-function: cubic-bezier(.45,1.8,.5,.75); - } - 50% { - -webkit-transform: perspective(1000px) translate3d(50px, 50px, -100px); - transform: perspective(1000px) translate3d(50px, 50px, -100px); - } - 75% { - opacity: 1; - } - 100% { - opacity: 0; - -webkit-transform: perspective(1000px) translate3d(-100px, -100px, -400px); - transform: perspective(1000px) translate3d(-100px, -100px, -400px); - -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); - transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); - } -} - -@-webkit-keyframes slideOutBottom { - 10% { - -webkit-transform: perspective(1000px) translate3d(-10px, -10px, 0); - transform: perspective(1000px) translate3d(-10px, -10px, 0); - -webkit-transition-timing-function: cubic-bezier(.45,1.8,.5,.75); - transition-timing-function: cubic-bezier(.45,1.8,.5,.75); - } - 30% { - -webkit-transform: perspective(1000px) translate3d(50px, 50px, 0); - transform: perspective(1000px) translate3d(50px, 50px, 0); - -webkit-transition-timing-function: cubic-bezier(.45,1.8,.5,.75); - transition-timing-function: cubic-bezier(.45,1.8,.5,.75); - } - 50% { - opacity: 1; - -webkit-transform: perspective(1000px) translate3d(50px, 50px, 0); - transform: perspective(1000px) translate3d(50px, 50px, 0); - -webkit-transition-timing-function: cubic-bezier(.45,1.8,.5,.75); - transition-timing-function: cubic-bezier(.45,1.8,.5,.75); - } - 70% { - opacity: 1; - } - 80% { - opacity: 0; - -webkit-transform: perspective(1000px) translate3d(50px, 250px, 300px); - transform: perspective(1000px) translate3d(50px, 250px, 300px); - -webkit-transition-timing-function: cubic-bezier(.45,1.8,.5,.75); - transition-timing-function: cubic-bezier(.45,1.8,.5,.75); - } - 100% { - opacity: 0; - -webkit-transform: perspective(1000px) translate3d(50px, 250px, 300px); - transform: perspective(1000px) translate3d(50px, 250px, 300px); - -webkit-transition-timing-function: cubic-bezier(.45,1.8,.5,.75); - transition-timing-function: cubic-bezier(.45,1.8,.5,.75); - } -} - -@keyframes slideOutBottom { - 10% { - -webkit-transform: perspective(1000px) translate3d(-10px, -10px, 0); - transform: perspective(1000px) translate3d(-10px, -10px, 0); - -webkit-transition-timing-function: cubic-bezier(.45,1.8,.5,.75); - transition-timing-function: cubic-bezier(.45,1.8,.5,.75); - } - 30% { - -webkit-transform: perspective(1000px) translate3d(50px, 50px, 0); - transform: perspective(1000px) translate3d(50px, 50px, 0); - -webkit-transition-timing-function: cubic-bezier(.45,1.8,.5,.75); - transition-timing-function: cubic-bezier(.45,1.8,.5,.75); - } - 50% { - opacity: 1; - -webkit-transform: perspective(1000px) translate3d(50px, 50px, 0); - transform: perspective(1000px) translate3d(50px, 50px, 0); - -webkit-transition-timing-function: cubic-bezier(.45,1.8,.5,.75); - transition-timing-function: cubic-bezier(.45,1.8,.5,.75); - } - 70% { - opacity: 1; - } - 80% { - opacity: 0; - -webkit-transform: perspective(1000px) translate3d(50px, 250px, 300px); - transform: perspective(1000px) translate3d(50px, 250px, 300px); - -webkit-transition-timing-function: cubic-bezier(.45,1.8,.5,.75); - transition-timing-function: cubic-bezier(.45,1.8,.5,.75); - } - 100% { - opacity: 0; - -webkit-transform: perspective(1000px) translate3d(50px, 250px, 300px); - transform: perspective(1000px) translate3d(50px, 250px, 300px); - -webkit-transition-timing-function: cubic-bezier(.45,1.8,.5,.75); - transition-timing-function: cubic-bezier(.45,1.8,.5,.75); - } -} - -@-webkit-keyframes slideInBottom { - 0% { - opacity: 0; - -webkit-transform: perspective(1000px) translate3d(100px, 100px, 500px); - transform: perspective(1000px) translate3d(100px, 100px, 500px); - } - 50% { - opacity: 0; - -webkit-transform: perspective(1000px) translate3d(100px, 100px, 500px); - transform: perspective(1000px) translate3d(100px, 100px, 500px); - } - 75% { - opacity: 1; - -webkit-transform: perspective(1000px) translate3d(100px, 100px, 0); - transform: perspective(1000px) translate3d(100px, 100px, 0); - -webkit-transition-timing-function: cubic-bezier(.45,1.8,.5,.75); - transition-timing-function: cubic-bezier(.45,1.8,.5,.75); - } - 100% { - -webkit-transform: perspective(1000px) translate3d(0, 0, 0); - transform: perspective(1000px) translate3d(0, 0, 0); - -webkit-transition-timing-function: cubic-bezier(.45,1.8,.5,.75); - transition-timing-function: cubic-bezier(.45,1.8,.5,.75); - } -} - -@keyframes slideInBottom { - 0% { - opacity: 0; - -webkit-transform: perspective(1000px) translate3d(100px, 100px, 500px); - transform: perspective(1000px) translate3d(100px, 100px, 500px); - } - 50% { - opacity: 0; - -webkit-transform: perspective(1000px) translate3d(100px, 100px, 500px); - transform: perspective(1000px) translate3d(100px, 100px, 500px); - } - 75% { - opacity: 1; - -webkit-transform: perspective(1000px) translate3d(100px, 100px, 0); - transform: perspective(1000px) translate3d(100px, 100px, 0); - -webkit-transition-timing-function: cubic-bezier(.45,1.8,.5,.75); - transition-timing-function: cubic-bezier(.45,1.8,.5,.75); - } - 100% { - -webkit-transform: perspective(1000px) translate3d(0, 0, 0); - transform: perspective(1000px) translate3d(0, 0, 0); - -webkit-transition-timing-function: cubic-bezier(.45,1.8,.5,.75); - transition-timing-function: cubic-bezier(.45,1.8,.5,.75); - } -} -@-webkit-keyframes slideInTop { - 0% { - opacity: 0; - -webkit-transform: perspective(1000px) translate3d(-100px, -100px, -400px); - transform: perspective(1000px) translate3d(-100px, -100px, -400px); - } - 50% { - opacity: 0; - -webkit-transform: perspective(1000px) translate3d(-100px, -100px, -400px); - transform: perspective(1000px) translate3d(-100px, -100px, -400px); - } - 75% { - opacity: 1; - -webkit-transform: perspective(1000px) translate3d(50px, 50px, 0); - transform: perspective(1000px) translate3d(50px, 50px, 0); - -webkit-transition-timing-function: cubic-bezier(.45,1.8,.5,.75); - transition-timing-function: cubic-bezier(.45,1.8,.5,.75); - } - 100% { - -webkit-transform: perspective(1000px) translate3d(0, 0, 0); - transform: perspective(1000px) translate3d(0, 0, 0); - -webkit-transition-timing-function: cubic-bezier(.45,1.8,.5,.75); - transition-timing-function: cubic-bezier(.45,1.8,.5,.75); - } -} -@keyframes slideInTop { - 0% { - opacity: 0; - -webkit-transform: perspective(1000px) translate3d(-100px, -100px, -400px); - transform: perspective(1000px) translate3d(-100px, -100px, -400px); - } - 50% { - opacity: 0; - -webkit-transform: perspective(1000px) translate3d(-100px, -100px, -400px); - transform: perspective(1000px) translate3d(-100px, -100px, -400px); - } - 75% { - opacity: 1; - -webkit-transform: perspective(1000px) translate3d(50px, 50px, 0); - transform: perspective(1000px) translate3d(50px, 50px, 0); - -webkit-transition-timing-function: cubic-bezier(.45,1.8,.5,.75); - transition-timing-function: cubic-bezier(.45,1.8,.5,.75); - } - 100% { - -webkit-transform: perspective(1000px) translate3d(0, 0, 0); - transform: perspective(1000px) translate3d(0, 0, 0); - -webkit-transition-timing-function: cubic-bezier(.45,1.8,.5,.75); - transition-timing-function: cubic-bezier(.45,1.8,.5,.75); - } -} - - - -#hrz-container { - -webkit-transform-origin: 20% 20%; - -ms-transform-origin: 20% 20%; - transform-origin: 20% 20%; - background-image: -webkit-gradient(linear, left top, left bottom, from(#565961), to(#000000)); - background-image: -webkit-linear-gradient(top, #565961 0%, #000000 100%); - background-image: linear-gradient(to bottom, #565961 0%, #000000 100%); -} - -.hrz-page { - background-color: #fff; - outline: 10px solid #3f3f3f; - overflow: hidden; - -webkit-transform-origin: 20% 20%; - -ms-transform-origin: 20% 20%; - transform-origin: 20% 20%; - -webkit-transform-style: preserve-3d; - transform-style: preserve-3d; -} - -.hrz-page.hrz-back { - -webkit-animation: slideOutTop 1s; - animation: slideOutTop 1s; - -webkit-animation-fill-mode: forwards; - animation-fill-mode: forwards; -} -.hrz-page.hrz-fore { - -webkit-animation: slideOutBottom 1s; - animation: slideOutBottom 1s; - -webkit-animation-fill-mode: forwards; - animation-fill-mode: forwards; -} -.hrz-page.hrz-focus-from-fore { - -webkit-animation: slideInBottom 1s; - animation: slideInBottom 1s; - -webkit-animation-fill-mode: forwards; - animation-fill-mode: forwards; -} -.hrz-page.hrz-focus-from-back { - -webkit-animation: slideInTop 1s; - animation: slideInTop 1s; - -webkit-animation-fill-mode: forwards; - animation-fill-mode: forwards; -} diff --git a/demo/themes/spectrum-slides.css b/demo/themes/spectrum-slides.css new file mode 100644 index 0000000..486fca1 --- /dev/null +++ b/demo/themes/spectrum-slides.css @@ -0,0 +1,169 @@ +#hrz-container { + -webkit-perspective: 1000px; + perspective: 1000px; + background: -webkit-radial-gradient(center, ellipse, #111111 79%, #333 100%); + background: radial-gradient(ellipse at center, #111111 79%,#333 100%); +} + +.hrz-page { + background-color: #fff; + overflow: hidden; + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; +} + +.hrz-page.hrz-back { + -webkit-animation: tiltBack 1s both ease; + animation: tiltBack 1s both ease; + -webkit-transform-origin: center top; + -ms-transform-origin: center top; + transform-origin: center top; +} + +.hrz-page.hrz-focus-from-fore { + -webkit-animation: slideUp 1s both; + animation: slideUp 1s both; +} + +.hrz-page.hrz-focus-from-fore > .hrz-element { + -webkit-animation: slideDownContents 1s both; + animation: slideDownContents 1s both; +} + +.hrz-page.hrz-fore { + -webkit-animation: slideDown 0.8s both; + animation: slideDown 0.8s both; +} + +.hrz-page.hrz-fore > .hrz-element { + -webkit-animation: slideUpContents 1s both; + animation: slideUpContents 1s both; +} +.hrz-page.hrz-focus-from-back { + -webkit-animation: tiltForward 1s both ease; + animation: tiltForward 1s both ease; + -webkit-transform-origin: center top; + -ms-transform-origin: center top; + transform-origin: center top; +} + +@-webkit-keyframes tiltBack { + 0% { } + 100% { + -webkit-transform: rotateX(-15deg) translateZ(-100px); + transform: rotateX(-15deg) translateZ(-100px); + opacity: 0.7; + } +} + +@keyframes tiltBack { + 0% { } + 100% { + -webkit-transform: rotateX(-15deg) translateZ(-100px); + transform: rotateX(-15deg) translateZ(-100px); + opacity: 0.7; + } +} + +@-webkit-keyframes tiltForward { + 0% { + -webkit-transform: rotateX(-15deg) translateZ(-100px); + transform: rotateX(-15deg) translateZ(-100px); + opacity: 0.7; + } + 100% { } +} + +@keyframes tiltForward { + 0% { + -webkit-transform: rotateX(-15deg) translateZ(-100px); + transform: rotateX(-15deg) translateZ(-100px); + opacity: 0.7; + } + 100% { } +} + +@-webkit-keyframes slideUp { + 0% { + -webkit-transform: translateY(1000px); + transform: translateY(1000px); + } + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } +} + +@keyframes slideUp { + 0% { + -webkit-transform: translateY(1000px); + transform: translateY(1000px); + } + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } +} +@-webkit-keyframes slideDown { + 0% { + -webkit-transform: translateY(0); + transform: translateY(0); + } + 100% { + -webkit-transform: translateY(1000px); + transform: translateY(1000px); + } +} +@keyframes slideDown { + 0% { + -webkit-transform: translateY(0); + transform: translateY(0); + } + 100% { + -webkit-transform: translateY(1000px); + transform: translateY(1000px); + } +} + +@-webkit-keyframes slideDownContents { + 0% { + -webkit-transform: translateY(-800px); + transform: translateY(-800px); + } + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } +} + +@keyframes slideDownContents { + 0% { + -webkit-transform: translateY(-800px); + transform: translateY(-800px); + } + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } +} +@-webkit-keyframes slideUpContents { + 0% { + -webkit-transform: translateY(0); + transform: translateY(0); + } + 100% { + -webkit-transform: translateY(-800px); + transform: translateY(-800px); + } +} +@keyframes slideUpContents { + 0% { + -webkit-transform: translateY(0); + transform: translateY(0); + } + 100% { + -webkit-transform: translateY(-800px); + transform: translateY(-800px); + } +} + diff --git a/demo/themes/star-wars.css b/demo/themes/star-wars.css index f199947..d30dd6a 100644 --- a/demo/themes/star-wars.css +++ b/demo/themes/star-wars.css @@ -1,49 +1,182 @@ #hrz-container { -webkit-perspective: 800px; perspective: 800px; - background-image: -webkit-gradient(linear, left top, left bottom, from(#1d1e25), to(#000000)); - background-image: -webkit-linear-gradient(top, #1d1e25 0%, #000000 100%); - background-image: linear-gradient(to bottom, #1d1e25 0%, #000000 100%); + background-color: #111; +} +#hrz-container:before { + overflow: hidden; + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: + radial-gradient(2px 2px at 20px 30px, #eee, rgba(0,0,0,0)), radial-gradient(1px 1px at 214px 130px, #eee, rgba(0,0,0,0)), radial-gradient(2px 2px at 488px 42px, #eee, rgba(0,0,0,0)), radial-gradient(2px 2px at 600px 84px, #eee, rgba(0,0,0,0)), radial-gradient(2px 2px at 846px 123px, #eee, rgba(0,0,0,0)), radial-gradient(2px 2px at 1083px 185px, #eee, rgba(0,0,0,0)), radial-gradient(2px 2px at 1226px 145px, #eee, rgba(0,0,0,0)), radial-gradient(1px 1px at 1494px 115px, #eee, rgba(0,0,0,0)), radial-gradient(2px 2px at 1674px 76px, #eee, rgba(0,0,0,0)), radial-gradient(2px 2px at 1822px 59px, #eee, rgba(0,0,0,0)), radial-gradient(2px 2px at 2072px 33px, #eee, rgba(0,0,0,0)), radial-gradient(2px 2px at 120px 230px, #eee, rgba(0,0,0,0)), radial-gradient(2px 2px at 290px 160px, #eee, rgba(0,0,0,0)), radial-gradient(2px 2px at 455px 220px, #eee, rgba(0,0,0,0)), radial-gradient(2px 2px at 760px 259px, #eee, rgba(0,0,0,0)), radial-gradient(2px 2px at 899px 240px, #eee, rgba(0,0,0,0)), radial-gradient(1px 1px at 1080px 290px, #eee, rgba(0,0,0,0)), radial-gradient(2px 2px at 1280px 188px, #eee, rgba(0,0,0,0)), radial-gradient(2px 2px at 1414px 200px, #eee, rgba(0,0,0,0)), radial-gradient(2px 2px at 1750px 145px, #eee, rgba(0,0,0,0)), radial-gradient(1px 1px at 1850px 219px, #eee, rgba(0,0,0,0)), radial-gradient(2px 2px at 2020px 223px, #eee, rgba(0,0,0,0)), radial-gradient(2px 2px at 60px 455px, #eee, rgba(0,0,0,0)), radial-gradient(1px 1px at 320px 423px, #eee, rgba(0,0,0,0)), radial-gradient(2px 2px at 490px 487px, #eee, rgba(0,0,0,0)), radial-gradient(2px 2px at 600px 524px, #eee, rgba(0,0,0,0)), radial-gradient(2px 2px at 800px 455px, #eee, rgba(0,0,0,0)), radial-gradient(1px 1px at 1110px 512px, #eee, rgba(0,0,0,0)), radial-gradient(2px 2px at 1278px 498px, #eee, rgba(0,0,0,0)), radial-gradient(2px 2px at 1465px 534px, #eee, rgba(0,0,0,0)), radial-gradient(2px 2px at 1600px 465px, #eee, rgba(0,0,0,0)), radial-gradient(2px 2px at 1800px 423px, #eee, rgba(0,0,0,0)), radial-gradient(2px 2px at 2050px 511px, #eee, rgba(0,0,0,0)), radial-gradient(1px 1px at 50px 643px, #eee, rgba(0,0,0,0)), radial-gradient(2px 2px at 225px 753px, #eee, rgba(0,0,0,0)), radial-gradient(2px 2px at 476px 620px, #eee, rgba(0,0,0,0)), radial-gradient(2px 2px at 633px 776px, #eee, rgba(0,0,0,0)), radial-gradient(1px 1px at 895px 766px, #eee, rgba(0,0,0,0)), radial-gradient(2px 2px at 1022px 738px, #eee, rgba(0,0,0,0)), radial-gradient(2px 2px at 1209px 683px, #eee, rgba(0,0,0,0)), radial-gradient(2px 2px at 1457px 636px, #eee, rgba(0,0,0,0)), radial-gradient(1px 1px at 1681px 774px, #eee, rgba(0,0,0,0)), radial-gradient(2px 2px at 1823px 626px, #eee, rgba(0,0,0,0)), radial-gradient(2px 2px at 2053px 799px, #eee, rgba(0,0,0,0)), radial-gradient(2px 2px at 99px 830px, #eee, rgba(0,0,0,0)), radial-gradient(2px 2px at 220px 978px, #eee, rgba(0,0,0,0)), radial-gradient(2px 2px at 453px 935px, #eee, rgba(0,0,0,0)), radial-gradient(2px 2px at 625px 897px, #eee, rgba(0,0,0,0)), radial-gradient(2px 2px at 822px 832px, #eee, rgba(0,0,0,0)), radial-gradient(2px 2px at 1099px 930px, #eee, rgba(0,0,0,0)), radial-gradient(1px 1px at 1225px 830px, #eee, rgba(0,0,0,0)), radial-gradient(2px 2px at 1475px 930px, #eee, rgba(0,0,0,0)), radial-gradient(2px 2px at 1650px 830px, #eee, rgba(0,0,0,0)), radial-gradient(1px 1px at 1860px 930px, #eee, rgba(0,0,0,0)), radial-gradient(2px 2px at 2010px 830px, #eee, rgba(0,0,0,0)); + background: + -webkit-radial-gradient(20px 30px, 2px 2px, #eee, rgba(0,0,0,0)), -webkit-radial-gradient(214px 130px, 1px 1px, #eee, rgba(0,0,0,0)), -webkit-radial-gradient(488px 42px, 2px 2px, #eee, rgba(0,0,0,0)), -webkit-radial-gradient(600px 84px, 2px 2px, #eee, rgba(0,0,0,0)), -webkit-radial-gradient(846px 123px, 2px 2px, #eee, rgba(0,0,0,0)), -webkit-radial-gradient(1083px 185px, 2px 2px, #eee, rgba(0,0,0,0)), -webkit-radial-gradient(1226px 145px, 2px 2px, #eee, rgba(0,0,0,0)), -webkit-radial-gradient(1494px 115px, 1px 1px, #eee, rgba(0,0,0,0)), -webkit-radial-gradient(1674px 76px, 2px 2px, #eee, rgba(0,0,0,0)), -webkit-radial-gradient(1822px 59px, 2px 2px, #eee, rgba(0,0,0,0)), -webkit-radial-gradient(2072px 33px, 2px 2px, #eee, rgba(0,0,0,0)), -webkit-radial-gradient(120px 230px, 2px 2px, #eee, rgba(0,0,0,0)), -webkit-radial-gradient(290px 160px, 2px 2px, #eee, rgba(0,0,0,0)), -webkit-radial-gradient(455px 220px, 2px 2px, #eee, rgba(0,0,0,0)), -webkit-radial-gradient(760px 259px, 2px 2px, #eee, rgba(0,0,0,0)), -webkit-radial-gradient(899px 240px, 2px 2px, #eee, rgba(0,0,0,0)), -webkit-radial-gradient(1080px 290px, 1px 1px, #eee, rgba(0,0,0,0)), -webkit-radial-gradient(1280px 188px, 2px 2px, #eee, rgba(0,0,0,0)), -webkit-radial-gradient(1414px 200px, 2px 2px, #eee, rgba(0,0,0,0)), -webkit-radial-gradient(1750px 145px, 2px 2px, #eee, rgba(0,0,0,0)), -webkit-radial-gradient(1850px 219px, 1px 1px, #eee, rgba(0,0,0,0)), -webkit-radial-gradient(2020px 223px, 2px 2px, #eee, rgba(0,0,0,0)), -webkit-radial-gradient(60px 455px, 2px 2px, #eee, rgba(0,0,0,0)), -webkit-radial-gradient(320px 423px, 1px 1px, #eee, rgba(0,0,0,0)), -webkit-radial-gradient(490px 487px, 2px 2px, #eee, rgba(0,0,0,0)), -webkit-radial-gradient(600px 524px, 2px 2px, #eee, rgba(0,0,0,0)), -webkit-radial-gradient(800px 455px, 2px 2px, #eee, rgba(0,0,0,0)), -webkit-radial-gradient(1110px 512px, 1px 1px, #eee, rgba(0,0,0,0)), -webkit-radial-gradient(1278px 498px, 2px 2px, #eee, rgba(0,0,0,0)), -webkit-radial-gradient(1465px 534px, 2px 2px, #eee, rgba(0,0,0,0)), -webkit-radial-gradient(1600px 465px, 2px 2px, #eee, rgba(0,0,0,0)), -webkit-radial-gradient(1800px 423px, 2px 2px, #eee, rgba(0,0,0,0)), -webkit-radial-gradient(2050px 511px, 2px 2px, #eee, rgba(0,0,0,0)), -webkit-radial-gradient(50px 643px, 1px 1px, #eee, rgba(0,0,0,0)), -webkit-radial-gradient(225px 753px, 2px 2px, #eee, rgba(0,0,0,0)), -webkit-radial-gradient(476px 620px, 2px 2px, #eee, rgba(0,0,0,0)), -webkit-radial-gradient(633px 776px, 2px 2px, #eee, rgba(0,0,0,0)), -webkit-radial-gradient(895px 766px, 1px 1px, #eee, rgba(0,0,0,0)), -webkit-radial-gradient(1022px 738px, 2px 2px, #eee, rgba(0,0,0,0)), -webkit-radial-gradient(1209px 683px, 2px 2px, #eee, rgba(0,0,0,0)), -webkit-radial-gradient(1457px 636px, 2px 2px, #eee, rgba(0,0,0,0)), -webkit-radial-gradient(1681px 774px, 1px 1px, #eee, rgba(0,0,0,0)), -webkit-radial-gradient(1823px 626px, 2px 2px, #eee, rgba(0,0,0,0)), -webkit-radial-gradient(2053px 799px, 2px 2px, #eee, rgba(0,0,0,0)), -webkit-radial-gradient(99px 830px, 2px 2px, #eee, rgba(0,0,0,0)), -webkit-radial-gradient(220px 978px, 2px 2px, #eee, rgba(0,0,0,0)), -webkit-radial-gradient(453px 935px, 2px 2px, #eee, rgba(0,0,0,0)), -webkit-radial-gradient(625px 897px, 2px 2px, #eee, rgba(0,0,0,0)), -webkit-radial-gradient(822px 832px, 2px 2px, #eee, rgba(0,0,0,0)), -webkit-radial-gradient(1099px 930px, 2px 2px, #eee, rgba(0,0,0,0)), -webkit-radial-gradient(1225px 830px, 1px 1px, #eee, rgba(0,0,0,0)), -webkit-radial-gradient(1475px 930px, 2px 2px, #eee, rgba(0,0,0,0)), -webkit-radial-gradient(1650px 830px, 2px 2px, #eee, rgba(0,0,0,0)), -webkit-radial-gradient(1860px 930px, 1px 1px, #eee, rgba(0,0,0,0)), -webkit-radial-gradient(2010px 830px, 2px 2px, #eee, rgba(0,0,0,0)); + background: + radial-gradient(2px 2px at 20px 30px, #eee, rgba(0,0,0,0)), + radial-gradient(1px 1px at 214px 130px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 488px 42px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 600px 84px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 846px 123px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 1083px 185px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 1226px 145px, #eee, rgba(0,0,0,0)), + radial-gradient(1px 1px at 1494px 115px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 1674px 76px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 1822px 59px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 2072px 33px, #eee, rgba(0,0,0,0)), + + radial-gradient(2px 2px at 120px 230px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 290px 160px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 455px 220px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 760px 259px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 899px 240px, #eee, rgba(0,0,0,0)), + radial-gradient(1px 1px at 1080px 290px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 1280px 188px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 1414px 200px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 1750px 145px, #eee, rgba(0,0,0,0)), + radial-gradient(1px 1px at 1850px 219px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 2020px 223px, #eee, rgba(0,0,0,0)), + + radial-gradient(2px 2px at 60px 455px, #eee, rgba(0,0,0,0)), + radial-gradient(1px 1px at 320px 423px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 490px 487px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 600px 524px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 800px 455px, #eee, rgba(0,0,0,0)), + radial-gradient(1px 1px at 1110px 512px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 1278px 498px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 1465px 534px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 1600px 465px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 1800px 423px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 2050px 511px, #eee, rgba(0,0,0,0)), + + radial-gradient(1px 1px at 50px 643px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 225px 753px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 476px 620px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 633px 776px, #eee, rgba(0,0,0,0)), + radial-gradient(1px 1px at 895px 766px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 1022px 738px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 1209px 683px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 1457px 636px, #eee, rgba(0,0,0,0)), + radial-gradient(1px 1px at 1681px 774px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 1823px 626px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 2053px 799px, #eee, rgba(0,0,0,0)), + + radial-gradient(2px 2px at 99px 830px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 220px 978px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 453px 935px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 625px 897px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 822px 832px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 1099px 930px, #eee, rgba(0,0,0,0)), + radial-gradient(1px 1px at 1225px 830px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 1475px 930px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 1650px 830px, #eee, rgba(0,0,0,0)), + radial-gradient(1px 1px at 1860px 930px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 2010px 830px, #eee, rgba(0,0,0,0)); + + -webkit-animation: spin 700s infinite; + + animation: spin 700s infinite; + content: ' '; + opacity: 0.7; +} + +@-webkit-keyframes spin { + 0% { + -webkit-transform: scale(1) rotateZ(0deg); + transform: scale(1) rotateZ(0deg); + -webkit-transition-timing-function: linear; + transition-timing-function: linear; + } + 50% { + -webkit-transform: scale(1.4) rotateZ(180deg); + transform: scale(1.4) rotateZ(180deg); + -webkit-transition-timing-function: linear; + transition-timing-function: linear; + } + 100% { + -webkit-transform: scale(1) rotateZ(360deg); + transform: scale(1) rotateZ(360deg); + -webkit-transition-timing-function: linear; + transition-timing-function: linear; + } +} + +@keyframes spin { + 0% { + -webkit-transform: scale(1) rotateZ(0deg); + transform: scale(1) rotateZ(0deg); + -webkit-transition-timing-function: linear; + transition-timing-function: linear; + } + 50% { + -webkit-transform: scale(1.4) rotateZ(180deg); + transform: scale(1.4) rotateZ(180deg); + -webkit-transition-timing-function: linear; + transition-timing-function: linear; + } + 100% { + -webkit-transform: scale(1) rotateZ(360deg); + transform: scale(1) rotateZ(360deg); + -webkit-transition-timing-function: linear; + transition-timing-function: linear; + } +} + +/* + Star field code borrowed from Keith Clark http://codepen.io/keithclark/pen/zqcEd + */ +.starfield { + } .hrz-page { opacity: 1; - -webkit-transform: rotateX(35deg); - transform: rotateX(35deg); - -webkit-transition: -webkit-transform 2s linear, opacity 0.3s 1.5s; - transition: transform 2s linear, opacity 0.3s 1.5s; + -webkit-transform: rotateX(60deg); + transform: rotateX(60deg); + -webkit-transition: -webkit-transform 2s linear, opacity 1s linear; + transition: transform 2s linear, opacity 1s linear; overflow: hidden; } -.hrz-page.hrz-back { - -webkit-transform: rotateX(35deg) translateY(-1000px); - transform: rotateX(35deg) translateY(-1000px); - opacity: 0; +.hrz-page:nth-child(1) { + -webkit-transform: rotateX(0deg); + transform: rotateX(0deg); + opacity: 1; } -.hrz-page.hrz-fore { - -webkit-transform: rotateX(35deg) translateY(1000px); - transform: rotateX(35deg) translateY(1000px); - opacity: 0; + +.hrz-page.hrz-hidden { + left: -5000px; } -.hrz-page.hrz-focus-from-back, .hrz-page.hrz-focus-from-fore { - -webkit-transition: -webkit-transform 2s linear, opacity 0.3s; - transition: transform 2s linear, opacity 0.3s; +.hrz-page.hrz-fore { + -webkit-transform: rotateX(60deg) translateY(800px); + transform: rotateX(60deg) translateY(800px); } .hrz-element { color: yellow !important; } +.hrz-page img { + background-color: yellow !important; +} + +.hrz-element code { + color: yellow !important; + background-color: transparent; + border: 1px solid yellow; +} + /* custom styling of known page elements */ .hrz-element.splash h1 { background: transparent; border-radius: 6px; - border: 2px solid yellow; - color: #222; + color: #111; text-shadow: - -1px -1px 0 yellow, + -1px -1px 0 yellow, 1px -1px 0 yellow, -1px 1px 0 yellow, - 1px 1px 0 yellow; + 1px 1px 0 yellow; } diff --git a/demo/themes/themes.js b/demo/themes/themes.js index 14bcd84..211a8a8 100644 --- a/demo/themes/themes.js +++ b/demo/themes/themes.js @@ -110,15 +110,53 @@ themes["Basic JavaScript Animations"] = { }; var themes = themes || {}; -themes["Slide Show"] = { +themes["Spectrum Slides"] = { options: { - customCssFile: 'themes/slideshow.css', + customCssFile: 'themes/spectrum-slides.css', pageMargin: 40, stagger: 'random', staggerDelay: 0, selector: 'p,img,h1,h2,h3, h4, .h, .thumbnail, em, li', rootElement: '#root', - pageHideDelay: 3 + onPageTransition: function(type, page) { + + if (type === 'toFocusFromFore' || type === 'toFocusFromBack') { + if (page.pageNumber !== 1) { + var h = 245 - (page.pageNumber * 25); + var hslColour = 'hsla(' + h + ', 100%, 75%, 1)'; + page.domNode.style.backgroundColor = hslColour; + } + } + + } + } +}; +var themes = themes || {}; + +themes["Book Pages"] = { + options: { + customCssFile: 'themes/book-pages.css', + pageMargin: 40, + staggerDelay: 0, + pageHideDelay: 0.7, + selector: 'p,img,h1,h2,h3, h4, .h, .thumbnail, em, ul, ol, pre', + rootElement: '#root', + onPageTransition: function(type, page) { + var $shadowOverlay = $(page.domNode).find('.shadow-overlay'); + window.clearTimeout(page.timer); + + if ($shadowOverlay.length === 0) { + $(page.domNode).append('
'); + $shadowOverlay = $(page.domNode).find('.shadow-overlay'); + } + + if (type === 'toBackground' || type === 'toFocusFromBack') { + $shadowOverlay.fadeIn(150); + page.timer = window.setTimeout(function() { + $shadowOverlay.fadeOut(300); + }, 500); + } + } } }; var themes = themes || {}; @@ -130,7 +168,46 @@ themes["Star Wars"] = { staggerDelay: 0, selector: 'p,img,h1,h2,h3, h4, .h, .thumbnail, em, li', rootElement: '#root', - pageHideDelay: 3 + pageMargin: 50, + onPageTransition: function(type, page) { + if ($('.starfield').length === 0) { + $('#hrz-container').prepend('
'); + } + + var pageHeight = $(window).height() - 100; + + if (type === 'toFocusFromFore' || type === 'toFocusFromBack') { + var currentPage = page.pageNumber; + + $('.hrz-page').each(function(index) { + var offset = (index + 1) - currentPage; + + if (index === 0) { + if (currentPage === 1) { + this.style.transform = 'rotateX(0deg) translateZ(0px)'; + this.style.opacity = '1'; + } else { + this.style.transform = 'rotateX(0deg) translateZ(-1000px)'; + this.style.opacity = '0'; + } + } else { + this.style.transform = 'rotateX(60deg) translateY(' + parseInt(offset * pageHeight + 100) + 'px)'; + if (offset < -2) { + this.style.opacity = '0'; + } else { + this.style.opacity = '1'; + } + } + + if (index === currentPage + 1) { + this.style.left = '0px'; + } else { + this.style.left = 'inherit'; + } + + }); + } + } } }; var themes = themes || {}; @@ -149,22 +226,43 @@ themes["Parallax Effect"] = { window.setTimeout(function() { page.domNode.classList.remove('hidden'); }); + + // scroll the background by adding a class to th container + $('#hrz-container').removeClass(function() { + var classList = ''; + var totalPages = $('.hrz-page').length; + for (var i = 1; i <= totalPages; i++) { + classList += 'p' + i + ' '; + } + return classList; + }).addClass('p' + page.pageNumber); + + if (5 < page.pageNumber) { + $('#hrz-container').addClass('max-top'); + } else { + $('#hrz-container').removeClass('max-top'); + } } }, onNodeTransition: function(type, node, animator) { - var originalTop, z; + var originalTop, z, zIndex, pageHeight; + pageHeight = $(window).height(); if (type == 'toBackground') { z = getRandomZ(); + zIndex = Math.round(z); node.domNode.style.transform = 'translate3d(0, 0, ' + z + 'px)'; - node.domNode.style.top = (parseInt(node.domNode.style.top) - 1500) + 'px'; + node.domNode.style.zIndex = zIndex; + node.domNode.style.top = (parseInt(node.domNode.style.top) - pageHeight * 2) + 'px'; } else if (type == 'toForeground') { z = getRandomZ(); + zIndex = Math.round(z); node.domNode.style.transform = 'translate3d(0, 0, ' + z + 'px)'; - node.domNode.style.top = (parseInt(node.domNode.style.top) + 1500) + 'px'; + node.domNode.style.zIndex = zIndex; + node.domNode.style.top = (parseInt(node.domNode.style.top) + pageHeight * 2) + 'px'; } else if (type == 'toFocusFromFore') { @@ -181,17 +279,19 @@ themes["Parallax Effect"] = { node.restore(); if (from === 'back') { - startingTop = (parseInt(node.domNode.style.top) - 700) + 'px'; + startingTop = (parseInt(node.domNode.style.top) - pageHeight) + 'px'; } else { - startingTop = (parseInt(node.domNode.style.top) + 700) + 'px'; + startingTop = (parseInt(node.domNode.style.top) + pageHeight) + 'px'; } z = getRandomZ(); + zIndex = Math.round(z); originalTop = node.domNode.style.top; node.domNode.style.top = startingTop; node.domNode.style.opacity = '0'; window.setTimeout(function() { node.domNode.style.transform = 'translate3d(0, 0, ' + z + 'px)'; + node.domNode.style.zIndex = zIndex; }, 1); window.setTimeout(function() { node.domNode.classList.add('transition'); @@ -215,34 +315,6 @@ themes["Parallax Effect"] = { }; var themes = themes || {}; -themes["Book Pages"] = { - options: { - customCssFile: 'themes/book-pages.css', - pageMargin: 40, - staggerDelay: 0, - pageHideDelay: 0.8, - selector: 'p,img,h1,h2,h3, h4, .h, .thumbnail, em, ul, ol, pre', - rootElement: '#root', - onPageTransition: function(type, page) { - var $shadowOverlay = $(page.domNode).find('.shadow-overlay'); - window.clearTimeout(page.timer); - - if ($shadowOverlay.length === 0) { - $(page.domNode).append('
'); - $shadowOverlay = $(page.domNode).find('.shadow-overlay'); - } - - if (type === 'toBackground' || type === 'toFocusFromBack') { - $shadowOverlay.fadeIn(150); - page.timer = window.setTimeout(function() { - $shadowOverlay.fadeOut(300); - }, 500); - } - } - } -}; -var themes = themes || {}; - themes["Hacker Console"] = { options: { customCssFile: 'themes/hacker-console.css', @@ -256,6 +328,7 @@ themes["Hacker Console"] = { if (type === 'toFocusFromFore' || type === 'toFocusFromBack') { page.domNode.style.opacity = 0; + // make images green if (isIE()) { $(page.domNode).find('img').replaceWith(svgReplace); $(page.domNode).find('svg').hide(); @@ -272,10 +345,24 @@ themes["Hacker Console"] = { $(el).fadeIn(100); }, delay); }); + + // add caret to all textual element while they are typing + $('.caret').remove(); + $(page.domNode).find('p, h1, h2, h3, h4, li').each(function() { + var fontSize = $(this).css('font-size'); + $(this).append(''); + }); + // after all typing completed, remove carets from all but last textual element + window.setTimeout(function() { + $('.caret').slice(0, -1).remove(); + }, 1000); } /** * Internet Explorer can only apply SVG filters to an image if it is embedded within an SVG element. + * + * Concept and aspects of code borrowed from Karl Horky https://github.com/karlhorky/gray + * * @returns {*|jQuery|HTMLElement} */ function svgReplace() { diff --git a/src/demo-themes/book-pages/book-pages.js b/src/demo-themes/book-pages/book-pages.js index 34a0044..3773492 100644 --- a/src/demo-themes/book-pages/book-pages.js +++ b/src/demo-themes/book-pages/book-pages.js @@ -5,7 +5,7 @@ themes["Book Pages"] = { customCssFile: 'themes/book-pages.css', pageMargin: 40, staggerDelay: 0, - pageHideDelay: 0.8, + pageHideDelay: 0.7, selector: 'p,img,h1,h2,h3, h4, .h, .thumbnail, em, ul, ol, pre', rootElement: '#root', onPageTransition: function(type, page) { diff --git a/src/demo-themes/book-pages/book-pages.src.css b/src/demo-themes/book-pages/book-pages.src.css index 34be221..e4c37d2 100644 --- a/src/demo-themes/book-pages/book-pages.src.css +++ b/src/demo-themes/book-pages/book-pages.src.css @@ -4,14 +4,16 @@ .hrz-page { transform-origin: left center; - transition: transform 1.2s; + transition: transform 0.8s; transform-style: preserve-3d; background-color: white; + backface-visibility: hidden; } .hrz-page.hrz-back { - transform: rotateY(-180deg); - box-shadow: 60px 0px 150px -3px rgba(50, 50, 50, 0.47); + transform: rotateY(-90deg); + box-shadow: 60px 0 150px -3px rgba(50, 50, 50, 0.47); + backface-visibility: hidden; } .hrz-page.hrz-focus-from-fore { diff --git a/src/demo-themes/hacker-console/hacker-console.js b/src/demo-themes/hacker-console/hacker-console.js index a637cb0..91d1c27 100644 --- a/src/demo-themes/hacker-console/hacker-console.js +++ b/src/demo-themes/hacker-console/hacker-console.js @@ -13,6 +13,7 @@ themes["Hacker Console"] = { if (type === 'toFocusFromFore' || type === 'toFocusFromBack') { page.domNode.style.opacity = 0; + // make images green if (isIE()) { $(page.domNode).find('img').replaceWith(svgReplace); $(page.domNode).find('svg').hide(); @@ -29,10 +30,24 @@ themes["Hacker Console"] = { $(el).fadeIn(100); }, delay); }); + + // add caret to all textual element while they are typing + $('.caret').remove(); + $(page.domNode).find('p, h1, h2, h3, h4, li').each(function() { + var fontSize = $(this).css('font-size'); + $(this).append(''); + }); + // after all typing completed, remove carets from all but last textual element + window.setTimeout(function() { + $('.caret').slice(0, -1).remove(); + }, 1000); } /** * Internet Explorer can only apply SVG filters to an image if it is embedded within an SVG element. + * + * Concept and aspects of code borrowed from Karl Horky https://github.com/karlhorky/gray + * * @returns {*|jQuery|HTMLElement} */ function svgReplace() { diff --git a/src/demo-themes/hacker-console/hacker-console.src.css b/src/demo-themes/hacker-console/hacker-console.src.css index d950965..577c1d3 100644 --- a/src/demo-themes/hacker-console/hacker-console.src.css +++ b/src/demo-themes/hacker-console/hacker-console.src.css @@ -29,7 +29,6 @@ img.hrz-element { transition: none !important; - background-color: transparent; filter: url('themes/hacker-console.svg#green'); } @@ -37,21 +36,53 @@ svg.hrz-element, img.hrz-element { border: 1px solid rgb(13, 186, 13) !important; } +.hrz-page img { + background-color: #fff !important; +} + +.caret { + display: inline-block; + width: 3px; + margin-bottom: -2px; + margin-left: 3px; + height: 16px; + background-color: rgb(13, 186, 13); + animation: blink 1s infinite; + animation-timing-function: steps(2, end); +} + +@keyframes blink { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + /* custom styling of known page elements */ .hrz-element.splash h1 { background: transparent; border: 5px solid rgb(13, 186, 13); + background-color: rgb(11, 54, 11); color: rgb(13, 186, 13); font-size: 15vw; } -.cta { +.hrz-element .cta { padding: 10px; border: 1px solid rgb(13, 186, 13); color: rgb(13, 250, 13); border-radius: 0; } +.hrz-element code { + background-color: #111; + border: 1px solid rgb(13, 186, 13); + color: rgb(13, 186, 13); + border-radius: 0; +} + .hrz-element.thumbnail { background-color: transparent; border-radius: 0; @@ -66,7 +97,7 @@ h2.hrz-element { font-size: 1.4em; } -h2:before { +h2.hrz-element:before { content: '#'; margin-left: -29px; margin-right: 6px; diff --git a/src/demo-themes/parallax-effect/parallax-effect.js b/src/demo-themes/parallax-effect/parallax-effect.js index 382515c..791ca0c 100644 --- a/src/demo-themes/parallax-effect/parallax-effect.js +++ b/src/demo-themes/parallax-effect/parallax-effect.js @@ -14,22 +14,43 @@ themes["Parallax Effect"] = { window.setTimeout(function() { page.domNode.classList.remove('hidden'); }); + + // scroll the background by adding a class to th container + $('#hrz-container').removeClass(function() { + var classList = ''; + var totalPages = $('.hrz-page').length; + for (var i = 1; i <= totalPages; i++) { + classList += 'p' + i + ' '; + } + return classList; + }).addClass('p' + page.pageNumber); + + if (5 < page.pageNumber) { + $('#hrz-container').addClass('max-top'); + } else { + $('#hrz-container').removeClass('max-top'); + } } }, onNodeTransition: function(type, node, animator) { - var originalTop, z; + var originalTop, z, zIndex, pageHeight; + pageHeight = $(window).height(); if (type == 'toBackground') { z = getRandomZ(); + zIndex = Math.round(z); node.domNode.style.transform = 'translate3d(0, 0, ' + z + 'px)'; - node.domNode.style.top = (parseInt(node.domNode.style.top) - 1500) + 'px'; + node.domNode.style.zIndex = zIndex; + node.domNode.style.top = (parseInt(node.domNode.style.top) - pageHeight * 2) + 'px'; } else if (type == 'toForeground') { z = getRandomZ(); + zIndex = Math.round(z); node.domNode.style.transform = 'translate3d(0, 0, ' + z + 'px)'; - node.domNode.style.top = (parseInt(node.domNode.style.top) + 1500) + 'px'; + node.domNode.style.zIndex = zIndex; + node.domNode.style.top = (parseInt(node.domNode.style.top) + pageHeight * 2) + 'px'; } else if (type == 'toFocusFromFore') { @@ -46,17 +67,19 @@ themes["Parallax Effect"] = { node.restore(); if (from === 'back') { - startingTop = (parseInt(node.domNode.style.top) - 700) + 'px'; + startingTop = (parseInt(node.domNode.style.top) - pageHeight) + 'px'; } else { - startingTop = (parseInt(node.domNode.style.top) + 700) + 'px'; + startingTop = (parseInt(node.domNode.style.top) + pageHeight) + 'px'; } z = getRandomZ(); + zIndex = Math.round(z); originalTop = node.domNode.style.top; node.domNode.style.top = startingTop; node.domNode.style.opacity = '0'; window.setTimeout(function() { node.domNode.style.transform = 'translate3d(0, 0, ' + z + 'px)'; + node.domNode.style.zIndex = zIndex; }, 1); window.setTimeout(function() { node.domNode.classList.add('transition'); diff --git a/src/demo-themes/parallax-effect/parallax-effect.src.css b/src/demo-themes/parallax-effect/parallax-effect.src.css index 73500ba..ebe9e0d 100644 --- a/src/demo-themes/parallax-effect/parallax-effect.src.css +++ b/src/demo-themes/parallax-effect/parallax-effect.src.css @@ -1,3 +1,110 @@ +#hrz-container { +} + +/* + The moving blue gradient background + */ +#hrz-container:before { + content: ' '; + z-index: -10; + position: absolute; + overflow: visible; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: linear-gradient(to bottom, #425cbc 0%, #93d5ff 30%, #ffffff 60%, rgba(255, 255, 255, 0) 100%); + transition: transform 1s 0.6s; +} + +#hrz-container.p1:before { + transform: translateY(0px); +} +#hrz-container.p2:before { + transform: translateY(-100px); +} +#hrz-container.p3:before { + transform: translateY(-200px); +} +#hrz-container.p4:before { + transform: translateY(-300px); +} +#hrz-container.p5:before { + transform: translateY(-400px); +} +#hrz-container.p6:before { + transform: translateY(-500px); +} +#hrz-container.max-top:before { + transform: translateY(-500px); +} + +/* + The floating clouds + */ +#hrz-container:after { + content: ' '; + position: absolute; + z-index: -5; + height: 3000px; + width: 4000px; + left: -300px; + background: + radial-gradient(110px 70px at 260px 355px, #e4e8ff 68%, rgba(228, 232, 255,0)), + radial-gradient(120px 90px at 300px 330px, #e4e8ff 68%, rgba(228, 232, 255,0)), + radial-gradient(70px 70px at 390px 350px, #e1e6ff 65%, rgba(228, 232, 255,0)), + + radial-gradient(130px 60px at 660px 865px, #dfecf4 68%, rgba(223, 236, 244,0)), + radial-gradient(120px 90px at 740px 830px, #dfecf4 68%, rgba(223, 236, 244,0)), + radial-gradient(70px 70px at 820px 850px, #dfecf4 65%, rgba(223, 236, 244,0)), + + radial-gradient(130px 60px at 1390px 551px, #e1e6ff 68%, rgba(228, 232, 255,0)), + radial-gradient(120px 90px at 1340px 530px, #dfe4ff 68%, rgba(228, 232, 255,0)), + radial-gradient(90px 70px at 1220px 550px, #e4e8ff 65%, rgba(228, 232, 255,0)); + top: 0; + transition: top 1s 0.6s; + animation: floating-clouds 50s linear infinite; +} +#hrz-container.p1:after { + top: 0; +} +#hrz-container.p2:after { + top: -200px; +} +#hrz-container.p3:after { + top: -400px; +} +#hrz-container.p4:after { + top: -600px; +} +#hrz-container.p5:after { + top: -800px; +} +#hrz-container.p6:after { + top: -1000px; +} +#hrz-container.max-top:after { + top: -1000px; +} + +@keyframes floating-clouds { + 0% { + transform: translateX(0); + opacity: 0; + } + 2% { + opacity: 0.9; + } + 97% { + opacity: 0.9; + } + 100% { + transform: translateX(1000px); + opacity: 0; + } +} + + .hrz-page.hidden { visibility: hidden; } @@ -20,4 +127,8 @@ .hrz-focus-from-fore > .hrz-element.transition, .hrz-focus-from-back > .hrz-element.transition { transition: transform 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.000), top 1s, opacity 0.3s; +} + +.hrz-element.splash h1 { + background: none; } \ No newline at end of file diff --git a/src/demo-themes/slideshow/slideshow.js b/src/demo-themes/slideshow/slideshow.js deleted file mode 100644 index 256f618..0000000 --- a/src/demo-themes/slideshow/slideshow.js +++ /dev/null @@ -1,13 +0,0 @@ -var themes = themes || {}; - -themes["Slide Show"] = { - options: { - customCssFile: 'themes/slideshow.css', - pageMargin: 40, - stagger: 'random', - staggerDelay: 0, - selector: 'p,img,h1,h2,h3, h4, .h, .thumbnail, em, li', - rootElement: '#root', - pageHideDelay: 3 - } -}; \ No newline at end of file diff --git a/src/demo-themes/slideshow/slideshow.src.css b/src/demo-themes/slideshow/slideshow.src.css deleted file mode 100644 index 3a138bd..0000000 --- a/src/demo-themes/slideshow/slideshow.src.css +++ /dev/null @@ -1,121 +0,0 @@ -@keyframes slideOutTop { - 10% { - transform: perspective(1000px) translate3d(-10px, -10px, -100px); - transition-timing-function: cubic-bezier(.45,1.8,.5,.75); - } - 30% { - transform: perspective(1000px) translate3d(50px, 50px, -100px); - transition-timing-function: cubic-bezier(.45,1.8,.5,.75); - } - 50% { - transform: perspective(1000px) translate3d(50px, 50px, -100px); - } - 75% { - opacity: 1; - } - 100% { - opacity: 0; - transform: perspective(1000px) translate3d(-100px, -100px, -400px); - transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); - } -} - -@keyframes slideOutBottom { - 10% { - transform: perspective(1000px) translate3d(-10px, -10px, 0); - transition-timing-function: cubic-bezier(.45,1.8,.5,.75); - } - 30% { - transform: perspective(1000px) translate3d(50px, 50px, 0); - transition-timing-function: cubic-bezier(.45,1.8,.5,.75); - } - 50% { - opacity: 1; - transform: perspective(1000px) translate3d(50px, 50px, 0); - transition-timing-function: cubic-bezier(.45,1.8,.5,.75); - } - 70% { - opacity: 1; - } - 80% { - opacity: 0; - transform: perspective(1000px) translate3d(50px, 250px, 300px); - transition-timing-function: cubic-bezier(.45,1.8,.5,.75); - } - 100% { - opacity: 0; - transform: perspective(1000px) translate3d(50px, 250px, 300px); - transition-timing-function: cubic-bezier(.45,1.8,.5,.75); - } -} - -@keyframes slideInBottom { - 0% { - opacity: 0; - transform: perspective(1000px) translate3d(100px, 100px, 500px); - } - 50% { - opacity: 0; - transform: perspective(1000px) translate3d(100px, 100px, 500px); - } - 75% { - opacity: 1; - transform: perspective(1000px) translate3d(100px, 100px, 0); - transition-timing-function: cubic-bezier(.45,1.8,.5,.75); - } - 100% { - transform: perspective(1000px) translate3d(0, 0, 0); - transition-timing-function: cubic-bezier(.45,1.8,.5,.75); - } -} -@keyframes slideInTop { - 0% { - opacity: 0; - transform: perspective(1000px) translate3d(-100px, -100px, -400px); - } - 50% { - opacity: 0; - transform: perspective(1000px) translate3d(-100px, -100px, -400px); - } - 75% { - opacity: 1; - transform: perspective(1000px) translate3d(50px, 50px, 0); - transition-timing-function: cubic-bezier(.45,1.8,.5,.75); - } - 100% { - transform: perspective(1000px) translate3d(0, 0, 0); - transition-timing-function: cubic-bezier(.45,1.8,.5,.75); - } -} - - - -#hrz-container { - transform-origin: 20% 20%; - background-image: linear-gradient(to bottom, #565961 0%, #000000 100%); -} - -.hrz-page { - background-color: #fff; - outline: 10px solid #3f3f3f; - overflow: hidden; - transform-origin: 20% 20%; - transform-style: preserve-3d; -} - -.hrz-page.hrz-back { - animation: slideOutTop 1s; - animation-fill-mode: forwards; -} -.hrz-page.hrz-fore { - animation: slideOutBottom 1s; - animation-fill-mode: forwards; -} -.hrz-page.hrz-focus-from-fore { - animation: slideInBottom 1s; - animation-fill-mode: forwards; -} -.hrz-page.hrz-focus-from-back { - animation: slideInTop 1s; - animation-fill-mode: forwards; -} diff --git a/src/demo-themes/spectrum-slides/spectrum-slides.js b/src/demo-themes/spectrum-slides/spectrum-slides.js new file mode 100644 index 0000000..21aabed --- /dev/null +++ b/src/demo-themes/spectrum-slides/spectrum-slides.js @@ -0,0 +1,23 @@ +var themes = themes || {}; + +themes["Spectrum Slides"] = { + options: { + customCssFile: 'themes/spectrum-slides.css', + pageMargin: 40, + stagger: 'random', + staggerDelay: 0, + selector: 'p,img,h1,h2,h3, h4, .h, .thumbnail, em, li', + rootElement: '#root', + onPageTransition: function(type, page) { + + if (type === 'toFocusFromFore' || type === 'toFocusFromBack') { + if (page.pageNumber !== 1) { + var h = 245 - (page.pageNumber * 25); + var hslColour = 'hsla(' + h + ', 100%, 75%, 1)'; + page.domNode.style.backgroundColor = hslColour; + } + } + + } + } +}; \ No newline at end of file diff --git a/src/demo-themes/spectrum-slides/spectrum-slides.src.css b/src/demo-themes/spectrum-slides/spectrum-slides.src.css new file mode 100644 index 0000000..7410c0b --- /dev/null +++ b/src/demo-themes/spectrum-slides/spectrum-slides.src.css @@ -0,0 +1,86 @@ +#hrz-container { + perspective: 1000px; + background: radial-gradient(ellipse at center, #111111 79%,#333 100%); +} + +.hrz-page { + background-color: #fff; + overflow: hidden; + transform-style: preserve-3d; +} + +.hrz-page.hrz-back { + animation: tiltBack 1s both ease; + transform-origin: center top; +} + +.hrz-page.hrz-focus-from-fore { + animation: slideUp 1s both; +} + +.hrz-page.hrz-focus-from-fore > .hrz-element { + animation: slideDownContents 1s both; +} + +.hrz-page.hrz-fore { + animation: slideDown 0.8s both; +} + +.hrz-page.hrz-fore > .hrz-element { + animation: slideUpContents 1s both; +} +.hrz-page.hrz-focus-from-back { + animation: tiltForward 1s both ease; + transform-origin: center top; +} + +@keyframes tiltBack { + 0% { } + 100% { + transform: rotateX(-15deg) translateZ(-100px); + opacity: 0.7; + } +} + +@keyframes tiltForward { + 0% { + transform: rotateX(-15deg) translateZ(-100px); + opacity: 0.7; + } + 100% { } +} + +@keyframes slideUp { + 0% { + transform: translateY(1000px); + } + 100% { + transform: translateY(0); + } +} +@keyframes slideDown { + 0% { + transform: translateY(0); + } + 100% { + transform: translateY(1000px); + } +} + +@keyframes slideDownContents { + 0% { + transform: translateY(-800px); + } + 100% { + transform: translateY(0); + } +} +@keyframes slideUpContents { + 0% { + transform: translateY(0); + } + 100% { + transform: translateY(-800px); + } +} + diff --git a/src/demo-themes/star-wars/star-wars.js b/src/demo-themes/star-wars/star-wars.js index 0918feb..b33eff7 100644 --- a/src/demo-themes/star-wars/star-wars.js +++ b/src/demo-themes/star-wars/star-wars.js @@ -7,6 +7,45 @@ themes["Star Wars"] = { staggerDelay: 0, selector: 'p,img,h1,h2,h3, h4, .h, .thumbnail, em, li', rootElement: '#root', - pageHideDelay: 3 + pageMargin: 50, + onPageTransition: function(type, page) { + if ($('.starfield').length === 0) { + $('#hrz-container').prepend('
'); + } + + var pageHeight = $(window).height() - 100; + + if (type === 'toFocusFromFore' || type === 'toFocusFromBack') { + var currentPage = page.pageNumber; + + $('.hrz-page').each(function(index) { + var offset = (index + 1) - currentPage; + + if (index === 0) { + if (currentPage === 1) { + this.style.transform = 'rotateX(0deg) translateZ(0px)'; + this.style.opacity = '1'; + } else { + this.style.transform = 'rotateX(0deg) translateZ(-1000px)'; + this.style.opacity = '0'; + } + } else { + this.style.transform = 'rotateX(60deg) translateY(' + parseInt(offset * pageHeight + 100) + 'px)'; + if (offset < -2) { + this.style.opacity = '0'; + } else { + this.style.opacity = '1'; + } + } + + if (index === currentPage + 1) { + this.style.left = '0px'; + } else { + this.style.left = 'inherit'; + } + + }); + } + } } }; \ No newline at end of file diff --git a/src/demo-themes/star-wars/star-wars.src.css b/src/demo-themes/star-wars/star-wars.src.css index 21ffcc8..27369a3 100644 --- a/src/demo-themes/star-wars/star-wars.src.css +++ b/src/demo-themes/star-wars/star-wars.src.css @@ -1,41 +1,144 @@ #hrz-container { perspective: 800px; - background-image: linear-gradient(to bottom, #1d1e25 0%, #000000 100%); + background-color: #111; +} +#hrz-container:before { + overflow: hidden; + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: + radial-gradient(2px 2px at 20px 30px, #eee, rgba(0,0,0,0)), + radial-gradient(1px 1px at 214px 130px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 488px 42px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 600px 84px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 846px 123px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 1083px 185px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 1226px 145px, #eee, rgba(0,0,0,0)), + radial-gradient(1px 1px at 1494px 115px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 1674px 76px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 1822px 59px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 2072px 33px, #eee, rgba(0,0,0,0)), + + radial-gradient(2px 2px at 120px 230px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 290px 160px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 455px 220px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 760px 259px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 899px 240px, #eee, rgba(0,0,0,0)), + radial-gradient(1px 1px at 1080px 290px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 1280px 188px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 1414px 200px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 1750px 145px, #eee, rgba(0,0,0,0)), + radial-gradient(1px 1px at 1850px 219px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 2020px 223px, #eee, rgba(0,0,0,0)), + + radial-gradient(2px 2px at 60px 455px, #eee, rgba(0,0,0,0)), + radial-gradient(1px 1px at 320px 423px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 490px 487px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 600px 524px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 800px 455px, #eee, rgba(0,0,0,0)), + radial-gradient(1px 1px at 1110px 512px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 1278px 498px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 1465px 534px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 1600px 465px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 1800px 423px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 2050px 511px, #eee, rgba(0,0,0,0)), + + radial-gradient(1px 1px at 50px 643px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 225px 753px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 476px 620px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 633px 776px, #eee, rgba(0,0,0,0)), + radial-gradient(1px 1px at 895px 766px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 1022px 738px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 1209px 683px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 1457px 636px, #eee, rgba(0,0,0,0)), + radial-gradient(1px 1px at 1681px 774px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 1823px 626px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 2053px 799px, #eee, rgba(0,0,0,0)), + + radial-gradient(2px 2px at 99px 830px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 220px 978px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 453px 935px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 625px 897px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 822px 832px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 1099px 930px, #eee, rgba(0,0,0,0)), + radial-gradient(1px 1px at 1225px 830px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 1475px 930px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 1650px 830px, #eee, rgba(0,0,0,0)), + radial-gradient(1px 1px at 1860px 930px, #eee, rgba(0,0,0,0)), + radial-gradient(2px 2px at 2010px 830px, #eee, rgba(0,0,0,0)); + + animation: spin 700s infinite; + content: ' '; + opacity: 0.7; +} + +@keyframes spin { + 0% { + transform: scale(1) rotateZ(0deg); + transition-timing-function: linear; + } + 50% { + transform: scale(1.4) rotateZ(180deg); + transition-timing-function: linear; + } + 100% { + transform: scale(1) rotateZ(360deg); + transition-timing-function: linear; + } +} + +/* + Star field code borrowed from Keith Clark http://codepen.io/keithclark/pen/zqcEd + */ +.starfield { + } .hrz-page { opacity: 1; - transform: rotateX(35deg); - transition: transform 2s linear, opacity 0.3s 1.5s; + transform: rotateX(60deg); + transition: transform 2s linear, opacity 1s linear; overflow: hidden; } -.hrz-page.hrz-back { - transform: rotateX(35deg) translateY(-1000px); - opacity: 0; +.hrz-page:nth-child(1) { + transform: rotateX(0deg); + opacity: 1; } -.hrz-page.hrz-fore { - transform: rotateX(35deg) translateY(1000px); - opacity: 0; + +.hrz-page.hrz-hidden { + left: -5000px; } -.hrz-page.hrz-focus-from-back, .hrz-page.hrz-focus-from-fore { - transition: transform 2s linear, opacity 0.3s; +.hrz-page.hrz-fore { + transform: rotateX(60deg) translateY(800px); } .hrz-element { color: yellow !important; } +.hrz-page img { + background-color: yellow !important; +} + +.hrz-element code { + color: yellow !important; + background-color: transparent; + border: 1px solid yellow; +} + /* custom styling of known page elements */ .hrz-element.splash h1 { background: transparent; border-radius: 6px; - border: 2px solid yellow; - color: #222; + color: #111; text-shadow: - -1px -1px 0 yellow, + -1px -1px 0 yellow, 1px -1px 0 yellow, -1px 1px 0 yellow, - 1px 1px 0 yellow; + 1px 1px 0 yellow; }