A day late I don’t play much anymore :-(. Sorry it was not ready for April Fools day.
I was thinking of having some fun with our main website http://www.orcasonline.com and wanted to flip the website upside down. Certainly you can’t leave it like that so I found a way to flip it right side up if you click. The I figured how to flip it again on another click and what fun. A bit of a pain if you want to actually use the site though!
In the head section:
<head>
…..
<style>
.flip {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-backface-visibility: hidden;
}
.flipback {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-backface-visibility: hidden;
}
</style>
<script>
function flipit() {
var e = document.getElementById(“flipable”);
if (e.classList.contains(‘flip’)) {
e.className = “flipback”;
window.scrollTo(0, 0);
return;
}
if (e.classList.contains(‘flipback’)) {
e.className = “flip”;
window.scrollTo(0, document.body.scrollHeight-500);
return;}
}
</script>
……
</head>
Create a div for the whole site with ID=flipable
<div id=”flipable” onclick=”flipit()”> …… </div>
Add scroll script to get the top to show at the bottom:of div
<script>
window.onload=toBottom;
function toBottom() {
window.scrollTo(0, document.body.scrollHeight-500);
}
</script>
Click to flip!!
Notes: The 500 above is in pixels and based on a standard monitor resolution being 1024 by 768. 768 did not do it right so I adjusted to 500. Need to figure a way to determine resolution and calc the scroll by that value.
Of course rotating a different degree value is interesting also!