Commit add011b8 authored by christian's avatar christian

adding perspective slide-right function for contact-form

parent a570a565
@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";
@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;
}
}
}
This diff is collapsed.
@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%;
height: 580px;
position: relative;
& #sun{
background: url(../img/header-bg.png) no-repeat;
position:absolute;
left:0;
top:0;
width:960px;
height:587px;
position: absolute;
left: 0;
top: 0;
width: 960px;
height: 587px;
animation: sunFrame ease 2s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
......@@ -122,14 +124,15 @@ header {
}
}
}
#section-container{
width:100%;
text-align:center;
position:relative;
width: 100%;
text-align: center;
position: relative;
.ribbon{
background-image:url(../img/ribbon.png);
background-image: url(../img/ribbon.png);
background-repeat: no-repeat;
background-position:center -2px;
background-position: center -2px;
padding: 0;
margin: 0 auto;
width: 945px;
......@@ -137,14 +140,14 @@ header {
position: absolute;
top: -130px;
left: 7.5px;
z-index:1500;
z-index: 1500;
h1 {
font-family: "Merriweather Sans", sans-serif;
color: $color-blue;
font-size: 4.688em;
padding: 0;
margin: 0;
line-height:96px;
line-height: 96px;
text-align: center;
text-shadow: 3px 3px 0 $color-light-blue;
text-transform: uppercase;
......@@ -157,90 +160,25 @@ header {
border: 0;
background: none;
}
p {
p {
color: $color-p;
font-size: 1.250em;
margin: 0;
padding: 0;
margin-top: 12px;
a,button {
color: $color-blue;
text-decoration: none;
&:hover{
outline:none 0;
&:hover {
color: $color-orange;
}
}
}
}
}
}
/*#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 {
color: $color-orange;
}
......@@ -250,19 +188,17 @@ width:945px;
font-size: 1.750em;
}
/* Contain floats: h5bp.com/q */
.clearfix {
&:before {
content: "";
display: table;
visibillity: hidden;
}
&:after {
content: "";
display: table;
clear: both;
visibillity: hidden;
}
*zoom: 1;
}
\ No newline at end of file
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="de"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="de"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="de"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="de">
<!--<![endif]-->
<html class="no-js" lang="de">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>www.monkeybiz.at</title>
<meta name="description" content="">
<link rel="stylesheet" href="css/style.css">
<link href="http://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet" type="text/css">
<script src="js/lib/modernizr-latest.min.js"></script>
</head>
<body>
<div id="perspective" class="perspective effect-moveleft">
<div class="container">
<div class="wrapper">
<div class="inner-wrapper">
<header>
<div id="sun"></div><div id="monky"></div> <div id="greetz"></div>
<div id="header-content">
<div id="perspective" class="perspective">
<div class="container">
<div class="wrapper">
<div class="inner-wrapper">
<header>
<div id="sun"></div><div id="monky"></div><div id="greetz"></div>
<div id="header-content">
<p>My name is Christian Weiss, <br>I'm a <span class="orange">front-end web developer</span>,<br> <span class="orange">sound designer</span> and <span class="orange">audio engineer</span><br>from Vienna, Austria.</p>
<p>I like monkeys, wicked sounds and<br><span class="orange-big">clean &amp; simple code!</span></p>
</div>
</header>
<section role="main" id="section-container">
<header class="ribbon">
<h1>Monkeybiz.at</h1>
</header>
<article class="content">
<p>I follow with great commitment all the latest developments around HTML5, CSS3 and JavaScript.<br>I enjoy the challenges on my way to become a <span class="orange">JavaScript Ninja!</span></p>
<p>I’m a synthesizer freak and love to create and modeling maniac sounds.</p>
<p><button class="show-outsider" id="outside-links">Click here</button>if you want to see some code examples.<br>Please note that I do not have IE support for private projects and some of the stuff is very experimental.</p>
<p>If you like what you read, don’t be shy and write me a <button class="show-outsider" id="outside-contact">message</button><!--<a href="&#109;&#097;&#105;&#108;&#116;&#111;&#058;&#099;&#104;&#114;&#105;&#115;&#116;&#105;&#097;&#110;&#064;&#109;&#111;&#110;&#107;&#101;&#121;&#098;&#105;&#122;&#046;&#097;&#116;">message</a>-->.</p>
<p><span class="orange-big force">Have a good time <span id="force">:)</span></span></p>
</article>
</section>
</div>
</div>
</div>
<p>My name is Christian Weiss, <br>I'm a <span class="orange">front-end web developer</span>,<br> <span class="orange">sound designer</span>
and <span class="orange">audio engineer</span> <br>from Vienna, Austria. </p>
<section role="link" class="outsider right vertical outside-links">
<a href="https://git.devcontrol.org/chrise/monkeybiz/tree/master" target="_blank">monkeybiz git</a>
<a href="http://www.monkeybiz.at/imagebox/" target="_blank">imageBox.js</a>
<a href="http://dev.monkeybiz.at/memory/" target="_blank">memorySlider demo</a>
<a href="https://git.devcontrol.org/chrise/memory-js/blob/master/slidememory.js" target="_blank">memorySlider git</a>
<a href="http://dev.monkeybiz.at/sticker/" target="_blank">quicker sticker (chrome only!)</a>
<a href="http://dev.monkeybiz.at/analyzr" target="_blank">analyzr (chrome only!)</a>
</section>
<section role="form" class="outsider left vertical outside-contact">
<div>
<h1 class="right">Kontaktformular</h1>
<ul id="errors" class="clearfix">
<li id="info">Bitte überprüfen Sie Ihre Eingaben!</li>
</ul>
<form name="ajax-form" id="ajax-form" class="clearfix" action="mail-it.php" method="post">
<label for="name">Name</label>
<input name="name" id="name" type="text" placeholder="Vorname Nachname" required="required" value="" />
<label for="email">E-Mail</label>
<input class="h5-email" name="email" id="email" type="email" title="max@muster.at" placeholder="max@muster.at" required="required" value="" />
<label for="phone">Telefon</label>
<input type="tel" class="h5-phone" name="phone" id="phone" title="01/2345678" placeholder="01/2345678" required="required" value="" />
<p>I like monkeys, wicked sounds and <br>
<span class="orange-big">clean &amp; simple code!</span></p>
</div>
</header>
<section role="main" id="section-container">
<header class="ribbon">
<h1>Monkeybiz.at</h1>
</header>
<article class="content">
<p>I follow with great commitment all the latest developments around HTML5, CSS3 and JavaScript.<br>
I enjoy the challenges on my way to become a <span class="orange">JavaScript Ninja!</span></p>
<p>I’m a synthesizer freak and love to create and modeling maniac sounds.</p>
<p><button id="showMenu">Click here</button>if you want to see some code examples.<br> Please note that I do not have IE support for private projects and some of the stuff is very experimental.</p>
<p>If you like what you read, don’t be shy and write me a <a href="&#109;&#097;&#105;&#108;&#116;&#111;&#058;&#099;&#104;&#114;&#105;&#115;&#116;&#105;&#097;&#110;&#064;&#109;&#111;&#110;&#107;&#101;&#121;&#098;&#105;&#122;&#046;&#097;&#116;">message</a>.</p>
<p><span class="orange">Have a good time :)</span> </p>
</article>
</section>
</div>
</div>
</div><!-- /container -->
<nav class="outer-nav right vertical">
<a href="https://git.devcontrol.org/chrise/monkeybiz/tree/master" target="_blank">monkeybiz git</a>
<a href="http://www.monkeybiz.at/imagebox/" target="_blank">imageBox.js</a>
<a href="http://dev.monkeybiz.at/memory/" target="_blank">memorySlider demo</a>
<a href="https://git.devcontrol.org/chrise/memory-js/blob/master/slidememory.js" target="_blank">memorySlider git</a>
<a href="http://dev.monkeybiz.at/sticker/" target="_blank">quicker sticker (chrome only!)</a>
<a href="http://dev.monkeybiz.at/analyzr" target="_blank">analyzr (chrome only!)</a>
</nav>
</div><!-- /perspective -->
<label for="message">Nachricht</label>
<textarea name="message" id="message" placeholder="Ihre Nachricht..." data-minlength="5" required="required"></textarea>
<p class="clearfix" id="req-field-desc">Alle Felder sind Pflichtfelder,<br>Ihre E-Mail-Adresse wird nicht veröffentlicht.</p>
<button type="submit" id="send">Senden</button>
<span id="loading"></span>
</form>
<!-- <div id="success" class="clearfix"><img src="img/mail-send.png" alt="Nachricht gesendet"></div>-->
</div>
</section>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/script.js"></script>
</body>
......
$(function () {
$('#force').one('click', function () {
var sith = $('<img src="img/vader.png" />');
$('.force').parent().append(sith);
$('.force').css({ color: '#666' });
sith.css({
opacity: 0,
position: 'absolute',
right: '100px',
bottom: '5px'
});
$('.force').text('...and join the dark side of the force! ');
$('.force').typewriter();
sith.delay(4300).animate({ opacity: '0.6' }, 1000);
});
});
(function () {
function scrollY() {
return window.pageYOffset || doc.scrollTop;
}
// from http://stackoverflow.com/a/11381730/989439
function mobilecheck() {
var check = false;
(function (a) { if (/(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))) check = true })(navigator.userAgent || navigator.vendor || window.opera);
return check;
}
var doc = window.document.documentElement,
// support transitions
support = Modernizr.csstransitions,
// transition end event name
transEndEventNames = {
'WebkitTransition': 'webkitTransitionEnd',
'MozTransition': 'transitionend',
'OTransition': 'oTransitionEnd',
'msTransition': 'MSTransitionEnd',
'transition': 'transitionend'
},
transEndEventName = transEndEventNames[Modernizr.prefixed('transition')],
docScroll = 0,
// click event (if mobile use touchstart)
clickevent = mobilecheck() ? 'touchstart' : 'click';
//console.log(Modernizr.prefixed('transform'))
function init() {
var $showMenu = $('#showMenu'),
$perspWrapper = $('#perspective'),
$container = $perspWrapper.find('.container'),
$contentWrapper = $container.find('.wrapper');
$.fn.typewriter = function () {
this.each(function () {
var $el = $(this), str = $el.text(), progress = 0;
$el.text('');
var timer = setInterval(function () {
$el.text(str.substring(0, progress++) + (progress & 1 ? '' : ''));
if (progress >= str.length)
clearInterval(timer);
}, 90);
});
return this;
};
$showMenu.on(clickevent, function (e) {
e.stopPropagation();
e.preventDefault();
docScroll = scrollY();
$contentWrapper.css({
top: docScroll * -1
});
// mac Chrome bug
document.body.scrollTop = document.documentElement.scrollTop = 0;
// add modalview class
$perspWrapper.addClass('modalview');
setTimeout(function () {
$perspWrapper.addClass('animate');
}, 25);
(function () {
function scrollY() {
return window.pageYOffset || doc.scrollTop;
}
//http://stackoverflow.com/a/11381730/989439
function mobilecheck() {
var check = false;
(function (a) { if (/(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))) check = true })(navigator.userAgent || navigator.vendor || window.opera);
return check;
}
var doc = window.document.documentElement,
support = Modernizr.csstransitions,
transEndEventNames = {
'WebkitTransition': 'webkitTransitionEnd',
'MozTransition': 'transitionend',
'OTransition': 'oTransitionEnd',
'msTransition': 'MSTransitionEnd',
'transition': 'transitionend'
},
transEndEventName = transEndEventNames[Modernizr.prefixed('transition')],
docScroll = 0,
clickevent = mobilecheck() ? 'touchstart' : 'click';
function init() {
var $showOutsider = $('.show-outsider'),
$perspWrapper = $('#perspective'),
$container = $perspWrapper.find('.container'),
$contentWrapper = $container.find('.wrapper');
$showOutsider.on(clickevent, function (e) {
if($(this).attr('id') === 'outside-links'){
$perspWrapper.addClass('slide-left');
}
if($(this).attr('id') === 'outside-contact'){
$perspWrapper.addClass('slide-right');
}
$('.outsider').hide();
$('.'+$(this).attr('id')+'').show();
e.stopPropagation();
e.preventDefault();
docScroll = scrollY();
$contentWrapper.css({