The script is simple. It is based on the animation functions from Jack Rugile's jRumble script, but intensity of Off-Register increases over time. jRumble has several variables that can be manipulated to vary the motion of affected objects. This is thouroughly documented on that page. Off-Register can be modified with values that determine the speed and amount of increase in intensity. These can be modified when calling the function in your document using the following code.
$(document).ready(function() {
var distance = 0,
intensity = 50, // higher values for less intensity
speed = 0, // higher values are slower
increase = 10000, // number of milliseconds before distance is increased. higher numbers=slower increase.
offregclass = 'offreg'; // name of class to be affected.
console.log(distance, intensity, speed, increase, offregclass);
function addone() {
distance++;
$('.' + offregclass).jrumble({
x: distance / intensity,
y: distance / intensity,
rotation: distance / intensity / intensity,
});
$('.' + offregclass).trigger('startRumble');
setTimeout(addone, 10000);
}
addone();
});
When using the script on your own site, it is best to structure the overlays in HTML by hand. Each element that will vibrate must be nested into a absolute positioned container.
The script can also be used as a bookmarklet and then run on other sites to get a bit of the print newspaper experience while reading online. When used as a bookmarklet, an additional section of code can be added to duplicate the page elements.
The section header above is positioned using this structure:
<div class="absolute">
<h3 class="offreg">The Code</h3>
</div>
<div class="absolute">
<h3 class="offreg">The Code</h3>
</div>
<div class="absolute">
<h3 class="offreg">The Code</h3>
</div>
<div class="absolute">
<h3>The Code</h3>
</div>
When using the bookmarklet, this code duplicates the page elements to create the CMY layers:
$( "<div id='aqua' class='clone'></div>" ).appendTo( "body" );
$("body").children().clone().appendTo('#aqua');
$("#aqua").children().css({"position":"absolute","top":"0","left":"0"});
$("#aqua").find('*').css({"color":"aqua", "opacity":"0.8"});
$( "<div id='magenta' class='clone'></div>" ).appendTo( "body" );
$("#aqua").children().clone().appendTo('#magenta');
$("#magenta").children().css({"position":"absolute","top":"0","left":"0"});
$("#magenta").find('*').css({"color":"fuchsia", "opacity":"0.8"});
$( "<div id='yellow' class='clone'></div>" ).appendTo( "body" );
$("#magenta").children().clone().appendTo('#yellow');
$("#yellow").children().css({"position":"absolute","top":"0","left":"0"});
$("#yellow").find('*').css({"color":"yellow", "opacity":"0.8"});