Skip to content

Instantly share code, notes, and snippets.

@pschwede

pschwede/gist:1015622

Created June 8, 2011 22:37
Show Gist options
  • Save pschwede/1015622 to your computer and use it in GitHub Desktop.
Save pschwede/1015622 to your computer and use it in GitHub Desktop.
Download ZIP
small 3d emulation for R/G-Glasses with HMTL, CSS and jQuery
Raw
gistfile1.txt
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
animate = function(z,t, dt) {
$("h1").css(
"text-shadow", "rgba(0,0,0,.5) "+17*z+"px "+17*z+"px "+13*z+"pt, rgba(0,0,0,"+.5*(1-z)+") 0 1px 0px, rgba(255,0,0,.5) "+3*z+"pt 1px 3px, rgba(0,255,0,.5) -"+3*z+"pt 1px 3px"
).css(
"font-size", 19*(2+z)+"pt"
)
setTimeout("animate("+(1+1*Math.sin(.003*(t+dt)))+", "+(t+dt)+", "+dt+")", dt);
}
animate(0, 0, 30);
});
</script>
<style type="text/css">
h1 {
color: transparent;
text-shadow: -3px 0 1px #f00, 3px 0 1px #0f0;
text-align: center;
margin: 200 auto;
left: 50%;
vertical-align: bottom;
z-index: 999;
position: absolute;
}
</style>
</head>
<body>
<h1>3D</h1>
<p>Grap your R/G-Glasses and get stunned.</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment