Created
June 8, 2011 22:37
-
-
Save pschwede/1015622 to your computer and use it in GitHub Desktop.
small 3d emulation for R/G-Glasses with HMTL, CSS and jQuery
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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