December 20, 2011 22:51 · Dec 20, 2011
diff --git a/dabblet.css b/dabblet.css
@@ -0,0 +1,42 @@
+/**
+ * Diego's Parallax - Test 1
+ */
+
+body {
+	background: #222;
+}
+#container {
+	position: absolute; 
+	top: 50%; 
+	left:50%; 
+	margin-left: -350px;
+	margin-top: -233px; 
+	-webkit-perspective: 1000;
+}
+#fondo {
+	height: 480px; 
+	width: 800px;
+	background: url('http://diegoepunan.com/themes/diego4/fondo.jpg') center top no-repeat;
+	-webkit-transform-style: preserve-3d;
+	transition: all 0.3s ease-in-out; 
+}
+body:hover #fondo {
+	-webkit-transform: translateZ(-30px); 
+
+}
+#foto {
+	position: absolute; 
+	top: 45px; 
+	left: 30%;
+	width: 250px; 
+	height: 440px; 
+	background: url('http://diegoepunan.com/themes/diego4/diego.png') no-repeat; 
+	-webkit-transform: translateZ(90px); 
+	transition: all 0.3s ease-in-out; 
+	-webkit-box-reflect: below 0 -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), to(rgba(255,255,255,0.2)));
+}
+body:hover #foto {
+	-webkit-transform: translateZ(190px); 
+
+}
+
diff --git a/dabblet.html b/dabblet.html
@@ -0,0 +1,23 @@
+
+<div id="container">
+		<div id="fondo">
+        	<div id="foto"></div>
+		</div>
+	</div>
+
+	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
+	<script>
+		$('body').mousemove(function(event) {
+	        cx = Math.ceil($('body').width() / 2.0);
+	        cy = Math.ceil($('body').height() / 2.0);
+	        dx = event.pageX - cx;
+	        dy = event.pageY - cy;
+	        tiltx = (dy / cy);
+	        tilty = - (dx / cx);
+	        radius = Math.sqrt(Math.pow(tiltx,2) + Math.pow(tilty,2));
+	        degree = (radius * 20);
+
+	        $('#fondo').css('-webkit-transform','rotate3d(' + tiltx + ', ' + tilty + ', 0, ' + degree + 'deg)');
+
+	    });
+	</script>
diff --git a/settings.json b/settings.json
@@ -0,0 +1 @@
+{"view":"split-vertical","prefixfree":"1","page":"result"}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{"view":"split-vertical","prefixfree":"1","page":"result"}