Skip to content
GitLab
Commit add011b8 authored by christian's avatar christian
Browse files

adding perspective slide-right function for contact-form

parent a570a565
Hide whitespace changes
Inline Side-by-side
css/_partials.scss
View file @ add011b8
@import "normalize.css";
@import url(http://fonts.googleapis.com/css?family=Droid+Sans:400,700|Merriweather+Sans:800);
@import "partials/_colors.scss";
@import "partials/_sun-frames.scss";
@import "partials/_monky-frames.scss";
@import "partials/_greetz-frames.scss";
@import "partials/_perspective.scss";
\ No newline at end of file
@import "partials/_perspective.scss";
css/partials/_perspective.scss
View file @ add011b8
@import "_colors.scss";
.perspective {
position: relative;
}
.container {
background: url(../../img/bg-noise.png) repeat;
min-height: 100%;
position: relative;
outline: 1px solid rgba(0, 0, 0, 0);
z-index: 10;
-webkit-transform: translateZ(0) translateX(0) rotateY(0deg);
-moz-transform: translateZ(0) translateX(0) rotateY(0deg);
-moz-transform: translateZ(0) translateX(0) rotateY(0deg);
transform: translateZ(0) translateX(0) rotateY(0deg);
&::after {
content: '';
......@@ -31,14 +30,14 @@
position: relative;
}
.perspective.modalview {
.perspective.outsideview {
position: fixed;
-webkit-perspective: 1500px;
-moz-perspective: 1500px;
-moz-perspective: 1500px;
perspective: 1500px;
}
.modalview {
.outsideview {
.container {
position: absolute;
overflow: hidden;
......@@ -46,7 +45,7 @@
height: 100%;
cursor: pointer;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.wrapper {
......@@ -61,12 +60,12 @@
transition: opacity 0.3s;
}
/* Outer Nav */
.outer-nav {
/* The Outsider Looking In -- http://goo.gl/rHmOCa --*/
.outsider {
position: absolute;
height: auto;
font-size: 2em;
font-size: 1.563em;
display:none;
&.vertical {
top: 50%;
-webkit-transform: translateY(-50%);
......@@ -76,19 +75,22 @@
transform-style: preserve-3d;
}
&.right {
right: 25%;
right: 10%;
}
a {
&.left {
left: 10%;
}
a, h1 {
display: inline-block;
white-space: nowrap;
font-weight: 300;
margin: 0 0 30px 0;
margin: 0 0 15px 0;
text-decoration:none;
color: #fff;
-webkit-transition: color 0.3s;
transition: color 0.3s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
&:hover {
color: #ffdccd;
......@@ -97,67 +99,63 @@
&.vertical a {
display: block;
}
}
/* Effect Move Left */
.effect-moveleft {
/* Slide 'em Left */
.slide-left {
background: $color-light-grey;
.container {
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
transition: transform 0.4s;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
transform-origin: 50% 50%;
&::after {
background: rgba(255, 255, 255, 0.6);
}
}
&.animate .container {
-webkit-transform: translateX(-50%) rotateY(45deg) translateZ(-50px);
-moz-transform: translateX(-50%) rotateY(45deg) translateZ(-50px);
transform: translateX(-50%) rotateY(45deg) translateZ(-50px);
-moz-box-shadow: 5px 5px 2px rgba(0,182,233, 0.4);
-webkit-box-shadow: 5px 5px 2px rgba(0,182,233, 0.4);
box-shadow: 5px 5px 2px rgba(0,182,233, 0.4);
-moz-box-shadow: 5px 5px 2px rgba(0,182,233, 0.4);
-webkit-box-shadow: 5px 5px 2px rgba(0,182,233, 0.4);
box-shadow: 5px 5px 2px rgba(0,182,233, 0.4);
}
}
.no-csstransforms3d .effect-moveleft.animate .container {
.no-csstransforms3d .slide-left.animate .container {
left: -75%;
}
.effect-moveleft {
.outer-nav a {
.slide-left {
.outsider a {
color: $color-blue;
opacity: 0;
-webkit-transform: translateX(100px) translateZ(-1000px);
-moz-transform: translateX(100px) translateZ(-1000px);
-moz-transform: translateX(100px) translateZ(-1000px);
transform: translateX(100px) translateZ(-1000px);
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
-moz-transition: -moz-transform 0.4s, opacity 0.4s;
-moz-transition: -moz-transform 0.4s, opacity 0.4s;
transition: transform 0.4s, opacity 0.4s;
&:hover {
color: $color-orange;
}
}
&.animate .outer-nav a {
&.animate .outsider a {
opacity: 1;
-webkit-transform: translateX(0) translateZ(0);
-moz-transform: translateX(0) translateZ(0);
-moz-transform: translateX(0) translateZ(0);
transform: translateX(0) translateZ(0);
&:nth-child(2) {
-webkit-transition-delay: 0.04s;
-moz-transition-delay: 0.04s;
-moz-transition-delay: 0.04s;
transition-delay: 0.04s;
}
&:nth-child(3) {
-webkit-transition-delay: 0.08s;
-moz-transition-delay: 0.08s;
-moz-transition-delay: 0.08s;
transition-delay: 0.08s;
}
&:nth-child(4) {
......@@ -181,4 +179,82 @@ box-shadow: 5px 5px 2px rgba(0,182,233, 0.4);
transition-delay: 0.24s;
}
}
}
\ No newline at end of file
}
/* Slide 'em Right */
.slide-right {
background: $color-light-grey;
.container {
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
transition: transform 0.4s;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
transform-origin: 50% 50%;
&::after {
background: rgba(255, 255, 255, 0.6);
}
}
&.animate .container {
-webkit-transform: translateX(50%) rotateY(-45deg) translateZ(-50px);
-moz-transform: translateX(50%) rotateY(-45deg) translateZ(-50px);
transform: translateX(50%) rotateY(-45deg) translateZ(-50px);
-moz-box-shadow: -5px 5px 2px rgba(0,182,233, 0.4);
-webkit-box-shadow: -5px 5px 2px rgba(0,182,233, 0.4);
box-shadow: -5px 5px 2px rgba(0,182,233, 0.4);
}
}
.no-csstransforms3d .slide-right.animate .container {
right: -75%;
}
.slide-right {
.outsider h1 {
color: $color-light-blue;
opacity: 0;
-webkit-transform: translateX(-100px) translateZ(-1000px);
-moz-transform: translateX(-100px) translateZ(-1000px);
transform: translateX(-100px) translateZ(-1000px);
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
-moz-transition: -moz-transform 0.4s, opacity 0.4s;
transition: transform 0.4s, opacity 0.4s;
}
&.animate .outsider h1 {
opacity: 1;
-webkit-transform: translateX(0) translateZ(0);
-moz-transform: translateX(0) translateZ(0);
transform: translateX(0) translateZ(0);
&:nth-child(2) {
-webkit-transition-delay: 0.04s;
-moz-transition-delay: 0.04s;
transition-delay: 0.04s;
}
&:nth-child(3) {
-webkit-transition-delay: 0.08s;
-moz-transition-delay: 0.08s;
transition-delay: 0.08s;
}
&:nth-child(4) {
-webkit-transition-delay: 0.12s;
-moz-transition-delay: 0.12s;
transition-delay: 0.12s;
}
&:nth-child(5) {
-webkit-transition-delay: 0.16s;
-moz-transition-delay: 0.16s;
transition-delay: 0.16s;
}
&:nth-child(6) {
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}
&:nth-child(7) {
-webkit-transition-delay: 0.24s;
-moz-transition-delay: 0.24s;
transition-delay: 0.24s;
}
}
}
css/style.css
View file @ add011b8
......@@ -3,14 +3,14 @@
* !!! AUTOMATICALLY GENERATED CODE !!!
* -------------------------------------------------------------------------
* This file was automatically generated by the OrangeBits compiler.
* Compiled on: 06.06.2014 12:00:16
* Compiled by: w7rechenknecht\christian
* Source: E:\Dokumente\Websites\monkeybiz.at\css\style.scss
* Compiled on: 07.06.2014 18:25:43
* Compiled by: W8RECHENKNECHT\Christian
* Source: C:\Users\Christian\Documents\Websites\monkeybiz.at\css\style.scss
* -------------------------------------------------------------------------*/
@import url("normalize.css");
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700|Merriweather+Sans:300,800);
@import url(normalize.css);
@import url(http://fonts.googleapis.com/css?family=Droid+Sans:400,700|Merriweather+Sans:800);
@keyframes sunFrame {
0% {
left: 0px;
......@@ -438,13 +438,13 @@
.wrapper {
position: relative; }
.perspective.modalview {
.perspective.outsideview {
position: fixed;
-webkit-perspective: 1500px;
-moz-perspective: 1500px;
perspective: 1500px; }
.modalview .container {
.outsideview .container {
position: absolute;
overflow: hidden;
width: 100%;
......@@ -453,7 +453,7 @@
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden; }
.modalview .wrapper {
.outsideview .wrapper {
-webkit-transform: translateZ(-1px); }
.animate .container::after {
......@@ -462,25 +462,28 @@
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s; }
/* Outer Nav */
.outer-nav {
/* The Outsider Looking In -- http://goo.gl/rHmOCa --*/
.outsider {
position: absolute;
height: auto;
font-size: 2em; }
.outer-nav.vertical {
font-size: 1.563em;
display: none; }
.outsider.vertical {
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d; }
.outer-nav.right {
right: 25%; }
.outer-nav a {
.outsider.right {
right: 10%; }
.outsider.left {
left: 10%; }
.outsider a, .outsider h1 {
display: inline-block;
white-space: nowrap;
font-weight: 300;
margin: 0 0 30px 0;
margin: 0 0 15px 0;
text-decoration: none;
color: #fff;
-webkit-transition: color 0.3s;
......@@ -488,24 +491,24 @@
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d; }
.outer-nav a:hover {
.outsider a:hover, .outsider h1:hover {
color: #ffdccd; }
.outer-nav.vertical a {
.outsider.vertical a {
display: block; }
/* Effect Move Left */
.effect-moveleft {
/* Slide 'em Left */
.slide-left {
background: #efefef; }
.effect-moveleft .container {
.slide-left .container {
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
transition: transform 0.4s;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
transform-origin: 50% 50%; }
.effect-moveleft .container::after {
.slide-left .container::after {
background: rgba(255, 255, 255, 0.6); }
.effect-moveleft.animate .container {
.slide-left.animate .container {
-webkit-transform: translateX(-50%) rotateY(45deg) translateZ(-50px);
-moz-transform: translateX(-50%) rotateY(45deg) translateZ(-50px);
transform: translateX(-50%) rotateY(45deg) translateZ(-50px);
......@@ -513,10 +516,10 @@
-webkit-box-shadow: 5px 5px 2px rgba(0, 182, 233, 0.4);
box-shadow: 5px 5px 2px rgba(0, 182, 233, 0.4); }
.no-csstransforms3d .effect-moveleft.animate .container {
.no-csstransforms3d .slide-left.animate .container {
left: -75%; }
.effect-moveleft .outer-nav a {
.slide-left .outsider a {
color: #00a0c6;
opacity: 0;
-webkit-transform: translateX(100px) translateZ(-1000px);
......@@ -525,34 +528,96 @@
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
-moz-transition: -moz-transform 0.4s, opacity 0.4s;
transition: transform 0.4s, opacity 0.4s; }
.effect-moveleft .outer-nav a:hover {
.slide-left .outsider a:hover {
color: #ce6541; }
.effect-moveleft.animate .outer-nav a {
.slide-left.animate .outsider a {
opacity: 1;
-webkit-transform: translateX(0) translateZ(0);
-moz-transform: translateX(0) translateZ(0);
transform: translateX(0) translateZ(0); }
.effect-moveleft.animate .outer-nav a:nth-child(2) {
.slide-left.animate .outsider a:nth-child(2) {
-webkit-transition-delay: 0.04s;
-moz-transition-delay: 0.04s;
transition-delay: 0.04s; }
.effect-moveleft.animate .outer-nav a:nth-child(3) {
.slide-left.animate .outsider a:nth-child(3) {
-webkit-transition-delay: 0.08s;
-moz-transition-delay: 0.08s;
transition-delay: 0.08s; }
.effect-moveleft.animate .outer-nav a:nth-child(4) {
.slide-left.animate .outsider a:nth-child(4) {
-webkit-transition-delay: 0.12s;
-moz-transition-delay: 0.12s;
transition-delay: 0.12s; }
.effect-moveleft.animate .outer-nav a:nth-child(5) {
.slide-left.animate .outsider a:nth-child(5) {
-webkit-transition-delay: 0.16s;
-moz-transition-delay: 0.16s;
transition-delay: 0.16s; }
.effect-moveleft.animate .outer-nav a:nth-child(6) {
.slide-left.animate .outsider a:nth-child(6) {
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s; }
.effect-moveleft.animate .outer-nav a:nth-child(7) {
.slide-left.animate .outsider a:nth-child(7) {
-webkit-transition-delay: 0.24s;
-moz-transition-delay: 0.24s;
transition-delay: 0.24s; }
/* Slide 'em Right */
.slide-right {
background: #efefef; }
.slide-right .container {
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
transition: transform 0.4s;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
transform-origin: 50% 50%; }
.slide-right .container::after {
background: rgba(255, 255, 255, 0.6); }
.slide-right.animate .container {
-webkit-transform: translateX(50%) rotateY(-45deg) translateZ(-50px);
-moz-transform: translateX(50%) rotateY(-45deg) translateZ(-50px);
transform: translateX(50%) rotateY(-45deg) translateZ(-50px);
-moz-box-shadow: -5px 5px 2px rgba(0, 182, 233, 0.4);
-webkit-box-shadow: -5px 5px 2px rgba(0, 182, 233, 0.4);
box-shadow: -5px 5px 2px rgba(0, 182, 233, 0.4); }
.no-csstransforms3d .slide-right.animate .container {
right: -75%; }
.slide-right .outsider h1 {
color: #00b6e9;
opacity: 0;
-webkit-transform: translateX(-100px) translateZ(-1000px);
-moz-transform: translateX(-100px) translateZ(-1000px);
transform: translateX(-100px) translateZ(-1000px);
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
-moz-transition: -moz-transform 0.4s, opacity 0.4s;
transition: transform 0.4s, opacity 0.4s; }
.slide-right.animate .outsider h1 {
opacity: 1;
-webkit-transform: translateX(0) translateZ(0);
-moz-transform: translateX(0) translateZ(0);
transform: translateX(0) translateZ(0); }
.slide-right.animate .outsider h1:nth-child(2) {
-webkit-transition-delay: 0.04s;
-moz-transition-delay: 0.04s;
transition-delay: 0.04s; }
.slide-right.animate .outsider h1:nth-child(3) {
-webkit-transition-delay: 0.08s;
-moz-transition-delay: 0.08s;
transition-delay: 0.08s; }
.slide-right.animate .outsider h1:nth-child(4) {
-webkit-transition-delay: 0.12s;
-moz-transition-delay: 0.12s;
transition-delay: 0.12s; }
.slide-right.animate .outsider h1:nth-child(5) {
-webkit-transition-delay: 0.16s;
-moz-transition-delay: 0.16s;
transition-delay: 0.16s; }
.slide-right.animate .outsider h1:nth-child(6) {
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s; }
.slide-right.animate .outsider h1:nth-child(7) {
-webkit-transition-delay: 0.24s;
-moz-transition-delay: 0.24s;
transition-delay: 0.24s; }
......@@ -572,6 +637,9 @@ body {
-webkit-box-sizing: border-box;
box-sizing: border-box; }
#force {
cursor: help; }
.inner-wrapper {
width: 960px;
margin: 0 auto; }
......@@ -709,83 +777,25 @@ body {
margin-top: 12px; }
.inner-wrapper #section-container .content p a, .inner-wrapper #section-container .content p button {
color: #00a0c6;
text-decoration: none; }
text-decoration: none;
outline: none 0; }
.inner-wrapper #section-container .content p a:hover, .inner-wrapper #section-container .content p button:hover {
color: #ce6541; }
/*#container {
width:100%;
margin: 0 auto;
background: #f2f0f0;
text-align:right;
padding: 20px 0;
margin-top: -50px;
text-indent:20px;
margin-bottom: 50px;
}
#container-footer {
width: 760px;
margin: 0 auto;
}
#container h1 {
font-family: 'Bree Serif', serif;
color: #ce6541;
font-size: 70px;
background:url(../img/ribbon.png) 8px 17px no-repeat;
padding: 0;
display:block;
margin: 0 auto;
width:945px;
text-align: center;
line-height: 110px;
text-shadow: 0px 2px 0px #e5e5ee;
}
#container h2, #impdata h1 {
margin: 0;
color: #27a2be;
font-size: 52px;
font-weight: 400;
margin-left: 20px;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
text-shadow: #999 1px 3px 3px;
font-family: 'Droid Sans';
}*/
/*#container p {
color: $color-p;
font-size: 18px;
margin: 0;
padding: 0;
margin-top: 20px;
margin-right: 20px;
}
#container a:hover {
color: #ce6541;
}
#container a {
color: #27a2be;
}
*/
.orange, .orange-big {
color: #ce6541; }
.orange-big {
font-size: 1.750em; }
/* Contain floats: h5bp.com/q */
.clearfix {
*zoom: 1; }
.clearfix:before {
content: "";
display: table; }
display: table;
visibillity: hidden; }
.clearfix:after {
content: "";
display: table;
clear: both; }
clear: both;
visibillity: hidden; }
css/style.scss
View file @ add011b8
@import url("normalize.css");
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700|Merriweather+Sans:300,800);
@import "_partials.scss";
html, body, .perspective {
width: 100%;
height: 100%;
}
body {
font-family: 'Droid Sans',arial, verdana, sans-serif;
min-width: 960px;
margin: 0;
padding: 0;
}
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#force{
cursor: help;
}
.inner-wrapper {
width: 960px;
margin: 0 auto;
header {
width: 100%;
height: 580px;
position: relative;
header {
width: 100%;