Site Shaker

2018

In the mood for a little bit of chaos, I've put in this slider. Distort my site if you like!

The value is stored in a local cookie. So, changes made here will affect any page on my site. Of course, cookies have to be enabled. Otherwise it will not work as expected.

Caution: When using this, some of the links of the site might not be reachable any more because they are behind another element or outside the window. In this this case: Reload the page and hope that it get's better.


How's it working?

This EventHandler listens to changes of the slider, writes the current value to the cookie and updates the page.

Here is the Javascript code:

$("#site-shake-slider").change(function(e) {
  var maxRandomAngle = $("#site-shake-slider").val();
  // Update label
  $("#site-shake-label").html("Maximum angle: " + maxRandomAngle + "°");
  // Update cookie
  document.cookie = "maxrandomangle=" + maxRandomAngle + "; path=/";
  // Update the rotations on the page
  modRotateRandomly(maxRandomAngle);
});
function modRotateRandomly(maxRandomAngle) {
  if (!maxRandomAngle) {
    // If no value is given, read cookies
    maxRandomAngle = readCookie("maxrandomangle");
    if (maxRandomAngle) maxRandomAngle = parseFloat(maxRandomAngle);
    else maxRandomAngle = 0;
  }

  // Update label and slider values
  $("#site-shake-label").html("Maximum angle: " + maxRandomAngle + "°");
  $("#site-shake-slider").val(maxRandomAngle);

  // Select all the elements that should get a random rotation
  $("div,p,h1,h2,h3,h4,img,figure,header,footer,section,hr,li,input,label,a,span,pre,code").each(function(idx, el) {
    var h = $(el).height();

    // Make sure, that elements with a large heigth will not rotate too much.
    // Otherwise much of the elements will be outside the screen.
    h = Math.max(1, (h - 100) / 300);
    var maxAngle = maxRandomAngle / h;

    // Get a random number between -maxAngle and maxAngle
    var r = (Math.random() - 0.5) * maxAngle * 2;
    if (r != 0) $(el).css("transform", "rotate(" + r + "deg)");
    else $(el).css("transform", "");
  })
}

function readCookie(cookieName) {
  var re = new RegExp('[; ]' + cookieName + '=([^\\s;]*)');
  var sMatch = (' ' + document.cookie).match(re);
  if (cookieName && sMatch) return unescape(sMatch[1]);
  return undefined;
}

Your comment