Updated demo themes

michaelbromley · Sep 1, 2014 · 333ff2c · 333ff2c
1 parent 88357dd
commit 333ff2c
Show file tree

Hide file tree

Showing 21 changed files with 1,128 additions and 523 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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;
 }