Info for Nerds (ie: How to rotate the browser’s display)
See http://dotslash.ca/javascript-fun-what-my-browser-looks-like-on-a-boat/ for the example/demo.
Through the magic of CSS2 and some basic Javascript, this is actually pretty simple! Here’s the basic description of the code:
- Set up a global variable for the document body’s style element, as well as for a few other things like "angle"
- Check to see if we’re on the page that is only showing this post so we don’t mess up the home page when a blurb of this page is shown. (I just did it a quick and dirty way by checking if the page’s title matches this page’s title)
- Increase the angle but a small random amount, and if the angle is more than twice PI (in Radians) subract twice PI
- Use the sine of the angle divided by a somewhat arbitrary factor to adjust the CSS3 transform’s "rotate()" parameter. (If I didn’t divided it down by the factor it would spin all the way around, just like Google search does when you type “do a barrel roll” in the search!)
- Set a timer to do it again in a moment
The Code
<script lang="javascript"> var pi = Math.PI; var timer; var factor = 20; var angle = 0; var docBody = document.getElementsByTagName("body")[0]; var s = docBody.style; function stopTimer() { clearTimeout(timer); document.getElementById('stopTimerButton').style.display = "none"; document.getElementById('straightenUp').style.display = "block"; } function rollit() { angle += Math.random() / 5; if (angle > pi) { angle -= (2 * pi); } s.transform = "rotate(" + (Math.sin(angle) / factor) + "rad)"; timer = setTimeout("rollit()", 35); } if (document.title.indexOf('Javascript fun') === -1) { document.getElementById("viewThisPost").style.display = "block"; document.getElementById("stopTimerButton").style.display = "none"; } else { s.transform = "rotate(" + angle + "rad)"; rollit(); } </script>
I haven’t tested this on any browsers other than Firefox… but it’s pretty cool, huh?
What’s up, everything is going sound here and ofcourse every one
is sharing data, that’s in fact good, keep up writing.
Hello! I could have sworrn I’ve been too this website before but after looking at many of the
posts I realized it’s new to me. Anyhow, I’m definityely happy I found
it and I’ll be bookmarking it and checkng back regularly!