Skip to content

Commit 9cb9564

Browse files
MaKleSoftMaKleSoft
committed
intial commit
0 parents  commit 9cb9564

File tree

3 files changed

+2104
-0
lines changed

3 files changed

+2104
-0
lines changed

‎index.html

Lines changed: 295 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,295 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5+
<meta name="description" content="MaKleSoft - Transforming the Web">
6+
<meta name="keywords" content="web,development,software,design,engineering,martin,kleinschrodt">
7+
<meta name="author" content="Martin Kleinschrodt">
8+
<meta name="viewport" content="width=device-width, initial-scale=0.8, maximum-scale=1.0, user-scalable=no"/>
9+
<!-- JQUERY -->
10+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
11+
<script src="mdzr-3dtrans.js"></script>
12+
13+
<script type="text/javascript" charset="utf-8">
14+
$(document).ready(function() {
15+
function setPerspective(x, y) {
16+
$(document.body).css("perspective-origin", x + "px " + y + "px");
17+
}
18+
19+
function bubbleHover() {
20+
var r = Math.floor(Math.random() * 256);
21+
var g = Math.floor(Math.random() * 256);
22+
var b = Math.floor(Math.random() * 256);
23+
$(this).css("background", "rgb(" + r + ", " + g + ", " + b + ")").css("color", "rgb(" + r + ", " + g + ", " + b + ")");
24+
}
25+
26+
if (Modernizr.csstransforms3d) {
27+
// window.addEventListener("deviceorientation", function (event) {
28+
// console.log(event.beta + ", " + event.gamma);
29+
// var x = Math.cos(event.beta) * $(document).width();
30+
// var y = Math.cos(event.gamma) * $(document).height();
31+
// console.log(x + ", " + y);
32+
// setPerspective(x, y);
33+
// }, true);
34+
$(document.body).mousemove(function(event) {
35+
setPerspective(event.pageX, event.pageY);
36+
});
37+
38+
var w = $(document).width();
39+
var h = $(document).height();
40+
var n = Math.floor(w * h / 10000);
41+
var b = $(document.body);
42+
for (var i=0; i<n; i++) {
43+
var left = w/2 + Math.random() * w - w/2;
44+
var top = h/2 + Math.random() * h - h/2;
45+
var o = Math.random() * 0.5;
46+
$("<div>").addClass("bubble")
47+
.css({
48+
left: left + "px", top: top + "px", opacity: o,
49+
animation: "fall 10s linear infinite",
50+
"animation-delay": Math.random() * 10 + "s",
51+
transform: "translate3d(0, 0, 1000px)"
52+
})
53+
.mouseover(bubbleHover)
54+
.data("opacity", Math.random() * 0.5)
55+
.appendTo(b);
56+
}
57+
}
58+
});
59+
</script>
60+
61+
<style>
62+
@-webkit-keyframes fall {
63+
from { -webkit-transform: translate3d(0, 0, 1000px); }
64+
95% { opacity: attr(data-opacity); }
65+
to { -webkit-transform: translate3d(0, 0, 0); opacity: 0; }
66+
}
67+
@-moz-keyframes fall {
68+
from { -moz-transform: translate3d(0, 0, 1000px); }
69+
95% { opacity: attr(data-opacity); }
70+
to { -moz-transform: translate3d(0, 0, 0); opacity: 0; }
71+
}
72+
@-ms-keyframes fall {
73+
from { -ms-transform: translate3d(0, 0, 1000px); }
74+
95% { opacity: attr(data-opacity); }
75+
to { -ms-transform: translate3d(0, 0, 0); opacity: 0; }
76+
}
77+
@keyframes fall {
78+
from { transform: translate3d(0, 0, 1000px); }
79+
95% { opacity: attr(data-opacity); }
80+
to { transform: translate3d(0, 0, 0); opacity: 0; }
81+
}
82+
83+
@-webkit-keyframes peek {
84+
0% { -webkit-transform: rotateX(0) translate3d(0, 0, 0);}
85+
50% { -webkit-transform: rotateX(45deg) translate3d(0, -23%, 0); }
86+
100% { -webkit-transform: rotateX(0) translate3d(0, 0, 0); }
87+
}
88+
@-moz-keyframes peek {
89+
0% { -moz-transform: rotateX(0) translate3d(0, 0, 0);}
90+
50% { -moz-transform: rotateX(45deg) translate3d(0, -23%, 0); }
91+
100% { -moz-transform: rotateX(0) translate3d(0, 0, 0); }
92+
}
93+
@-ms-keyframes peek {
94+
0% { -ms-transform: rotateX(0) translate3d(0, 0, 0);}
95+
50% { -ms-transform: rotateX(45deg) translate3d(0, -23%, 0); }
96+
100% { -ms-transform: rotateX(0) translate3d(0, 0, 0); }
97+
}
98+
@keyframes peek {
99+
0% { transform: rotateX(0) translate3d(0, 0, 0);}
100+
50% { transform: rotateX(45deg) translate3d(0, -23%, 0); }
101+
100% { transform: rotateX(0) translate3d(0, 0, 0); }
102+
}
103+
104+
105+
body {
106+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
107+
font-size: 100%;
108+
color: #333;
109+
-webkit-perspective: 1000px;
110+
-moz-perspective: 1000px;
111+
-ms-perspective: 1000px;
112+
perspective: 1000px;
113+
overflow: hidden;
114+
/*-webkit-transition: -webkit-perspective 2s ease-out;
115+
-moz-transition: -moz-perspective 2s ease-out;
116+
-ms-transition: -ms-perspective 2s ease-out;
117+
transition: perspective 2s ease-out;*/
118+
/*background: #f1f1f1;*/
119+
}
120+
121+
body, html {
122+
width: 100%;
123+
height: 100%;
124+
padding: 0;
125+
margin: 0;
126+
}
127+
128+
a {
129+
text-decoration: none;
130+
color: #333;
131+
}
132+
133+
.roll-over {
134+
position: relative;
135+
display: inline-block;
136+
overflow: visible;
137+
vertical-align: top;
138+
-webkit-perspective: 600px;
139+
-moz-perspective: 600px;
140+
-ms-perspective: 600px;
141+
perspective: 600px;
142+
-webkit-perspective-origin: 50% 50%;
143+
-moz-perspective-origin: 50% 50%;
144+
-ms-perspective-origin: 50% 50%;
145+
perspective-origin: 50% 50%;
146+
}
147+
148+
.roll-over span {
149+
padding: 2px;
150+
display: block;
151+
position: relative;
152+
/*background-color: #fff;*/
153+
-webkit-transition: all 0.5s;
154+
-moz-transition: all 0.5s;
155+
-ms-transition: all 0.5s;
156+
transition: all 0.5s;
157+
/*-webkit-transform-origin: 50% 0%;
158+
-moz-transform-origin: 50% 0%;
159+
-ms-transform-origin: 50% 0%;
160+
transform-origin: 50% 0%;*/
161+
-webkit-transform-style: preserve-3d;
162+
-moz-transform-style: preserve-3d;
163+
-ms-transform-style: preserve-3d;
164+
transform-style: preserve-3d;
165+
}
166+
167+
.roll-over span:after {
168+
padding: 2px;
169+
content: attr(data-title);
170+
display: block;
171+
position: absolute;
172+
left: 0;
173+
top: 0;
174+
color: #fff;
175+
background-color: #333;
176+
width: 100%;
177+
text-align: center;
178+
/*text-shadow: 0 1px 1px #fff;*/
179+
backface-visibility: hidden;
180+
-webkit-backface-visibility: hidden;
181+
-moz-backface-visibility: hidden;
182+
-ms-backface-visibility: hidden;
183+
-webkit-transform-origin: 50% 0%;
184+
-moz-transform-origin: 50% 0%;
185+
-ms-transform-origin: 50% 0%;
186+
transform-origin: 50% 0%;
187+
-webkit-transform: translate3d(0, 100%, 0) rotateX(-90deg);
188+
-moz-transform: translate3d(0, 100%, 0) rotateX(-90deg);
189+
-ms-transform: translate3d(0, 100%, 0) rotateX(-90deg);
190+
transform: translate3d(0, 100%, 0) rotateX(-90deg);
191+
}
192+
193+
.roll-over:hover span {
194+
-webkit-transform: translate3d(0, -50%, 0) rotateX(90deg);
195+
-moz-transform: translate3d(0, -50%, 0) rotateX(90deg);
196+
-ms-transform: translate3d(0, -50%, 0) rotateX(90deg);
197+
transform: translate3d(0, -50%, 0) rotateX(90deg);
198+
}
199+
200+
.content {
201+
width: 320px;
202+
height: 400px;
203+
position: absolute;
204+
left: 0;
205+
right: 0;
206+
top: 0;
207+
bottom: 0;
208+
margin: auto;
209+
text-align: center;
210+
padding: 40px 0;
211+
}
212+
213+
#logo {
214+
width: 300px;
215+
height: 300px;
216+
-webkit-transform: translate3d(0, 0, 10px);
217+
-moz-transform: translate3d(0, 0, 10px);
218+
-ms-transform: translate3d(0, 0, 10px);
219+
transform: translate3d(0, 0, 10px);
220+
}
221+
222+
#name {
223+
padding: 15px 0 20px 0;
224+
-webkit-transform: translate3d(0, 0, 20px);
225+
-moz-transform: translate3d(0, 0, 20px);
226+
-ms-transform: translate3d(0, 0, 20px);
227+
transform: translate3d(0, 0, 20px);
228+
}
229+
230+
#name span {
231+
font-size: 300%;
232+
padding: 0 20px;
233+
cursor: default;
234+
-webkit-animation: peek 1s ease 1s;
235+
-moz-animation: peek 1s ease 1s;
236+
-ms-animation: peek 1s ease 1s;
237+
animation: peek 1s ease 1s;
238+
}
239+
240+
#name span:after {
241+
line-height: 57px;
242+
content: "Transforming the Web";
243+
font-size: 45%;
244+
}
245+
246+
#links {
247+
-webkit-transform: translate3d(0, 0, 30px);
248+
-moz-transform: translate3d(0, 0, 30px);
249+
-ms-transform: translate3d(0, 0, 30px);
250+
transform: translate3d(0, 0, 30px);
251+
}
252+
253+
.bubble {
254+
position: absolute;
255+
width: 20px;
256+
height: 20px;
257+
color: #fff;
258+
border-radius: 100px;
259+
z-index: 1;
260+
text-align: center;
261+
line-height: 100px;
262+
background: #333;
263+
box-shadow: 0 0 3px;
264+
color: rgb(50, 50, 50);
265+
-webkit-transition: background 0.5s, color 0.5s;
266+
-moz-transition: background 0.5s, color 0.5s;
267+
-ms-transition: background 0.5s, color 0.5s;
268+
transition: background 0.5s, color 0.5s;
269+
}
270+
</style>
271+
</head>
272+
<body>
273+
<div class="content">
274+
<img id="logo" src="logo.svg">
275+
<div id="name" class="roll-over">
276+
<span>MaKleSoft</span>
277+
</div>
278+
<div id="links">
279+
<a href="mailto:contact@maklesoft.com" class="roll-over"><span data-title="contact@maklesoft.com">contact@maklesoft.com</span></a> | <a href="http://twitter.com/maklesoft/" target="_blank" class="roll-over"><span data-title="@MaKleSoft">@MaKleSoft</span></a>
280+
</div>
281+
</div>
282+
<!-- GOOGLE ANALYTICS -->
283+
<script type="text/javascript">
284+
var _gaq = _gaq || [];
285+
_gaq.push(['_setAccount', 'UA-17922739-3']);
286+
_gaq.push(['_trackPageview']);
287+
288+
(function() {
289+
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
290+
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
291+
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
292+
})();
293+
</script>
294+
</body>
295+
</html>

0 commit comments

Comments
 (0)